Drive UX
01 The mission
This project was part of my Professional Diploma in User Experience Design with the UX Design Institute. I needed to demonstrate proficiency in following a user-centred design process, applying methods and using tools. The involvement of real world users was important, but sampling considerations were not.
AIM
Design an easy and intuitive online (desktop) booking service for a start-up car rental service, based on a deep understanding of their target users.
MY ROLE
I was the sole contributor, responsible for research, analysis, design and handover documentation.
02 The game plan
The 'company' I did this work for was a startup: there was neither an existing product, nor an existing customer base. But we didn't have to start from scratch. We could learn from our competitors and our potential users' experiences with them.
​
The mixture of methods to use was defined by the UX Design Institute, but here's how I made sense of it:
A grounded theory research study including multiple methods to support triangulation:
-
Competitive benchmarking, to learn how other designers have solved similar problems, gather design ideas and understand some of the conventions and pitfalls​
-
Sample 2 large brands, a small local company and one aggregator
-
Review sites based on a standardised user journey
-
​​
-
Online survey - mix of open ended and closed questions to gather attitudinal data on users' recent car hire experiences: goals, task success/failure and perceived reasons for failure​
-
Pilot before distribution to sample of approx 40 family and friends (19 responses obtained)
-
Descriptive statistics and some thematic analysis of free text fields
-
​​
-
Usability tests, combined with depth interviews, over Zoom to observe how users interact with existing sites, how they think about their interactions, what works well and what does not​​
-
Four participants; a mix of ages and genders; all with experience of online car hire
-
Bring the research together and make sense of it:
-
Affinity diagramming to draw out themes and triangulate the (largely qualitative) data
-
Online using Miro, collaborating with one other researcher ​
-
-
A customer journey map to help visualise the effect of positive and negative design features on the journey, and help to develop design priorities - again using Miro
Take the conventions from the competitive benchmark as a baseline and then meticulously address the design priorities:
-
A flow diagram to understand the screen states we need to design
-
Sketch the screen states first, iterating as needed, and then create a medium fidelity prototype to test interactions, without users getting hung up on visual design elements
-
Usability testing to check whether our design addresses the problems that other sites suffered from, and whether users could achieve their goals
-
As minimum we would expect to need to tweak our design based on the data gathered
Create handover documentation: an updated flow diagram, prototype and annotated wireframes, specifying the system controls, rules and feedback.
03 The competition - and what it taught me
WHAT GOALS ARE PEOPLE TRYING TO ACHIEVE?
-
Check prices (of car plus extras) to compare against their budget, other cars on the same site, or cars on other sites
-
Maximise value - it's not always about the cheapest vehicle
-
Book a hire car, usually fitting in with other plans and bookings - sometimes the booking is a collaborative decision
DO THEY SUCCEED?
✓ Most of the survey sample managed to complete their task the last time they visited a car hire website.
downloads a pdf document - 354KB
Booking not made
“I wouldn’t feel comfortable confirming and paying just yet ... I would probably go back and look through this [packages] again in more detail. But as I said I feel a bit confused.”
downloads a pdf document - 583KB
✗ BUT:
​
1. The sample isn't big enough to generalise
​
2. Most of the survey sample used aggregator sites, which is different to what we are designing
​
3. Two of our usability tests ended with users saying they would not be comfortable placing the booking in real life
SOME THINGS EXISTING SITES ARE DOING WELL
Home page
“My eye was immediately drawn on the first page to the search criteria…. That was quite easy to find. I enjoyed the simplicity of it I suppose.“
✓ search form clearly visible on most home pages
✓ minimal information collected to begin: location, date and time for pick up and drop off
Search results
“Liked how easy the filter bar was - the way it was set out was really clear.”
“I do think it’s very well presented… The uniformity is good… the way that the images are displayed… The information seems to be well provided.”
✓ fairly standardised steps: search > vehicle selection > extras > review > pay/reserve
downloads a pdf document - 12MB
✓ user selections summarised at top of page as part of progress indicator
✓ useful filters
THINGS SOME SITES ARE NOT DOING WELL
These stronger themes emerged from the affinity diagram:
✗ There are long lists of filters, or they are illogical or difficult to understand​
✗ Users incorrectly think that they are renting a particular make and model of car​
✗ It is frustrating that the price increases as users go through the process​
✗ Lack of transparency on final price so users can't compare between sites or budget when they first see the prices
No trust in price on search results page
“My inclination would be to click on it”..."To see… if it really is £49.50 a day or when you click in it does it give you it’s only £49.50 a day on a Tuesday."
✗ Language, terms and conditions are opaque, especially about fees, refunds and insurance
Not understanding the fees
“Premium location fee - ok…What’s that cause it’s London or something… You don’t really know what that means.”
opens a new tab in your web browser
WHAT DO OUR FINDINGS SAY ABOUT THE CUSTOMER JOURNEY?
It is surprising that selecting a vehicle and the extras are associated with negative emotions - this is the core business of car hire companies! We can differentiate DriveUX from the competition by focussing our design efforts on journey steps that are currently negative.
opens a new tab in your web browser
04 Research-based design priorities for Drive UX​
HOME PAGE / SEARCH FORM
1. Prominently show the search form on the home page
2. Gather minimal data to start the search
3. Suggest nearby branches that are open open on selected date/time.
SEARCH RESULTS
4. Prominently display filters
5. Rationalise filter content
6. Fix clunky interaction design for exploring search results
7. Clarify that the company is not offering a specific make and model of vehicle
8. Provide transparency about costs on search results page
EXTRAS
9. Simplify information about insurance and liability
10. Present costs of extras for the full hire period
05 The design
WHAT DOES A GOOD CONVERSATION BETWEEN THE USER AND THE SITE LOOK LIKE?
This flow starts to address design priorities 2 and 3:
✓search only gathers location, date and time data for pick up and drop off, and driver age category for accurate pricing
✓new flow added to suggest alternative branches if selected branch is closed when user wants to pick up or drop off
This section of the flow starts to address design priority 6: simple interaction with search results
opens a new tab in your web browser
BASED ON THE FLOW DIAGRAM, WHAT SHOULD THE SCREEN STATES LOOK LIKE?
Designed to address the priorities:
​
✓1. Prominently show the search form on the home page
✓ 4. Prominently display filters
​
✓ 5. Rationalise filter content
​
✓ 6. Fix clunky interaction design for exploring search results
​
✓ 7. Clarify that the company is not offering a specific make and model of vehicle
​
✓ 8. Provide transparency about costs on search results page
✓ 9. Simplify information about insurance and liability
downloads a pdf document - 18.1MB
✓2. Gather minimal data to start the search
✓3. Suggest nearby branches that are open open on selected date/time (below)
✓ 10. Present costs of extras for the full hire period
HOW DO PEOPLE INTERACT WITH MY DESIGN?
Insurances, extras ✓
"I found that the insurance options were quite straightforward and easy and not complicated....it was quite easy to understand... one compact box where you have three choices, not 100."
Overall assessment ✓
"Overall I found this quite simple, fast and not complicated."
Main change:
The user in the video almost did not read the differences between the hire options, and almost selected the ‘Economy’ package by default as the cheapest.
In response I amended the design to highlight key words using bold font and colour coding:
06 Handover
Outcomes:
-
Updated flow diagram to address outcome of prototyping and testing
-
Updated prototype to address usability test findings
-
Annotated wireframes to support developers in understanding controls, rules and feedback
-
Design achieved the aims of overcoming usability issues identified during research
-
Passed coursework (grade 35/40)
opens new tab in your browser
downloads pdf - 49.4MB
opens new tab in your browser
07 Reflections
HOW DID THIS PROJECT CHALLENGE ME?
-
The pandemic had a twofold effect:
-
Hampering the ability to conduct research and analysis face to face - I learned to use tools like Miro and Zoom
-
Restricting people's exposure to online car hire - memory decay may have affected the value the survey and depth interviews
-
-
My sketching skills were put to the test in this project and I learned techniques like Crazy 8’s to generate ideas
-
There was a lot to learn in terms of screen design (even without going to high fidelity) - and I feel like I have only scratched the surface
-
In Figma I learned how to define reusable styles and use components and instances, which help to cascade design tweaks
WHAT COULD I DO BETTER NEXT TIME?
​​In any real-world study I would have:
-
Dropped the survey or put significant effort into targeting people with recent experience - however the survey was a course requirement
-
I would have recruited more users to take part in the research
-
​With more (6-10) users it would become worth gathering simple ratings during the usability tests
-
-
Counterbalanced participants' exposure to different implementations, to manage order effects
-
Discussed with the business the wording to be used on the site, especially around terms and conditions, insurance, etc.
In future I will annotate the prototype directly in the wireframing software - doing it in Keynote was inefficient