This is a case study that I worked on for my Professional Diploma in UX Design. The focus is on creating a brand new car rental website that is engaging, intuitive, and provides a seamless booking process for users.
I was responsible for all research and design.
There were volunteers who assisted with usability testing, as well as in the brainstorming session for the affinity diagram which was done as part of the research analysis.
How are other car rental companies approaching this scenario?
One of the first steps in the research process was to analyse how similar products handle the booking process. This was an opportunity to look for elements that either enhance or hinder the booking process.
I examined different car rental websites, looking at the flow from homepage through to car selection and booking.
This was a great way for me to familiarise myself with the online car rental process. Some sites were easier to navigate than others, and I began to see areas of opportunity for the product.
How does the user interact with the product?
While the competitive benchmarking gave me some great starting points, it was essential to understand the user’s perspective.
What are their expectations when using the product? What do they find useful?
What do they find frustrating?
I conducted a usability test using two existing car rental websites: Budget and GoRentals.
The users were asked to perform the task of booking a car for a “holiday”, starting from the homepage through to the personal information screen.
"It's a little confusing how they have an asterisk, that's usually for required fields but maybe it's the opposite here?"
"A quick filter would be useful"
"This is confusing to me, what does this cover?"
"It's handy that I can adjust dates here if I want to look at more options"
"I like seeing how many people can fit in the car"
"The short description is easy to read"
During the course of the usability test, I took on the role of facilitator. I guided the user through the test script, encouraging them to communicate their thought process.This helped obtain as much data as possible on the users’ behaviours and goals, as well as the context in which they would usually approach a similar task.
Organising unstructured data from previous research.
It was now time to analyse the research in order to consolidate insights and identify patterns. This would allow me to articulate the problem and inform future design decisions.
Having shared all previous research with a colleague, we began working on the affinity map together. We focused on findings and observations, and avoided jumping to potential solutions at this stage.
The goal was to arrange data into categories, all the while discussing why the grouping worked, or didn’t, and rearranging until we were in consensus on the arrangement.
At the end of the exercise, we had refined groups into categories and subcategories.
We also arranged them in chronological order by considering at which step of the process the user would encounter these elements, as well as making note of any recurring elements throughout the booking process.
Discovering how the user moves through the site to achieve their goals
Having organised data into high-level groupings in the affinity diagram, I was able to break down the users’ interactions into stages, creating a sequence of events that delineate how the user moves through the different touchpoints.
This step in the analysis helps showcase the most common flow through the site, as well as any friction experienced by the user at each stage.
While the visual representation of highs and lows is a key part of journey mapping, I wanted to make sure I communicated important findings that were relevant to each stage.
I provided a snapshot of users’ feelings next to the emotion icons, and I presented additional information below, colour-coded to match each stage.
Users were off to a bad start with crowded homepages that are overwhelming to navigate.
Most car rental companies follow similar conventions when it comes to search bars, conveniently placing them at the top of the homepage.
The search results were definitely an area of opportunity: ambiguous information and technical jargon, lack of cost details, and an unclear path to completion left users annoyed and confused.
Depicting how the user will move through the new site
Now that I understood the interactions involved in the booking process, it was time to develop and review how the user will flow through the new site to achieve their goal; keeping the process seamless and intuitive.
My focus was to simplify the booking process. Using all previous observations, I could now put together a flow that was simple, straightforward, and provided all relevant options and information to users.
The flow was now taking shape. The user could easily search for and choose a car model and make modifications, leaving any extras and add-ons as a cluster of short, final steps before confirming their booking.
Time to start the drafts for the new site design!
Now that I had a clear picture of the navigation and screens, I was ready to start designing the layout.
These sketches will be the “skeleton” for my prototype. While some elements changed along the way, it was important for me to understand where content would live, calls to action, interactive elements, overlays, and any notes that I needed to consider for the design.
One of the challenges was to provide just the right amount of information to users, with the option for them to look at further details if that’s what they wanted. It was also important to group relevant items in sections to provide better scannability and guide the user through the necessary booking steps.
I followed conventions used in the field and also took inspiration from elements that make other products efficient and intuitive (even if they weren’t car rental sites). For example a clean and simple search bar inspired by Airbnb, or the use of icons by Tripadvisor.
Testing the new product to ensure it solves users’ needs
I used Figma to develop a medium-fidelity prototype that could be used to validate the solution I’d created. The prototype contained enough interactivity so I could test the user flow through the booking process.
After further usability tests, the following elements were adjusted:
A bigger clickable area for drop-down calendar to appear when choosing dates.
Improved description on button labels on the car results screen.
Interactive links on the booking summary were modified to better reflect changes made by the user.
Added clickability to the progress indicator to allow users to move back and forth within the same.
Further booking details included on the confirmation screen.
While I would have loved to present a high-fidelity prototype to users, the reality is that it would have been very time consuming and not necessarily what was needed at this point.It was important to stay focused on the interactivity and layout, with particular attention to the booking process.
Getting the design ready for handover
Now that I was confident in the solution, it was time to communicate the design specifications so developers could better understand the interactions and system rules.
I created a document containing all the wireframes and included detailed annotations for each screen.
This part of the project made me aware of the importance of shared understanding between designers and developers.
I’m now looking forward to learning a little more about coding so I can better articulate my work to colleagues in the future.
The final look and feel of the product
I wanted to create an energetic and vibrant feel, with a modern style. This inspired the colour palette and typography chosen for the site design.
Making sure to include all previous insights in the final design, I opted for a clean, bold look that would showcase:
Clear call to action buttons
Relevant and engaging content
Visible filters that are intuitive
Ability for user to make changes at any time
Clear points of contact
Icons for easy information at a glance
Progress indicator during booking
Detailed cost review
Key takeaways from this project
No shortcuts! It may seem like you know the solutions, but it’s important to always focus on the user and make decisions supported by research. For example, the usability tests were a great way for me to get out of my head and really see how people interacted with the product.
I realised getting too stuck in the details sometimes hindered the progression of the project. Rather, I began to consider each stage as a set of iterations, and this allowed me to be more agile in my approach and not wait until every detail was perfect before continuing with my work.
Be adaptable. While it’s great to be inspired and have a vision for your product, it’s just as important to be open to feedback and making changes along the way.
