Nov 2011
WIREFRAMES AND DESIGN PROCESS by stefano oliva
Friday, November 4, 11
AGENDA
What I am going to tell you in these slides
1
OLIVA IDENTITY REDESIGN
2
RIDE FAST, RIDE TOGETHER
Friday, November 4, 11
I’ve been asked to create a new image for the 30th anniversary of the bike shop and team. The package consists of logos, team strip, business card and website. The challenge is creating an online image that communicates the high technical skills of the mechanics and the quality of the products and service. The project is still under construction and will be online and in production by the end of November.
As a graduation project, I developed a solution to trigger travelers using Masdar automated service towards ridesharing. The project followed an iterative process and the final delivery consisted of a vehicle interface, mobile app and website related to the shared service. Besides the technical wireframes, a visual solution has been proposed to the company.
TEAM OLIVA BRAND 30th Anniversary and the end of the comic sans era
Friday, November 4, 11
BRAND IMAGE
The transition from only physical to digital as main challenge North-West Area
E-MAIL QUESTIONS WHO IS SELLING WHAT WHO IS GIVING ASSISTANCE HOW MUCH WOULD IT COST Rest of Italy, Lazy Asses, Bike-Forum Addicts Friday, November 4, 11
dig
physical
ita
l
AFTER-PURCH ASSISTANCE PRICES/SERVICE RATIO PRO BIKE CONFIG
who are we create strong vision what brands/products show services available support with testimonials tell why it is not a webshop create communication channel
LOGIC
Structure of the online service
1. claim/what do we want to communicate 2. three(scrollable) new products 3. full background image 4. keep it simple and clear, it's not a webshop ! 5. googleadsense????
HOME
WHO ARE WE
OWNERS
PRODUCTS
TEAM
BIKES
ACCESSORIES
WHERE ARE WE
CLOTHES
MAP/ DIRECTION
1.pic 2.bio 3.be fun PICS
RACE CALENDAR
horiz. scroll ical download UPLOAD LOGIN
standard pw
Friday, November 4, 11
1. brand only 2. link to catalogue
CONTACT FORM
1. google snippet 2. from Milano 3. From Torino
1. name 2. from 3. mal 4. phone 5. question
FIRST SKETCHES What I am working on at the moment
Friday, November 4, 11
FIRST WIRES
One of the ideas developed a bit further Web Page Title http://domain.com
Logo Chi Siamo
Category Description
Prodotti Dove Siamo Domande Testimonial Story News Text
Friday, November 4, 11
FIRST SAMPLES First demos proposed
Web Page Title http://domain.com
Oliva biciclette
Chi Siamo Prodotti
695 GRAMMI La più' leggera al mondo, il miglior rapporto peso/rigidita'. Incredibile.
Dove Siamo Domande Ted King Plurivincitore, in sella all sua Evo. Vincitrice del Eurobike Award 2011, Ted non può' essere più' che soddisfatto.
Friday, November 4, 11
Viviani e il giro del Piemonte Il ciclista continua a vincere..
FIRST PROTOTYPES First samples uploaded online
Friday, November 4, 11
FIRST PROTOTYPES First samples uploaded online/mobile version
Friday, November 4, 11
RIDE FAST, RIDE TOGETHER Samples of digital works from sketching to visuals for 2GetThere
2 Friday, November 4, 11
METHOD
applied after context analysis and definition of the interaction
a)
SKETCH IT good old paper and pencil
get an idea, clarify your thoughts
b)
GRAFFLE IT
give it some structure and order
c)
TEST IT
gain external opinions and see reactions
d)
DELIVER IT
finalize and present visually (at a consultancy it would of course be an detailed wireframe for visual designers)
wireframing with tool
make people try it
conclude with insights gained
Friday, November 4, 11
SKETCH IT
a) a)
First attempts after gaining inspiration and defining requirements
Friday, November 4, 11
Friday, November 4, 11
GRAFFLE IT
b)
Overview of the system in all its parts
2GetThere Marketing ambition is to "stimulate towards ridesharing, instead of penalizing for not king so
Awareness
Reward
company design direction
Crediting System
design framework
Consideration
Stimulate Guide design solution
company problem
Increasing willingness to share a vehicle
Selection
approach
Actor
Force
Inform about benefits of shared service reward for choosing shared service affiliate customers with personalized solutions
Penalize Pay Ultra Heathrow position
QR Code inside vehicle
Mobile App and Points at station
Website with personal and social stats
Friday, November 4, 11
QR Codes generated on vehicle interface, to be scanned by passengers, or collected as ticket
App for scanning QR Codes and accessing mobile portal and static points in the station to register codes Personal stats and achievements, ranking and prizes earned
GRAFFLE IT
b)
Inside Vehicle screen with QR code
Welcome Screen / Code Presentation
Inside vehicle
1
Check-In Passengers - Social Info
Inside vehicle with Internet access
2
B-Shared
Time Station
Claim/Explanation
B-Shared
Time Station
Claim/Explanation
Ride .... Y Z Digit Code
Vehicle Progress
Journey Recap
Fellow travellers
Claim / Explain why W Go Button Destination
Keep it as it is now !
XName 1
Name 2
Name 4
Name + Ranking (based on other voting) Linear, don't overcomplicate Show POI Time of arrival
Friday, November 4, 11
Name 3
GRAFFLE IT
b)
Overview of part of the mobile app
Crediting system Code scan & Info Capture PRT Code - Link to Social
Inside Vehicle with Mobile
Social interaction
On Mobile and Internet
Platform instead of BERTH ! 1
2
5
4
3
Carrier Carrier
12:00 PM
Carrier
Masdar PRT Service http://www.masdarprt.com
12:00 PM
Carrier
Masdar PRT Service Google
http://www.masdarprt.com
http://www.masdarprt.com
Carrier
12:00 PM
12:00 PM
http://www.masdarprt.com
http://www.masdarprt.com
B-Shared
B-Shared
Claim B
User Credit / Reward
Booked Ride
Personal Info
Passengers
Camera Activation
Fellow Traveller 1
Activity Overview
Fellow Traveller 2
Handbag
Fellow Traveller 3 Scan Action explanation
Reward for having shared now show total credits (size -50%)
B-Shared
A
Ride ....
B-Shared B-Shared
12:00 PM Masdar PRT Service
Masdar PRT Service
Masdar PRT Service
Trigger Action explanation
Trigger Action explanation
Prize
D
Achievements
D
H G G
F
Carrier
F
12:00 PM
Carrier
Masdar PRT Service http://www.masdarprt.com
Carrier
Masdar PRT Service
Carrier
Masdar PRT Service
12:00 PM Masdar PRT Service
http://
http://www.masdarprt.com
B-Shared - Handbag Your Items
Friends
Origin Age
12:00 PM
www.masdarprt.com
B-Shared - Friends
Contact Name
ride fast, ride together share is care share and there
12:00 PM
http://www.masdarprt.com
B-Shared
just snap pic, no focus, no colors etcetc
H
Friends
Action explanation
B-Shared - Activity Overview
Size S
Friend 1 Friend 2
f
M
Journey History
M
Item 1
NItem 2
Item 3
N
O
Friend 3 Carrier
f
http://www.masdarprt.com
Friend 1 Friend 2
12:00 PM
www.masdarprt.com
Size L
Ranking Google
http://
Size M
Carrier
Masdar PRT Service
Need more space ? Google
B-Shared - Friends Friends
play with sharing, moving, fast, social
Carrier
Masdar PRT Service
Connect with others
History
12:00 PM
Masdar PRT Service
www.masdarprt.com
B-Shared - Handbag Size S
Description Item 2 Blabla
Item 1
B-Shared 25 May 2011 - Activity f 10 Shared rides
Your Items
M
12:00 PM
O http://
Size XL
Item 2
Item 3
April
May
June
1 points
1 points
5 points
1 shared rides
1 shared rides
5 shared rides
Friend 3
other people on s.n. using Masdar PRT
Friday, November 4, 11
Overall Ranking Jim
Connect with others
f
Need more space ? Size M
Size L
Size XL
Maxime
You
John
250th
120th
99th
1st
0 points
10 points
20 points
100 points
0 shared rides
5 shared rides
8 shared rides
20 shared rides
GRAFFLE IT
b)
Detail
stead of BERTH ! 5 Carrier
12:00 PM Masdar PRT Service
http://www.masdarprt.com
B-Shared
Reward for having shared now show total credits (size -50%)
User Credit / Reward Personal Info
Activity Overview Handbag Achievements
H G G
F
H
Friends
F
12:00 PM
Carrier
Masdar PRT Service
masdarprt.com
12:00 PM
Carrier
Masdar PRT Service http://www.masdarprt.com
Shared
www.masdarprt.com
12:00 PM Masdar PRT Service
http://www.masdarprt.com
B-Shared - Handbag
B-Shared - Friends
Origin Age
Carrier
http://
Your Items
Friends
Contact Name
12:00 PM Masdar PRT Service
B-Shared - Activity Overview
Size S
Friend 1 Friend 2
f
M
istory
M
Item 1
NItem 2
Item 3
N
O
Friend 3 Carrier
f
12:00 PM
Carrier
Masdar PRT Service
Connect with others
http://www.masdarprt.com
www.masdarprt.com
B-Shared - Friends Friends
12:00 PM
Size L
Ranking Google
http://
Size M
Carrier
Masdar PRT Service
Need more space ?
www.masdarp
http://
Size XL
B-Shared - Handbag
B-Sha 25 M
10 S
Your Items
Size S
Description Item 2
Friend 1
O
Blabla April
Friend 2
M
Item 1
1 points
Item 2
Item 3
1 shared rides
Friend 3
other people on s.n. using Masdar PRT
Friday, November 4, 11
Overall Ranking Jim
Connect with others
f
Need more space ? Size M
Size L
Size XL
Maxime
250th
120th
0 points
10 points
0 shared rides
5 shared rides
GRAFFLE IT
b)
Web portal and Station Access Point
Social Network Personal Data to stimulate sharing Static Code Registration - Personal balance
At the Station
Social Features
On-line Browser
V
Masdar PRT http://www.Masdarprt.com
B-Shared
Header 1 - Logo
Masdar PRT http://www.Masdarprt.com
Log in
B-Shared
Olly
PRT Station 1
Header 1 - User
Ride .... Claim Type your code here text input
U Google
Header 2 - Menu' Item
Description Item
Olly
Menu'
Menu'
Item 1
Activity Overview
Item 2 - Active
Handbag
Item 3 Item 4
Achievements Friends
Handbag
This is where you keep all your prizes
Size S
Item number one
Item number two
Item number three
This item let you a a bbaba
This item let you a a bbaba
This item let you a a bbaba
Need it bigger ? Buy
Friday, November 4, 11
Buy a M, L or XL bag for your items
GRAFFLE IT
b)
Detail of initial wireframe of web portal Masdar PRT
prt.com
U http://www.Masdarprt.com Log in
Menu' Item
Masdar PRT
Description Item
B-Shared Olly
Olly
Handbag
This is where you keep all your prizes
Menu'
Size S
Activity Overview
Handbag Achievements Friends
Item number one
Item number two
Item number three
This item let you a a bbaba
This item let you a a bbaba
This item let you a a bbaba
Need it bigger ? Buy
Scrollable Handbag where to collect prizes (3 Max for S Size) Friday, November 4, 11
Buy a M, L or XL bag for your items
Buy bigger Handbag to fit more items
TEST IT
c)
One of the initial sessions
Present features with sketches Get insights/impressions of use
Implement Repeat more accurate
Friday, November 4, 11
TEST IT
c)
Overview Participants/Stages
may
green light meet
half may
june
interface
mobile shared mobile full
participants
PRT
tests concept
Friday, November 4, 11
RIDE TOGETHER LIKE... FIRST QRCODE ATTEMPTS
P-SHARED CONTACT DETAIL PAYMENT
B-SHARED
TEST IT
c)
Testing out part of the overall interaction through Service Roleplay
2 groups with different assignments 1 overall rehearsal of touchpoints final open discussion
Friday, November 4, 11
DELIVER IT
d)
Part of the final delivery to the company
Friday, November 4, 11
Already have an account?
Sign In
Join B-Shared !
B-Shared,
riding fast, riding together
Video Teaser
Share a PRT, you’ll be faster and you can win..
Find your B-Shared Destination Follow the colors, go to your PRT, share it with others.
Friday, November 4, 11
Collect the codes Snap the codes inside the PRT together with your fellow travellers.
Get your Points! The more fellow, the more points! Rise the ranking, be the best, win cool prizes.
K13 Sign Up Now Friday, November 4, 11
or Find out more
3:30PM
Riding fast, Riding together
Mist PRT
Hi Travellers,
QR Code
here is your
Code Scan it with your mobile, or type it in online.
The more you are in this PRT, the more you earn !
Friday, November 4, 11
Time/Station
Scan mobile Number: DX78br
Let’s go to
K13
Code Digit Type in online
Go Button
TheOlly
TheOlly
Achievements
This is where you keep keep track of your progress
Daily stats
Activity Overview Handbag
Achievements Friends
Ranking
Friday, November 4, 11
April
May
June
1 points
1 points
5 points
1 shared rides
1 shared rides
5 shared rides
worst, best, you
TheOlly
TheOlly
Handbag
This is where you keep all your prizes and use them
Handbag S - 3 items
Activity Overview
Handbag Achievements
K13
Friends
1 free mug
Free Parking ticket
Direct Private Ride
Go to Starbucks, show your code and enjoy a mug of coffee as a reward for sharing your PRT
Park your car for free and enjoy the full experience of the PRT
In a rush, or “not in the mood� ? Get a free ride with the exclusive B-Gold PRT service.
Buy More M, L, XL
Need a Medium, Large or Extra Large Bag for all your prizes? Buy it bigger !
Friday, November 4, 11
MOBILE
Log In
1
SHARED
PLATFORM
Overview of functions
MIST
University
Your Account :
Fellow Travellers :
Riding
toge ther
You
Fit the code here . . .
No one yet
or type it in
Welcome Friday, November 4, 11
Activity Overview
Stefano
No one yet
Scan my Code
1 credit for you, Rene’ !
Got it !
Got it !
Activate camera
Snap
Get your Prize
Fellows
Handbag Achievements Friends
Account
MOBILE Main Screen
click
Log In
TAILORED
on you
Join a shared PRT and leave immediately !
Otherwise get one for yourself, you’ll just have to wait a bit more.
Tell us where to go !
Friday, November 4, 11
MOBILE Log In / Registration
Log In
TAILORED
on you
Join a shared PRT and leave immediately !
Otherwise get one for yourself, you’ll just have to wait a bit more.
Tell us where to go !
Friday, November 4, 11
MOBILE Main Screen
Log In
TAILORED
on you
Join a shared PRT and leave immediately !
Otherwise get one for yourself, you’ll just have to wait a bit more.
click
Tell us where to go !
Friday, November 4, 11
MOBILE Destination Selection
B-Going from Sunda You can earn 1 credit if you join a ride !
Where do you want to go ? A
Agabi Agib Beir Bidis Calim Ceirt Dapur
Friday, November 4, 11
click
A B C D E F G H I J K L M N O P Q R S T U V W
MOBILE Possibilities
From Sunda to Agib
PLATFORM
PLATFORM
PLATFORM
You can earn 1 credit if you join a ride !
5 5 5
DEPART IN
OFFER
DEPART IN
OFFER
- 5:00
SILENCE
DEPART IN
OFFER
- 8:35
MUSIC
k - 1:35clicSIGHTSEE
Book another Ride
Friday, November 4, 11
MOBILE Journey Details
PLATFORM
From Sundra to Agib
5
DEPART IN
- 1:35 Stefano Lives: Abu Dhabi Offer: Sightseeing 20 Voted
Maxime Lives: Masdar Offer: Silence 5 Voted
Join ! You earn 1 credit each
Friday, November 4, 11
MOBILE Possibilities
From Sunda to Agib
PLATFORM
PLATFORM
PLATFORM
You can earn 1 credit if you join a ride !
5 5 5
DEPART IN
OFFER
- 1:35
SIGHTSEE
DEPART IN
OFFER
- 5:00
SILENCE
DEPART IN
OFFER
- 8:35
MUSIC
Book another Ride click
Friday, November 4, 11
MOBILE Journey reservation
PLATFORM
From Sundra to Agib
5
in
4 5 6
58 59
Minutes
00
What do you want to offer? Share an experience with others
Chat
Let’s talk !
Relax
Silence is art
Sightsee
I know it !
Share it with others !
Friday, November 4, 11
MOBILE Overview of functions
B-Gold from Sunda
PLATFORM
K13
University
Car Park
PLUM
Cinema
TAMB
Plaza
PLATFORM
Shared or private PRT
indeed
P-GOLD B
You can have a private ride, on demand, whenever you want.
A
Agib Beir Bidis Calim
Book a ride NOW !
Ceirt Dapur
Station Offer
Motivate
Shared/Going/Gold
Make it exclusive
Friday, November 4, 11
Where do you want to go ? Agabi
OTHER
Private Direct PRT PLATFORM
AWESOME
We have several solutions for your private, on-demand journey.
A B C D E F G H I J K L M N O P Q R S T U V W
6 6 6
DEPART IN
less than a minute
6
DEPART IN
- 3:00
You can pay by: PRT Credit
DEPART IN
- 3:00 DEPART IN
- 5:00
Transparency Differentiate Inform on costs
PLATFORM
MIST
How fast you want to go ?
A ride will cost you only 20 credits
PLATFORM
PLATFORM
PLATFORM
PLATFORM
Shared Direct PRT
1 2 3 4 5 6
From Sundra to Agib
From Sunda to Agib
PLATFORM
Log In
PLATFORM
Sundra Station
Tailored solutions
Credit Credit Paypal Account
Connect Multiple payments
MOBILE Main Screen
Sundra Station
PLATFORM
PLATFORM
PLATFORM
PLATFORM
Shared Direct PRT
1 2 3 4 5 6
MIST K13
University
Car Park
PLUM
Cinema
TAMB
Plaza
B
PLATFORM
Shared or private PRT
OTHER
PLATFORM
Private Direct PRT
Friday, November 4, 11
P-GOLD
click
MOBILE Private service
Log In
AWESOME
indeed
You can have a private ride, on demand, whenever you want. B
click
Book a ride NOW !
Friday, November 4, 11
MOBILE Destination selection
B-Gold from Sunda A ride will cost you only 20 credits
Where do you want to go ? A
Agabi Agib
click
Beir Bidis Calim Ceirt Dapur
Friday, November 4, 11
A B C D E F G H I J K L M N O P Q R S T U V W
MOBILE Possibilities
From Sunda to Agib
How fast you want to go ?
PLATFORM
PLATFORM
PLATFORM
We have several solutions for your private, on-demand journey.
Friday, November 4, 11
6 6 6
DEPART IN
less than a minute
DEPART IN
- 3:00 DEPART IN
- 5:00
click
MOBILE Payment options
PLATFORM
From Sundra to Agib
6
DEPART IN
- 3:00
You can pay by: PRT Credit Credit Credit Paypal Account
Friday, November 4, 11
THANKS Friday, November 4, 11