mobile first case study: silvercar

54
MOBILE FIRST The Key to Better Car Rental Experience

Upload: theresa-neil

Post on 17-Aug-2014

6.879 views

Category:

Design


1 download

DESCRIPTION

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!

TRANSCRIPT

Page 1: Mobile First Case Study: Silvercar

MOBILE FIRSTThe Key to Better Car Rental Experience

Page 2: Mobile First Case Study: Silvercar

MOBILE FIRST

Hello, My Name Is:

2

Page 3: Mobile First Case Study: Silvercar

MOBILE FIRST

Mobile First Case Study : Silvercar

3

Silvercar engaged my team to design their digital experience Reimagine Car Rental for Business Travelers

Objective

Page 4: Mobile First Case Study: Silvercar

MOBILE FIRST

Silvercar arrival in suite

4Create an easy booking experience, web, mobile or kiosk

Page 5: Mobile First Case Study: Silvercar

MOBILE FIRST

silvercar booking

5Skip the lines, skip the people, skip the paperwork

Page 6: Mobile First Case Study: Silvercar

MOBILE FIRST

Silvercar pick up

6Walk out to a lot full of silver Audi A4s

Page 7: Mobile First Case Study: Silvercar

MOBILE FIRST 7Scan the code to unlock any car

Page 8: Mobile First Case Study: Silvercar

MOBILE FIRST

silvercar drive

8Sync your phone

Page 9: Mobile First Case Study: Silvercar

MOBILE FIRST

silvercar drive

9Enjoy the drive

Page 10: Mobile First Case Study: Silvercar

MOBILE FIRST

The Plan

10

Like most start-ups, their timeline was aggressive, possibly crazy Six months until opening at the DFW airport

Timeline

AUG2012

SEP2012

OCT2012

NOV2012

DEC2012

JAN2013

Page 11: Mobile First Case Study: Silvercar

MOBILE FIRST

The Plan

10

Like most start-ups, their timeline was aggressive, possibly crazy Six months until opening at the DFW airport

Timeline

UX Research

Mobile Apps

Web & Kiosk

Mobile Launch Web Launch

Silvercar Grand

Opening

Page 12: Mobile First Case Study: Silvercar

MOBILE FIRST

UX Research : Field Study

11

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

Week 1

Page 13: Mobile First Case Study: Silvercar

MOBILE FIRST

UX Research : Concept Validation

12

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

Week 1

Page 14: Mobile First Case Study: Silvercar

MOBILE FIRST

UX Research : Early Findings

13

Some of the pain points we expected weren’t applicable for business travelersBut there were other pain points we could roll into our UX Strategy

Week 1

Gold Club Board- Good! Shuttle- Very Bad!!Board failure- Bad!

Page 15: Mobile First Case Study: Silvercar

MOBILE FIRST

Personas

14

From the research, we identi!ed the primary personas

EvelynExpert Traveler

GaryGregarious Traveler

Victor Vacation Traveler

BrandonBasic Traveler

Week2

Page 16: Mobile First Case Study: Silvercar

MOBILE FIRST

Personas

14

From the research, we identi!ed the primary personas

EvelynExpert Traveler

GaryGregarious Traveler

Victor Vacation Traveler

BrandonBasic Traveler

Week2

1 2 4 3

...and then prioritized them

Page 17: Mobile First Case Study: Silvercar

MOBILE FIRST

CX Maps

15

Week3-4It was immediately apparent we had to design a cross channel experience and not assume that

travelers would engage with just a single channel

Page 18: Mobile First Case Study: Silvercar

MOBILE FIRST

CX Maps

16

Before we were engaged, the Silvercar team had already drafted a CX Map: Week 3-4

Page 19: Mobile First Case Study: Silvercar

MOBILE FIRST

CX Maps

16

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 !ows across channels

Page 20: Mobile First Case Study: Silvercar

MOBILE FIRST

Mapping the Customer Experience

17

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

Reserve Pre-Trip Pick Up Drive Return Post Trip Week 3-4

Page 21: Mobile First Case Study: Silvercar

MOBILE FIRST

Design Principles

18

Once we prioritized the personas and mapped the new work"ow models, we identi!ed a set design principles to guide our next phase of design:

Provide a sense of control Align with existing habits Participate in orchestration

Page 22: Mobile First Case Study: Silvercar

MOBILE FIRST

Methodology : Mobile First Design

19

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 channelAlthough 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 productWe could start small and scale up, instead of adapting an existing web site

Page 23: Mobile First Case Study: Silvercar

MOBILE FIRST

The Many Faces of Mobile First

20http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-!rst/

DESIGN

Strategy

Page 24: Mobile First Case Study: Silvercar

MOBILE FIRST

The Many Faces of Mobile First

20http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-!rst/

DESIGN

Strategy

Design

Page 25: Mobile First Case Study: Silvercar

MOBILE FIRST

The Many Faces of Mobile First

20http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-!rst/

DESIGN

Strategy

Design

Development

Page 26: Mobile First Case Study: Silvercar

MOBILE FIRST

Mobile First Design = Only RWD

21

It works well for RWD and native app projects

Page 27: Mobile First Case Study: Silvercar

MOBILE FIRST

The Project Plan

22

We hoped taking mobile !rst approach would help us meet our tight deadlines

Week 5 6 7 8 9 10 11 12 13 14 15 16 17 18+

iPhone

Android

Web

Kiosk

lo-" prototype test hi-" comps production assets

lo-" prototype test hi-" comps production assets

lo-" prototype test hi-" comps assets

lo-" prototype test hi-" comps production assets dev support...

dev support...

dev support...

dev support...

Page 28: Mobile First Case Study: Silvercar

MOBILE FIRST

Mobile First : UX Design

23

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.

Week 5

Page 29: Mobile First Case Study: Silvercar

MOBILE FIRST

Mobile First : UI Design for iOS

24

Then we knocked out the iPhone wireframes in Keynote. Week 6

Page 30: Mobile First Case Study: Silvercar

MOBILE FIRST

Mobile First : UI Design for iOS

24

Then we knocked out the iPhone wireframes in Keynote. Week 6

Why in the world did we pick Keynote for designing and prototyping?

Page 31: Mobile First Case Study: Silvercar

MOBILE FIRST

Prototyping Set Back

25

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

Page 32: Mobile First Case Study: Silvercar

MOBILE FIRST

User Testing

26

Our iOS test participants were comfortable with the lo-! prototypes and we were able to test the "ows as well as the custom controls we were considering

Week 7

Page 33: Mobile First Case Study: Silvercar

MOBILE FIRST

Change in Plans

27

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.

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.

Week 8

Page 34: Mobile First Case Study: Silvercar

MOBILE FIRST

Android Wireframe, Prototype, & Testing

28

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.

Page 35: Mobile First Case Study: Silvercar

MOBILE FIRST

In The Meantime...

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

Page 36: Mobile First Case Study: Silvercar

MOBILE FIRST

In The Meantime...

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

Page 37: Mobile First Case Study: Silvercar

MOBILE FIRST

In The Meantime...

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

Page 38: Mobile First Case Study: Silvercar

MOBILE FIRST

In The Meantime...

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

Page 39: Mobile First Case Study: Silvercar

MOBILE FIRST

Visual Design : Style Tiles

30

Our creative director leveraged the Brand Guide and the Silvercar rental suite designs for the visuals Week9

http://styletil.es/

Page 40: Mobile First Case Study: Silvercar

MOBILE FIRST

Visual Design : Applied Style

31

We created high !delity designs for each OS, then started creating the production assets for all the form factors and densities:

Week 10

Android: mdpi, hdpi, xdpi iPhone: 4 retina, 4 non-retina, 5 retina

Page 41: Mobile First Case Study: Silvercar

MOBILE FIRST

Production Design

32

Week 11+

This could have been a project management nightmare > 1000 !lesTry our tracker to help you get from concept to development with minimal pain

http://bit.ly/16lCotu

Page 42: Mobile First Case Study: Silvercar

MOBILE FIRST

The Plan (Revised)

33

At the beginning of October, we checked our progress against the project plan

Week 5 6 7 8 9 10 11 12 13 14 15 16 17 18 +

iPhone

Android

Web

Kiosk

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

lo-" prototype test hi-" comps production assets

lo-" prototype test hi-" comps production assets

lo-" prototype test hi-" comps assets

lo-" prototype test hi-" comps production assets dev support....

dev support...

dev support...

dev support...

Page 43: Mobile First Case Study: Silvercar

MOBILE FIRST

Reaping the Bene!ts of Mobile First

34

When it came time to design the transactional part of the web site, it was really straightforward.

All the requirements and "ows had been hammered out during the mobile design phase!

Week12

Page 44: Mobile First Case Study: Silvercar

MOBILE FIRST

Bene!ts x 2

35

Week 13

Designing for the kiosk was also a snap since we could leverage the "ows from mobile.

We altered the "ow somewhat to support the: - "ow of a walk-in customer - the capabilities of the mounted card reader

Our mantra was: Make it is simple as Swipe, Swipe, Done

Page 45: Mobile First Case Study: Silvercar

MOBILE FIRST

The Next Round of User Testing

36

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 !nd where to put key• Thought console was touchscreen• Couldn’t navigate console• GPS in console was hard to program

Page 46: Mobile First Case Study: Silvercar

MOBILE FIRST 37

Page 47: Mobile First Case Study: Silvercar

MOBILE FIRST

Back in the Trenches

38

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.

Page 48: Mobile First Case Study: Silvercar

MOBILE FIRST

Success with the Native Apps

39

We needed to submit the iPhone app a full 30 days before we anticipated taking the !rst 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 !rst bookings in December, 30 days before the Grand Opening

Page 49: Mobile First Case Study: Silvercar

MOBILE FIRST

Site Launches On Time

40

The website also launched 30 days before the Grand Opening, and reservations slowly started coming in Week 18

Page 50: Mobile First Case Study: Silvercar

MOBILE FIRST

One More Surprise...

41

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

Page 51: Mobile First Case Study: Silvercar

MOBILE FIRST

Silvercar Opens at DFW

42

Silvercar launched at DFW airport on January 14, 2013

Got a great write up in TechCrunch despite a few technical bugs

Page 52: Mobile First Case Study: Silvercar

MOBILE FIRST

Silvercar Today

43

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

Page 53: Mobile First Case Study: Silvercar

MOBILE FIRST

Try it Out

44

The !rst !ve people to download the app and reserve a Silvercar will save 50% using this codeBIGD50

Or you can save 10% anytime with this codeBIGDBIGDEAL

Page 54: Mobile First Case Study: Silvercar

MOBILE FIRST

Thank you!

45

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!