Discovery
What stood out to me most was the centrality of the trip purpose in all decisions the user needs to make. This wasn’t something I had anticipated finding.
I was also somewhat surprised by the complexity in how the protection and extras options are presented and explained on existing websites, resulting in a high amount of confusion and user friction.
The point of picking up the car appeared to be the worst point of the overall experience due to the amount of paperwork to do, information to consume, and risk of being allocated a car of an unliked manufacturer.
Concept: An experience-based search process
As my research showed that flight details and trip type are the driving factors behind all decisions the user makes, my concept was to simply ask for those details and build them a customisable recommended deal, removing all the guesswork and manual selections as much as possible, thereby streamlining the process whilst still giving the user full control.
Based on my findings I focused on airport car hire and designed a mobile website rather than a native app.
Optimising the mobile experience
The existing product offerings all separated out the car selection, extras selection, and protection selection into different pages. The downside of this approach is that it increases the time to load multiple pages, which can be especially problematic on mobile depending on reception, and requires the user to navigate back and forth to check details or if something had been forgotten.
Therefore, I instead chose to have all deal options within one page (‘Refine’) to allow the user to have full visibility of and control the deal details in one view and minimise the number of page loads.
I then used mobile dialogs to access the options per section so as to reduce any clutter within the page.
Removing the confusion surrounding extras and protection
My customer journey map highlighted that one very low point in the existing process was when it came to selecting protection and extras due to the use of unfamiliar jargon and acronyms with very little or confusing additional information.
To address this confusion I ensured I used widely familiar language for each option, e.g. “excess” rather than “CDW”, with easily accessible additional information providing clear explanations.
I also decided to include in the cost of the car the options users expected to be provided as standard and were also shown to be some of the most commonly selected add-ons - protection with an excess, roadside assistance, and first additional driver. This would serve to build goodwill, reduce the amount of manual selections needed, and remove any confusion of what comes as standard.
Lastly, the automatic selection of additional options based on the trip type would be applied to further reduce the amount of manual selections needed, e.g. winter tyres for ski trips or zero excess for road trips.
Rescuing the pickup experience
With long delays, stacks of paperwork to be reviewed and signed, a wealth of information to be consumed when already tired and in an unfamiliar place, and the risk of being assigned a car of a disliked manufacturer, the step of picking up the rental car was shown to be the worst part of the entire experience.
To speed up this in-person interaction and reduce the mental load at this inopportune moment I made all paperwork and information available when users manage their booking online so it could all be reviewed and electronically signed in advance.
To mitigate the risk of being assigned a car of a disliked manufacturer I added the ability to specify which manufacturers a user likes and, more importantly, dislikes as part of refining the rental deal. This provides peace of mind that there won’t be a surprise or disappointment upon picking up the car and gives the user a sense of control.
Evolving the UI design
I started with low-fidelity sketches to flesh out different ideas, looked at interaction design, and then built out a medium-fidelity prototype upon which I conducted validation usability testing.
The overall impressions of the medium-fidelity prototype were very encouraging. In particular, the ability to set pick up and return details based on flights and specify car manufacturer preferences were seen as great additions to the booking process.
Also the choice to use modal dialogs to refine different aspects of the deal, rather than going through separate pages, was appreciated to keep the page count down and maintain a clear view of the whole deal and all costs throughout.
As a number of the key improvements identified by the validation usabilty testing were related to making different aspects of the pages stand out more, e.g. CTAs, I felt this was the right time look at UI style:
Colour palette
I took inspiration from classic car racing colours by choosing British Racing Green as my primary colour and selected complimentary secondary and tertiary colours, with each meeting a minimum of AA WCAG standard for large text and components contrasted with white.
Once these were selected I added different accents (dark, mid, light) to each of the base colours so as to have plenty of versatility.
I then selected a range of shades from black (#000000) to white (#FFFFFF) to use for backgrounds, text, icons, and unselected or disabled buttons.
Typography
I continued my classic theme by selecting Libre Franklin for the logo and majority of text elements, which is an interpretation and expansion of the 1912 Morris Fuller Benton classic font, due to its range of weights available and readability at smaller font sizes.
I then paired this with Inter for buttons to make those slightly different so as to set them apart and created the different size and state button components required.
... I’d focus on further improving the search section of the homepage.
For example, I’d like to do A/B testing to see if the way I have ordered the date and flight detail fields is optimum or if it would work better to input both start and end dates together before providing outbound and return flight details.
I’d also design the ‘Search based on location’ option and then do A/B testing between searching by flights and searching by locations to validate my conjecture that users would want to search based on their flights. There may also be a need to mix-and-match flight and location details for pick up vs. return.
When I first found out about the case study my mind raced with ideas of what solutions I could build - anything from a track day race car hire that takes graphical inspiration from car selection designs in racing video games to a retro campervan hire service that helps you plan a UK roadtrip with activities and campsites.
However, holding back from jumping into visual design and following the UX process imparted to me the critical importance of carrying out proper research and analysis before starting to design to make sure the solution solved real, validated user problems, rather than rely on my personal biases and assumptions.
When conducting research and validating my initial prototype I found that running usability tests provided deep insights into how others use and interact with services that differed from my own mental models. Seeing the users’ actions and hearing them verbalise their thoughts showed me that things I had understood to work in one way were interpreted differently by others - neither wrong, just different - and things I had taken for granted or not previously paid attention to were critical to the end design.
Enlisting the help of two others to work on the affinity digram together as a way to review and give structure to my research materials added different perspectives and insights, which made the overall findings much richer. As such I expect that continuing to get others involved with analysing my research in future projects, be that clients, developers, management, etc., will result in further valuable discoveries and better end products.
Screenshot of usability test recording