SlideShare a Scribd company logo
1 of 54
Download to read offline
MOBILE FIRST
The Key to Better Car Rental Experience
Hello, My Name Is:

MOBILE FIRST

2
Mobile First Case Study : Silvercar

Silvercar engaged my team to
design their digital experience

MOBILE FIRST

Objective
Reimagine Car Rental for Business Travelers

3
Silvercar arrival in suite

Create an easy booking experience, web, mobile or kiosk
MOBILE FIRST

4
silvercar booking

Skip the lines, skip the people, skip the paperwork
MOBILE FIRST

5
Silvercar pick up

MOBILE FIRST

Walk out to a lot full of silver Audi A4s

6
Scan the code to unlock any car
MOBILE FIRST

7
silvercar drive

Sync your phone
MOBILE FIRST

8
silvercar drive

Enjoy the drive
MOBILE FIRST

9
The Plan

Like most start-ups, their timeline
was aggressive, possibly crazy

AUG
2012

MOBILE FIRST

SEP
2012

OCT
2012

Timeline
Six months until opening at the DFW airport

NOV
2012

DEC
2012

JAN
2013

10
The Plan

Like most start-ups, their timeline
was aggressive, possibly crazy

UX
Research

MOBILE FIRST

Mobile Apps
Web & Kiosk

Timeline
Six months until opening at the DFW airport

Mobile
Launch

Web Launch

Silvercar
Grand
Opening

10
UX Research : Field Study
2 hour in home interviews with 12 carefully screened business travelers
Research techniques included story mapping and show & tell

MOBILE FIRST

Week
1

11
UX Research : Concept Validation
Once we captured their “travel stories” , we zeroed in on the car rental experience and used a set of
story boards to communicate the Silvercar vision

MOBILE FIRST

Week
1

12
UX Research : Early Findings
Some of the pain points we expected weren’t applicable for business travelers
But there were other pain points we could roll into our UX Strategy

Gold Club Board- Good!

MOBILE FIRST

Board failure- Bad!

Week
1

Shuttle- Very Bad!!

13
Personas
Week
2

From the research, we identified the primary personas

Evelyn
Expert Traveler

MOBILE FIRST

Gary
Gregarious Traveler

Victor
Vacation Traveler

Brandon
Basic Traveler

14
Personas
Week
2

From the research, we identified the primary personas ...and then prioritized them

1

2

Evelyn
Expert Traveler

Gary
Gregarious Traveler

MOBILE FIRST

4

Victor
Vacation Traveler

3

Brandon
Basic Traveler

14
CX Maps
It was immediately apparent we had to design a cross channel experience and not assume that
travelers would engage with just a single channel

MOBILE FIRST

Week
3-4

15
CX Maps
Before we were engaged, the Silvercar team had already drafted a CX Map:

MOBILE FIRST

Week
3-4

16
CX Maps
Before we were engaged, the Silvercar team had already drafted a CX Map:

Week
3-4

But it outlined all the possible steps,
instead of looking at discreet flows across channels
MOBILE FIRST

16
Mapping the Customer Experience
Reserve

Pre-Trip

Pick Up

Drive

Return

Post Trip

Week
3-4

We needed to map the
experience for each persona
across channels to ensure the
transitions would be seamless

MOBILE FIRST

17
Design Principles
Once we prioritized the personas and mapped the new workflow models, we identified a set design
principles to guide our next phase of design:

Provide a sense of control

MOBILE FIRST

Align with existing habits

Participate in orchestration

18
Methodology : Mobile First Design
Executive team was already thinking Mobile First (Strategy)
Some of the key differentiators for reimagining car rental were dependent on mobile capabilities

Technical team was already doing Mobile First (Development)
The native apps had to be submitted to the app stores well before the web site needed to launch, so
their architecture and services were driven by the native app requirements

Mobile was the critical channel
Although customers will transition between various channels during their Silvercar experience,
mobile is the critical channel for a smooth pick-up experience

This was brand new product
We could start small and scale up, instead of adapting an existing web site

MOBILE FIRST

19
The Many Faces of Mobile First
Strategy

DESIGN

MOBILE FIRST

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

20
The Many Faces of Mobile First
Strategy

Design

DESIGN

MOBILE FIRST

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

20
The Many Faces of Mobile First
Strategy

Design

Development

MOBILE FIRST

DESIGN

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

20
Mobile First Design = Only RWD
It works well for RWD
and native app projects

MOBILE FIRST

21
The Project Plan
We hoped taking mobile first approach would help us meet our tight deadlines
Week

5

6

7

8

9

10

11

12

13

14

iPhone

lo-fi prototype

test

hi-fi comps

production assets

lo-fi prototype

test

hi-fi comps

production assets

16

17

18+

dev support...

Android

15

dev support...

Web

Kiosk

MOBILE FIRST

lo-fi prototype
lo-fi
prototype

test

hi-fi comps

assets

dev support...

test

hi-fi comps

production assets

dev support...

22
Mobile First : UX Design
By prioritizing of the mobile experience (and mobile user expectations) we honed in on just the
essential steps required for reserving, picking up and returning the car. We skipped detailed
documents in favor of whiteboards and photos.

MOBILE FIRST

Week
5

23
Mobile First : UI Design for iOS
Then we knocked out the iPhone wireframes in Keynote.

MOBILE FIRST

Week
6

24
Mobile First : UI Design for iOS
Then we knocked out the iPhone wireframes in Keynote.
Why in the world did we pick Keynote for designing and prototyping?

MOBILE FIRST

Week
6

24
Prototyping Set Back
We’d previously had great success prototyping iPad apps with Keynote

Week
of Hell

But you can’t run Keynote in portrait mode on an iPhone, so we were up all night converting the
prototypes to InVision
MOBILE FIRST

25
User Testing
Our iOS test participants were comfortable with the lo-fi prototypes and we were able to test the
flows as well as the custom controls we were considering

MOBILE FIRST

Week
7

26
Change in Plans
We originally planned to design the native iPhone and Android in parallel, but bumped Android out
a bit so we could leverage our iPhone test results.

Week
8

There was also some ramp up on how to design for the recently released JellyBean OS. The Android
developer at Silvercar, Daniel, was a great resource, and really helped the push experience to be
Android friendly.

MOBILE FIRST

27
Android Wireframe, Prototype, & Testing
Week
8

We designed for JellyBean which wasn’t
released yet. Our participants were used
to an older version of the Android OS.
Our test results indicated some usability
issues with the new Android actionbar.
We decided to follow the Android
design guidelines anyway, anticipating
users would adapt to the new actionbar
once they started using it on a daily
basis.

MOBILE FIRST

28
In The Meantime...

MOBILE FIRST

http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space

29
In The Meantime...

MOBILE FIRST

http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space

29
In The Meantime...

MOBILE FIRST

http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space

29
In The Meantime...

MOBILE FIRST

http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space

29
Visual Design : Style Tiles
Our creative director leveraged the Brand Guide and the Silvercar rental suite designs for the visuals

MOBILE FIRST

http://styletil.es/

Week
9

30
Visual Design : Applied Style
We created high fidelity designs for each OS, then started creating the production assets for all the form
factors and densities:

Android: mdpi, hdpi, xdpi

MOBILE FIRST

Week
10

iPhone: 4 retina, 4 non-retina, 5 retina

31
Production Design
This could have been a project management nightmare > 1000 files
Try our tracker to help you get from concept to development with minimal pain

MOBILE FIRST

http://bit.ly/16lCotu

Week
11+

32
The Plan (Revised)
At the beginning of October, we checked our progress against the project plan
Week
iPhone
Android
Web

Kiosk

5

6

7

lo-fi prototype

lo-fi prototype

8

9

10

11

test

hi-fi comps

production assets

dev support...

test

hi-fi comps

production assets

dev support...

lo-fi prototype
lo-fi
prototype

12

13

14

15

test

hi-fi comps

assets

test

hi-fi comps

production assets

16

17

18 +

dev support...

dev support....

We were two weeks behind for web, and one week behind on kiosk
MOBILE FIRST

33
Reaping the Benefits of Mobile First
Week
12

When it came time to design the
transactional part of the web site, it was
really straightforward.
All the requirements and flows had been
hammered out during the mobile design
phase!

MOBILE FIRST

34
Benefits x 2
Week
13

Designing for the kiosk was also a snap since
we could leverage the flows from mobile.
We altered the flow somewhat to support the:
- flow of a walk-in customer
- the capabilities of the mounted card reader
Our mantra was:
Make it is simple as Swipe, Swipe, Done

MOBILE FIRST

35
The Next Round of User Testing
While testing the web and kiosk
prototypes, we also invited people to try
out the car.
The Audi interface was a huge stumbling
block.
Top issues observed in testing:
• Participants couldn’t turn on car
• Couldn’t find where to put key
• Thought console was touchscreen
• Couldn’t navigate console
• GPS in console was hard to program

MOBILE FIRST

36
MOBILE FIRST

37
Back in the Trenches
We assumed it would be fast &
easy for the web devs to knock out
the RWD since the backend was
already in place for the native apps.
But the web developers needed
extra time to learn RWD
technologies and the QA team
needed extra time to test across the
target devices.

MOBILE FIRST

38
Success with the Native Apps
We needed to submit the iPhone app a full 30 days before we anticipated taking the first reservation, so
we submitted the app with just a subset of the functionality (reserve), then looped back w/the rest

Week
14-18

The app was approved and ready for the first bookings in December, 30 days before the Grand Opening

MOBILE FIRST

39
Site Launches On Time
The website also launched 30 days before the Grand Opening, and reservations slowly started coming in

MOBILE FIRST

Week
18

40
One More Surprise...
One of the cool features of Silvercar is the simple return process, we automatically read the fuel gauge and
send a receipt to the app with charges including tools and gas.

The cars had a 2nd gas tank with no sensor
MOBILE FIRST

41
Silvercar Opens at DFW
Silvercar launched at DFW
airport on January 14, 2013
Got a great write up in
TechCrunch despite a few
technical bugs

MOBILE FIRST

42
Silvercar Today
Ten months later, Silvercar is now in seven
locations across Texas and California

MOBILE FIRST

43
Try it Out
The first five people to download the app and
reserve a Silvercar will save 50% using this code
BIGD50
Or you can save 10% anytime with this code
BIGDBIGDEAL

MOBILE FIRST

44
Thank you!
Follow me on Twitter @theresaneil
See more of my talks on Slideshare
Read my blog at www.theresaneil.com
Look for the next edition of the
Mobile Design Pattern Gallery from
O’Reilly Media in January 2014!
MOBILE FIRST

45

More Related Content

Viewers also liked

The Mobile Content Mandate
The Mobile Content MandateThe Mobile Content Mandate
The Mobile Content MandateKaren McGrane
 
Flipit4u mobile app presentation
Flipit4u mobile app presentationFlipit4u mobile app presentation
Flipit4u mobile app presentationChristopher Picanzo
 
eHub mobile application presentation
eHub mobile application presentationeHub mobile application presentation
eHub mobile application presentationAntouan Anguelov
 
Marketing plan presentation for my mobile application - 'Timely Music'
Marketing plan presentation for my mobile application - 'Timely Music'Marketing plan presentation for my mobile application - 'Timely Music'
Marketing plan presentation for my mobile application - 'Timely Music'Debashish Sakunia
 
Crossover Alex Hung Presentation on Mobile apps for Rotary club of HK Harbour
Crossover Alex Hung Presentation on Mobile apps for Rotary club of HK HarbourCrossover Alex Hung Presentation on Mobile apps for Rotary club of HK Harbour
Crossover Alex Hung Presentation on Mobile apps for Rotary club of HK HarbourAlex Hung
 
Mobile app presentation
Mobile app presentationMobile app presentation
Mobile app presentationaparanaiitd
 
Mobile Apps Presentation - Everywhere
Mobile Apps Presentation - EverywhereMobile Apps Presentation - Everywhere
Mobile Apps Presentation - EverywhereMuhammad Firdaus
 
Restaurant mobile app presentation
Restaurant mobile app presentationRestaurant mobile app presentation
Restaurant mobile app presentationNPSAPPS
 
Mobile App presentation for the Gaslamp.org by UPG Mobile Marketing Group
Mobile App presentation for the Gaslamp.org by UPG Mobile Marketing GroupMobile App presentation for the Gaslamp.org by UPG Mobile Marketing Group
Mobile App presentation for the Gaslamp.org by UPG Mobile Marketing GroupUrphoneguy SD
 
Master’s project presentation
Master’s project presentationMaster’s project presentation
Master’s project presentationSneha Pantam
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris Morrell
 

Viewers also liked (11)

The Mobile Content Mandate
The Mobile Content MandateThe Mobile Content Mandate
The Mobile Content Mandate
 
Flipit4u mobile app presentation
Flipit4u mobile app presentationFlipit4u mobile app presentation
Flipit4u mobile app presentation
 
eHub mobile application presentation
eHub mobile application presentationeHub mobile application presentation
eHub mobile application presentation
 
Marketing plan presentation for my mobile application - 'Timely Music'
Marketing plan presentation for my mobile application - 'Timely Music'Marketing plan presentation for my mobile application - 'Timely Music'
Marketing plan presentation for my mobile application - 'Timely Music'
 
Crossover Alex Hung Presentation on Mobile apps for Rotary club of HK Harbour
Crossover Alex Hung Presentation on Mobile apps for Rotary club of HK HarbourCrossover Alex Hung Presentation on Mobile apps for Rotary club of HK Harbour
Crossover Alex Hung Presentation on Mobile apps for Rotary club of HK Harbour
 
Mobile app presentation
Mobile app presentationMobile app presentation
Mobile app presentation
 
Mobile Apps Presentation - Everywhere
Mobile Apps Presentation - EverywhereMobile Apps Presentation - Everywhere
Mobile Apps Presentation - Everywhere
 
Restaurant mobile app presentation
Restaurant mobile app presentationRestaurant mobile app presentation
Restaurant mobile app presentation
 
Mobile App presentation for the Gaslamp.org by UPG Mobile Marketing Group
Mobile App presentation for the Gaslamp.org by UPG Mobile Marketing GroupMobile App presentation for the Gaslamp.org by UPG Mobile Marketing Group
Mobile App presentation for the Gaslamp.org by UPG Mobile Marketing Group
 
Master’s project presentation
Master’s project presentationMaster’s project presentation
Master’s project presentation
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 

More from Theresa Neil

Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!Theresa Neil
 
The Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers CollectionThe Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers CollectionTheresa Neil
 
Navigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail SitesNavigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail SitesTheresa Neil
 
The Dangers of the Wrong Mobile Strategy
The Dangers of the Wrong Mobile StrategyThe Dangers of the Wrong Mobile Strategy
The Dangers of the Wrong Mobile StrategyTheresa Neil
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Theresa Neil
 
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.Theresa Neil
 
All The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design StrategiesAll The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design StrategiesTheresa Neil
 
Navigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and MoreNavigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and MoreTheresa Neil
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen LayoutsTheresa Neil
 
Designers vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAsDesigners vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAsTheresa Neil
 

More from Theresa Neil (11)

Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!
 
The Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers CollectionThe Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers Collection
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Navigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail SitesNavigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail Sites
 
The Dangers of the Wrong Mobile Strategy
The Dangers of the Wrong Mobile StrategyThe Dangers of the Wrong Mobile Strategy
The Dangers of the Wrong Mobile Strategy
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5
 
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.
 
All The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design StrategiesAll The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design Strategies
 
Navigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and MoreNavigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and More
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen Layouts
 
Designers vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAsDesigners vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAs
 

Recently uploaded

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Recently uploaded (20)

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Mobile First Case Study: Silvercar

  • 1. MOBILE FIRST The Key to Better Car Rental Experience
  • 2. Hello, My Name Is: MOBILE FIRST 2
  • 3. Mobile First Case Study : Silvercar Silvercar engaged my team to design their digital experience MOBILE FIRST Objective Reimagine Car Rental for Business Travelers 3
  • 4. Silvercar arrival in suite Create an easy booking experience, web, mobile or kiosk MOBILE FIRST 4
  • 5. silvercar booking Skip the lines, skip the people, skip the paperwork MOBILE FIRST 5
  • 6. Silvercar pick up MOBILE FIRST Walk out to a lot full of silver Audi A4s 6
  • 7. Scan the code to unlock any car MOBILE FIRST 7
  • 8. silvercar drive Sync your phone MOBILE FIRST 8
  • 9. silvercar drive Enjoy the drive MOBILE FIRST 9
  • 10. The Plan Like most start-ups, their timeline was aggressive, possibly crazy AUG 2012 MOBILE FIRST SEP 2012 OCT 2012 Timeline Six months until opening at the DFW airport NOV 2012 DEC 2012 JAN 2013 10
  • 11. The Plan Like most start-ups, their timeline was aggressive, possibly crazy UX Research MOBILE FIRST Mobile Apps Web & Kiosk Timeline Six months until opening at the DFW airport Mobile Launch Web Launch Silvercar Grand Opening 10
  • 12. UX Research : Field Study 2 hour in home interviews with 12 carefully screened business travelers Research techniques included story mapping and show & tell MOBILE FIRST Week 1 11
  • 13. UX Research : Concept Validation Once we captured their “travel stories” , we zeroed in on the car rental experience and used a set of story boards to communicate the Silvercar vision MOBILE FIRST Week 1 12
  • 14. UX Research : Early Findings Some of the pain points we expected weren’t applicable for business travelers But there were other pain points we could roll into our UX Strategy Gold Club Board- Good! MOBILE FIRST Board failure- Bad! Week 1 Shuttle- Very Bad!! 13
  • 15. Personas Week 2 From the research, we identified the primary personas Evelyn Expert Traveler MOBILE FIRST Gary Gregarious Traveler Victor Vacation Traveler Brandon Basic Traveler 14
  • 16. Personas Week 2 From the research, we identified the primary personas ...and then prioritized them 1 2 Evelyn Expert Traveler Gary Gregarious Traveler MOBILE FIRST 4 Victor Vacation Traveler 3 Brandon Basic Traveler 14
  • 17. CX Maps It was immediately apparent we had to design a cross channel experience and not assume that travelers would engage with just a single channel MOBILE FIRST Week 3-4 15
  • 18. CX Maps Before we were engaged, the Silvercar team had already drafted a CX Map: MOBILE FIRST Week 3-4 16
  • 19. CX Maps Before we were engaged, the Silvercar team had already drafted a CX Map: Week 3-4 But it outlined all the possible steps, instead of looking at discreet flows across channels MOBILE FIRST 16
  • 20. Mapping the Customer Experience Reserve Pre-Trip Pick Up Drive Return Post Trip Week 3-4 We needed to map the experience for each persona across channels to ensure the transitions would be seamless MOBILE FIRST 17
  • 21. Design Principles Once we prioritized the personas and mapped the new workflow models, we identified a set design principles to guide our next phase of design: Provide a sense of control MOBILE FIRST Align with existing habits Participate in orchestration 18
  • 22. Methodology : Mobile First Design Executive team was already thinking Mobile First (Strategy) Some of the key differentiators for reimagining car rental were dependent on mobile capabilities Technical team was already doing Mobile First (Development) The native apps had to be submitted to the app stores well before the web site needed to launch, so their architecture and services were driven by the native app requirements Mobile was the critical channel Although customers will transition between various channels during their Silvercar experience, mobile is the critical channel for a smooth pick-up experience This was brand new product We could start small and scale up, instead of adapting an existing web site MOBILE FIRST 19
  • 23. The Many Faces of Mobile First Strategy DESIGN MOBILE FIRST http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/ 20
  • 24. The Many Faces of Mobile First Strategy Design DESIGN MOBILE FIRST http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/ 20
  • 25. The Many Faces of Mobile First Strategy Design Development MOBILE FIRST DESIGN http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/ 20
  • 26. Mobile First Design = Only RWD It works well for RWD and native app projects MOBILE FIRST 21
  • 27. The Project Plan We hoped taking mobile first approach would help us meet our tight deadlines Week 5 6 7 8 9 10 11 12 13 14 iPhone lo-fi prototype test hi-fi comps production assets lo-fi prototype test hi-fi comps production assets 16 17 18+ dev support... Android 15 dev support... Web Kiosk MOBILE FIRST lo-fi prototype lo-fi prototype test hi-fi comps assets dev support... test hi-fi comps production assets dev support... 22
  • 28. Mobile First : UX Design By prioritizing of the mobile experience (and mobile user expectations) we honed in on just the essential steps required for reserving, picking up and returning the car. We skipped detailed documents in favor of whiteboards and photos. MOBILE FIRST Week 5 23
  • 29. Mobile First : UI Design for iOS Then we knocked out the iPhone wireframes in Keynote. MOBILE FIRST Week 6 24
  • 30. Mobile First : UI Design for iOS Then we knocked out the iPhone wireframes in Keynote. Why in the world did we pick Keynote for designing and prototyping? MOBILE FIRST Week 6 24
  • 31. Prototyping Set Back We’d previously had great success prototyping iPad apps with Keynote Week of Hell But you can’t run Keynote in portrait mode on an iPhone, so we were up all night converting the prototypes to InVision MOBILE FIRST 25
  • 32. User Testing Our iOS test participants were comfortable with the lo-fi prototypes and we were able to test the flows as well as the custom controls we were considering MOBILE FIRST Week 7 26
  • 33. Change in Plans We originally planned to design the native iPhone and Android in parallel, but bumped Android out a bit so we could leverage our iPhone test results. Week 8 There was also some ramp up on how to design for the recently released JellyBean OS. The Android developer at Silvercar, Daniel, was a great resource, and really helped the push experience to be Android friendly. MOBILE FIRST 27
  • 34. Android Wireframe, Prototype, & Testing Week 8 We designed for JellyBean which wasn’t released yet. Our participants were used to an older version of the Android OS. Our test results indicated some usability issues with the new Android actionbar. We decided to follow the Android design guidelines anyway, anticipating users would adapt to the new actionbar once they started using it on a daily basis. MOBILE FIRST 28
  • 35. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  • 36. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  • 37. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  • 38. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  • 39. Visual Design : Style Tiles Our creative director leveraged the Brand Guide and the Silvercar rental suite designs for the visuals MOBILE FIRST http://styletil.es/ Week 9 30
  • 40. Visual Design : Applied Style We created high fidelity designs for each OS, then started creating the production assets for all the form factors and densities: Android: mdpi, hdpi, xdpi MOBILE FIRST Week 10 iPhone: 4 retina, 4 non-retina, 5 retina 31
  • 41. Production Design This could have been a project management nightmare > 1000 files Try our tracker to help you get from concept to development with minimal pain MOBILE FIRST http://bit.ly/16lCotu Week 11+ 32
  • 42. The Plan (Revised) At the beginning of October, we checked our progress against the project plan Week iPhone Android Web Kiosk 5 6 7 lo-fi prototype lo-fi prototype 8 9 10 11 test hi-fi comps production assets dev support... test hi-fi comps production assets dev support... lo-fi prototype lo-fi prototype 12 13 14 15 test hi-fi comps assets test hi-fi comps production assets 16 17 18 + dev support... dev support.... We were two weeks behind for web, and one week behind on kiosk MOBILE FIRST 33
  • 43. Reaping the Benefits of Mobile First Week 12 When it came time to design the transactional part of the web site, it was really straightforward. All the requirements and flows had been hammered out during the mobile design phase! MOBILE FIRST 34
  • 44. Benefits x 2 Week 13 Designing for the kiosk was also a snap since we could leverage the flows from mobile. We altered the flow somewhat to support the: - flow of a walk-in customer - the capabilities of the mounted card reader Our mantra was: Make it is simple as Swipe, Swipe, Done MOBILE FIRST 35
  • 45. The Next Round of User Testing While testing the web and kiosk prototypes, we also invited people to try out the car. The Audi interface was a huge stumbling block. Top issues observed in testing: • Participants couldn’t turn on car • Couldn’t find where to put key • Thought console was touchscreen • Couldn’t navigate console • GPS in console was hard to program MOBILE FIRST 36
  • 47. Back in the Trenches We assumed it would be fast & easy for the web devs to knock out the RWD since the backend was already in place for the native apps. But the web developers needed extra time to learn RWD technologies and the QA team needed extra time to test across the target devices. MOBILE FIRST 38
  • 48. Success with the Native Apps We needed to submit the iPhone app a full 30 days before we anticipated taking the first reservation, so we submitted the app with just a subset of the functionality (reserve), then looped back w/the rest Week 14-18 The app was approved and ready for the first bookings in December, 30 days before the Grand Opening MOBILE FIRST 39
  • 49. Site Launches On Time The website also launched 30 days before the Grand Opening, and reservations slowly started coming in MOBILE FIRST Week 18 40
  • 50. One More Surprise... One of the cool features of Silvercar is the simple return process, we automatically read the fuel gauge and send a receipt to the app with charges including tools and gas. The cars had a 2nd gas tank with no sensor MOBILE FIRST 41
  • 51. Silvercar Opens at DFW Silvercar launched at DFW airport on January 14, 2013 Got a great write up in TechCrunch despite a few technical bugs MOBILE FIRST 42
  • 52. Silvercar Today Ten months later, Silvercar is now in seven locations across Texas and California MOBILE FIRST 43
  • 53. Try it Out The first five people to download the app and reserve a Silvercar will save 50% using this code BIGD50 Or you can save 10% anytime with this code BIGDBIGDEAL MOBILE FIRST 44
  • 54. Thank you! Follow me on Twitter @theresaneil See more of my talks on Slideshare Read my blog at www.theresaneil.com Look for the next edition of the Mobile Design Pattern Gallery from O’Reilly Media in January 2014! MOBILE FIRST 45