mobile first case study: silvercar
Post on 17-Aug-2014
6.883 Views
Preview:
DESCRIPTION
TRANSCRIPT
MOBILE FIRSTThe Key to Better Car Rental Experience
MOBILE FIRST
Hello, My Name Is:
2
MOBILE FIRST
Mobile First Case Study : Silvercar
3
Silvercar engaged my team to design their digital experience Reimagine Car Rental for Business Travelers
Objective
MOBILE FIRST
Silvercar arrival in suite
4Create an easy booking experience, web, mobile or kiosk
MOBILE FIRST
silvercar booking
5Skip the lines, skip the people, skip the paperwork
MOBILE FIRST
Silvercar pick up
6Walk out to a lot full of silver Audi A4s
MOBILE FIRST 7Scan the code to unlock any car
MOBILE FIRST
silvercar drive
8Sync your phone
MOBILE FIRST
silvercar drive
9Enjoy the drive
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
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
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
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
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!
MOBILE FIRST
Personas
14
From the research, we identi!ed the primary personas
EvelynExpert Traveler
GaryGregarious Traveler
Victor Vacation Traveler
BrandonBasic Traveler
Week2
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
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
MOBILE FIRST
CX Maps
16
Before we were engaged, the Silvercar team had already drafted a CX Map: Week 3-4
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
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
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
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
MOBILE FIRST
The Many Faces of Mobile First
20http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-!rst/
DESIGN
Strategy
MOBILE FIRST
The Many Faces of Mobile First
20http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-!rst/
DESIGN
Strategy
Design
MOBILE FIRST
The Many Faces of Mobile First
20http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-!rst/
DESIGN
Strategy
Design
Development
MOBILE FIRST
Mobile First Design = Only RWD
21
It works well for RWD and native app projects
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...
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
MOBILE FIRST
Mobile First : UI Design for iOS
24
Then we knocked out the iPhone wireframes in Keynote. Week 6
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?
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
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
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
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.
MOBILE FIRST
In The Meantime...
29http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
MOBILE FIRST
In The Meantime...
29http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
MOBILE FIRST
In The Meantime...
29http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
MOBILE FIRST
In The Meantime...
29http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
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/
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
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
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...
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
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
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
MOBILE FIRST 37
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.
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
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
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
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
MOBILE FIRST
Silvercar Today
43
Ten months later, Silvercar is now in seven locations across Texas and California
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
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!
top related