Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile First Case Study: Silvercar


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

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 20
  24. 24. The Many Faces of Mobile First Strategy Design DESIGN MOBILE FIRST 20
  25. 25. The Many Faces of Mobile First Strategy Design Development MOBILE FIRST DESIGN 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 29
  36. 36. In The Meantime... MOBILE FIRST 29
  37. 37. In The Meantime... MOBILE FIRST 29
  38. 38. In The Meantime... MOBILE FIRST 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 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 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 Look for the next edition of the Mobile Design Pattern Gallery from O’Reilly Media in January 2014! MOBILE FIRST 45