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!
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. Silvercar arrival in suite
Create an easy booking experience, web, mobile or kiosk
MOBILE FIRST
4
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. 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. 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. 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. 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. 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. 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. 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. CX Maps
Before we were engaged, the Silvercar team had already drafted a CX Map:
MOBILE FIRST
Week
3-4
16
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. 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. 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. 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. The Many Faces of Mobile First
Strategy
DESIGN
MOBILE FIRST
http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
20
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. 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. Mobile First Design = Only RWD
It works well for RWD
and native app projects
MOBILE FIRST
21
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. 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. Mobile First : UI Design for iOS
Then we knocked out the iPhone wireframes in Keynote.
MOBILE FIRST
Week
6
24
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. 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. 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. 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. 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. In The Meantime...
MOBILE FIRST
http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
29
36. In The Meantime...
MOBILE FIRST
http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
29
37. In The Meantime...
MOBILE FIRST
http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
29
38. In The Meantime...
MOBILE FIRST
http://redearthdesigns.com/blog/2013/6/4/silvercar-an-award-winning-retail-space
29
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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. Silvercar Today
Ten months later, Silvercar is now in seven
locations across Texas and California
MOBILE FIRST
43
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. 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