A Car Club Booking Mobile Site
Background
Steer is a car sharing network that provides on-demand access to cars by the hour or the day in cities around the world. The missions of Steer are to allow people to live car-free but still have access to a car so there will be less private cars on the roads and to improve air quality.
Goals
-
To design a mobile site that covers the main functionality: search, car mapping, booking and payment.
-
To design a brand based on the company's values and missions.
My Roles
UX Designer.
Engaged on process of the design, from research to usability testing and further iterations.
Tools Used
Sketch, Adobe Illustrator, Adobe Photoshop, Invision
Design Process
Research
Competitive Analysis
Online Survey
Interviews
Persona
Empathy Mapping
Interaction
Design
User Flow
Low Fidelity Wireframes
Low Fidelity Prototype
Usability Test 1
Wireframes Iteration 1
User Interface
Design
Brand & Identity
UI Design
High Fidelity Prototype
Iteration &
Implementation
Usability Test 2
Affinity Map
Design Iteration
UI Kit
1. Research
To understand what needs to be done, we conducted some research to understand users’ pain points and unmet needs. We started with a competitor analysis to find out what are the strengths and weaknesses of both direct and indirect competitors in their booking experiences. Online survey was also made to collect quantitative datas.
1on1 interviews were followed after the two previous researches to gain deeper empathy. We had 5 participants interviewed about their latest car booking experiences.
Research Summary
3 out of 5 interview participants hired a car for road trips when they were travelling overseas, while the other 2 hired a car locally to go somewhere because they don't own a car.
​
4 out of 5 participants used desktop to do the bookings.
"There was no detailed measurement on how big is the booth"
"Car parking, insurance and service are expensive"
"I used desktop to book the car because mobile site doesn't provide complete information"
Pain Points
-
No exact measurement of the car boot
-
Less detailed information and smaller appearance when booking via mobile
-
No information on what documents needed to be prepared
-
Hidden fees being charged
Unmet Needs
-
The ease of booking via mobile site
-
Clear description on what are included in the amount paid
-
Option of car drop-off at address
-
Unlimited mileage
Based on the research findings, both Persona and Empathy Map were created.
Persona
Tommy is a 33-year-old IT Manager who takes public transportations to go to work. For him, owning a car that will only be used once or twice a week is a waste of money and he prefers to have the access to a car whenever he needs one.
Empathy Map
Empathy map helps us to understand the persona’s emotional values in renting a car.
2. Interaction Design
We started the interaction design process with creating the happy path for a particular task to provide the most intuitive interaction of the website. It came out as the form of a user flow, then translated into low-fidelity wireframes and prototype as an initial design of the mobile site.
User Flow
The user flow of booking a car.
Low Fidelity Wireframes
Once we were finished with the prototype, we conducted first usability test to observe how users were using the mobile site. We would like to know if there was any improvement needed in the design before moving on to the branding stage.
-
To book a car on 12 September 2019 from 14:30 to 17:30
Task To Complete
-
5 participants, 4 were participants from the previous research
-
Aged range 22-31
-
100% of the participants were able to complete the task
-
Each participant took the average of 2 minutes to complete the task
Usability Testing 1 Overview
Findings
-
All participants completed the task with ease
-
3/5 participants tried to click/tap the minute before the hour is selected
-
1 participant suggested to add driver's licence expiry date as a reminder for the users
-
All participants like the 24 hours time format
-
To add a progress bar to show users where they are in the process
-
To add driver's licence expiry date on the personal details page
Iterations To Do
3. User Interface Design
Once the low fidelity wireframes were completed and tested, we moved on to branding and visual design. We decided to name it Steer then created a logo and brand colours for it.
There are a few keywords that we came out for the brand personality:
sustainability - safe - friendly - easy - clean
After finishing with the branding, we started to put everything together as a high fidelity wireframes. Apart from the iterations needed to be done as mentioned in the previous section, we also changed the drop off time input to be a time picker for the duration or length of the rental instead of manually putting the date and time.
User Interface
4. Iteration & Implementation
As the design was done, we started the second testing phase by performing a usability test on the high fidelity prototype. This allowed us to receive feedbacks from the users, which we created an affinity map from. This process helped us to sort, prioritise and rank the feedback and the revisions that would follow.
Usability Testing 2 Overview
-
5 participants, 1 was a participant from the previous research
-
Aged range 27-36
-
100% of the participants were able to complete the task
-
Each participant took the average of 2 minutes to complete the task
Task To Complete
-
To book a car for 3 hours on 12 September 2019 at 14:30
Findings
-
All participants completed the task with ease
-
All participants feel the design is good and easy to use
-
All participants scrolled down to see the whole page
-
2/5 participants tried to click/tap on the "Fares" and "How It Works" tabs on the car details page
-
1/5 participant tried to scroll the time drop down menu
-
1/5 participant tried to click on the "luggage size chart"
-
1/5 participant tried to scroll the recommended car carousel
-
2/5 participants suggested to add transition (manual or automatic) filter when searching for a car
Affinity Map
From the usability testing findings, there is one iteration to be done:
to add car transition mode filter when searching for a car.
​
We made the CTA buttons disabled when drop-down menu is on (address, date, time and transition input) to keep the focus on the menu. We also changed the status bar past-present colours the other way around from the previous version. The lighter blue is now put as the past colour to show that it's clickable.
Visual Design Iterations
Before (left) and After (right)
UI Kit
Reflection
I have never hired a car from a car club before, so this project made me learn so many things started from the users' preferences on choosing a car to how they struggle in the booking process. I really enjoyed the whole experience working on this project.
Other Case Study