• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile First Case Study: Silvercar
 

Mobile First Case Study: Silvercar

on

  • 6,564 views

BigD Design Conference: 2013 ...

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!

Statistics

Views

Total Views
6,564
Views on SlideShare
2,533
Embed Views
4,031

Actions

Likes
19
Downloads
82
Comments
2

16 Embeds 4,031

http://theresaneil.wordpress.com 3864
http://cloud.feedly.com 60
https://twitter.com 56
http://digg.com 16
https://theresaneil.wordpress.com 14
http://feedly.com 4
http://newsblur.com 3
http://www.linkedin.com 3
http://rss.canguoliu.com 2
https://www.google.co.jp 2
http://translate.googleusercontent.com 2
https://www.google.com 1
http://www.newsblur.com 1
http://f173840e.theseforums.com 1
http://reader.aol.com 1
http://en.wordpress.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile First Case Study: Silvercar Mobile First Case Study: Silvercar Presentation Transcript

    • 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