0
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...
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

...
The Plan

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

UX
Research

MOBILE FIRST

Mobile Apps
Web &...
UX Research : Field Study
2 hour in home interviews with 12 carefully screened business travelers
Research techniques incl...
UX Research : Concept Validation
Once we captured their “travel stories” , we zeroed in on the car rental experience and u...
UX Research : Early Findings
Some of the pain points we expected weren’t applicable for business travelers
But there were ...
Personas
Week
2

From the research, we identified the primary personas

Evelyn
Expert Traveler

MOBILE FIRST

Gary
Gregari...
Personas
Week
2

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

1

2

Evelyn
Expert T...
CX Maps
It was immediately apparent we had to design a cross channel experience and not assume that
travelers would engage...
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 possib...
Mapping the Customer Experience
Reserve

Pre-Trip

Pick Up

Drive

Return

Post Trip

Week
3-4

We needed to map the
exper...
Design Principles
Once we prioritized the personas and mapped the new workflow models, we identified a set design
principl...
Methodology : Mobile First Design
Executive team was already thinking Mobile First (Strategy)
Some of the key differentiato...
The Many Faces of Mobile First
Strategy

DESIGN

MOBILE FIRST

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobil...
The Many Faces of Mobile First
Strategy

Design

DESIGN

MOBILE FIRST

http://bradfrostweb.com/blog/mobile/the-many-faces-...
The Many Faces of Mobile First
Strategy

Design

Development

MOBILE FIRST

DESIGN

http://bradfrostweb.com/blog/mobile/th...
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
...
Mobile First : UX Design
By prioritizing of the mobile experience (and mobile user expectations) we honed in on just the
e...
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 Keynot...
Prototyping Set Back
We’d previously had great success prototyping iPad apps with Keynote

Week
of Hell

But you can’t run...
User Testing
Our iOS test participants were comfortable with the lo-fi prototypes and we were able to test the
flows as we...
Change in Plans
We originally planned to design the native iPhone and Android in parallel, but bumped Android out
a bit so...
Android Wireframe, Prototype, & Testing
Week
8

We designed for JellyBean which wasn’t
released yet. Our participants were...
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...
Visual Design : Applied Style
We created high fidelity designs for each OS, then started creating the production assets fo...
Production Design
This could have been a project management nightmare > 1000 files
Try our tracker to help you get from co...
The Plan (Revised)
At the beginning of October, we checked our progress against the project plan
Week
iPhone
Android
Web

...
Reaping the Benefits of Mobile First
Week
12

When it came time to design the
transactional part of the web site, it was
r...
Benefits x 2
Week
13

Designing for the kiosk was also a snap since
we could leverage the flows from mobile.
We altered th...
The Next Round of User Testing
While testing the web and kiosk
prototypes, we also invited people to try
out the car.
The ...
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
alread...
Success with the Native Apps
We needed to submit the iPhone app a full 30 days before we anticipated taking the first rese...
Site Launches On Time
The website also launched 30 days before the Grand Opening, and reservations slowly started coming i...
One More Surprise...
One of the cool features of Silvercar is the simple return process, we automatically read the fuel ga...
Silvercar Opens at DFW
Silvercar launched at DFW
airport on January 14, 2013
Got a great write up in
TechCrunch despite a ...
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 c...
Thank you!
Follow me on Twitter @theresaneil
See more of my talks on Slideshare
Read my blog at www.theresaneil.com
Look f...
Upcoming SlideShare
Loading in...5
×

Mobile First Case Study: Silvercar

13,098

Published on

BigD Design Conference: 2013
Take an in-depth look at the mobile first approach used to design Silvercar, a new rental car company that caters to business travelers. From conceptual research through launching 200 Audi A4s at Dallas-Fort Worth Airport in just six months, you'll learn how designing "mobile first" can drive a successful project forward--fast!

Published in: Design, Technology, Business
3 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,098
On Slideshare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
138
Comments
3
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile First Case Study: Silvercar"

  1. 1. MOBILE FIRST The Key to Better Car Rental Experience
  2. 2. Hello, My Name Is: MOBILE FIRST 2
  3. 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. 4. Silvercar arrival in suite Create an easy booking experience, web, mobile or kiosk MOBILE FIRST 4
  5. 5. silvercar booking Skip the lines, skip the people, skip the paperwork MOBILE FIRST 5
  6. 6. Silvercar pick up MOBILE FIRST Walk out to a lot full of silver Audi A4s 6
  7. 7. Scan the code to unlock any car MOBILE FIRST 7
  8. 8. silvercar drive Sync your phone MOBILE FIRST 8
  9. 9. silvercar drive Enjoy the drive MOBILE FIRST 9
  10. 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. 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. 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. 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. 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. 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. 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. 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. 18. CX Maps Before we were engaged, the Silvercar team had already drafted a CX Map: MOBILE FIRST Week 3-4 16
  19. 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. 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. 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. 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. 23. The Many Faces of Mobile First Strategy DESIGN MOBILE FIRST http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/ 20
  24. 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. 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. 26. Mobile First Design = Only RWD It works well for RWD and native app projects MOBILE FIRST 21
  27. 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. 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. 29. Mobile First : UI Design for iOS Then we knocked out the iPhone wireframes in Keynote. MOBILE FIRST Week 6 24
  30. 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. 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. 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. 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. 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. 35. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  36. 36. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  37. 37. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  38. 38. In The Meantime... MOBILE FIRST http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space 29
  39. 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. 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. 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. 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. 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. 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. 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
  46. 46. MOBILE FIRST 37
  47. 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. 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. 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. 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. 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. 52. Silvercar Today Ten months later, Silvercar is now in seven locations across Texas and California MOBILE FIRST 43
  53. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×