ABOUT THE PROJECT
I focused on the hypothetical client who owns a car rental business in the UK. They experienced a decrease in inquiries and noticed that their current website bounce rate increased.
Role & Responsibilities
- Interviewing customers, conducting usability tests
- Competitive benchmarking and online surveys
- Creating affinity diagrams, customer journey maps, flow diagrams
- Sketches, prototypes and annotations
- Created high fidelity wireframes to show the full product experience
Project Goals
- Improve the desktop website experience to increase the number of people who complete the booking process.
Tools I have used for this project:
A recording of a walk-through of my UX design car rental website prototype in Figma.
This walk-through does not include an audio commentary, as it is a concise visual summary. Please refer to the description below for further details and explanations of the decisions made.
Quick watch 2 min
STEP ONE: RESEARCH
Competitive Benchmarking
Identify the problems:
During this phase, my primary focus was on identifying user challenges and requirements: I began with competitive benchmarking and conducting a survey. In the benchmarking stage, I examined four competitor websites: Hertz, Enterprise, Europcar, and Clarify.
Objectives
To gather extensive information about competitors and gain insights into their challenges.
- Understand the competitor’s business goals.
- Understand problems with their products.
- Understand the competitor’s strength and weakness.
- Identify Competitors message clarity.
- How competitors solve a problem.
- What conventions have been established that we need to follow.
Findings
Implement an Autocomplete tool, streamline and appropriately organize protection and additional features, minimize marketing distractions, and prioritize user focus on the task at hand.
- Hertz offers a location drop-down selection with an easy-to-use “Autocomplete” tool. The booking process is deficient.
- Rearranging the Europcar protection, extras, and total amount boxes on the page would be the only improvement needed to make it easier to see which is which.
- Once you selected “Browse vehicles”, at the Enterprise website a feedback window appeared. That was too early in the booking process without having chosen any cars yet.
- Clarify Homepage clearly needs improvement; the navigation bar has very limited options; the pick-up and drop-off fields do not give you alternative options. It contains an abstract information field, and the overall design looks scattered with content. The booking process is not straightforward.
Survey
I used Google Forms to build an online survey for this project, which I then posted on several social media networks. In total, I have obtained 15 responses to the survey of 15 questions. This project’s main goals are to pinpoint pain areas, gauge customer satisfaction, and determine which websites people used to make car reservations and how simple or complex the process is for them.
Objectives
Identify user goals and challenges.
- Understand user goals
- Understand context of use
- Learn user pain points and positive experiences
- Discover which websites users prioritized and why
Findings
Some responders have had problems figuring out how to pay.
- The majority of those surveyed said they would rent a car from Hertz or Enterprise.
- Some responders have had problems figuring out how to pay, comprehending the insurance, or comparing vehicles and costs.
- A small proportion of respondents were unhappy with their booking experience, but the majority were satisfied
Usability Test
The purpose of this project is to extract key information from the usability test. The main target is to highlight the key insights from the session, focusing on the user’s behavior, emotions, actions, quotes, and non-verbal cues.
STEP TWO: ANALYSIS
Affinity Diagram
The purpose of this project is to organize large amounts of unstructured, qualitative data into groups or themes based on their natural relationships or similarities.
Customer Journey Map
The user is traveling to England with a friend for a road trip in the summer. The user needs to start and finish their road trip in London and they need a car with automatic transmission.
STEP THREE: CONCEPT
User Flow and Interaction Sketches
The main purpose of user flow for this project is to create a seamless and intuitive journey for users as they navigate a car rental website and prevent users from getting lost or confused. The Interaction Sketches provide a rough visual representation of the user interface and the interactions, helping to convey the initial concept.
STEP FOUR: DESIGN
Prototype and Annotations
Car rental website high-fidelity prototype includes detailed interactions and design elements, making it possible to test the functionality and usability of the product in a realistic context.
User Insights
I considered user feedback on competitor websites and incorporated their suggestions into the prototype.
Highlighting the Search Box as the Central Element on the Home Page.
User Feedback
Although the user believes that they cannot ignore adverts, they are likely not to click on any of the banner ads since they are attempting to obtain the valuable information as soon as possible, and quickly enter a location, dates, and other information. The user’s hand gestures indicate that they would go forward and just start typing, ignoring commercial information.
Solution
To keep users from becoming sidetracked from their primary objective, which is to reserve a car, I centered the search box on the home page and concentrated on the most important information, such as: Manage bookings, return to a different location, hire a van, car subscription, business hire and premium cars.
Most users anticipate the inclusion of an auto-suggest feature in the search box.
User Feedback
The user assumes that as they type in the location, it will give them a drop-down menu with locations, which it does. The user looks comfortable with his result.
Solution
I have included an auto-suggest drop-down menu of the most popular pick-up and drop-off locations.
Selecting currency options may be a top priority for users from different countries.
User Feedback
User has noticed a currency option and has changed to EUR straight away as it is more convenient currency for them.
Solution
I have included a currency select drop-down menu in the header.
Displaying multiple months in the calendar simplifies the month selection process for users by presenting more options at once.
User Feedback
The user mentioned that although it is easy enough to navigate to the month, he needs at this stage, it could be more complicated if he had to book a car in December, and to do so, he would need to click 12 times to get to the right month.
Solution
I have incorporated a multi-month calendar view for the user to be able to select the required month quicker.
The "Filter & sort" options are prominently displayed to ensure users do not experience confusion.
User Feedback
It is not clear for the user the “21years” displayed along with the car features such as “Automatic”, “5 Seats” etc., also the user is unsure about the “Premium Location Fees”, they assume it is because of London. “That’s looks a bit confusing to be honest” – the user comments. The user also said they may need a calculator as the price displayed does not add up.
Solution
I have aligned the filter & sort accordion menu on the left, which is difficult to miss, and car images along with clear prices per day and total and a clear CTA button “Choose your protection,” which means that the user would know what the next page will bring to them after clicking.
A progress bar on a website enhances user experience by providing clear visual feedback on their advancement through a process, reducing uncertainty and improving navigation.
User Feedback
The user felt uncertain about their current stage in the booking process and worried about losing their selected options if they navigated back.
Solution
I have integrated a progress bar, and the box with the user’s details already has been filled in at the current stage and how many more stages the user needs to go through.
Information icons are provided to assist users in understanding unfamiliar terminology.
User Feedback
When asked what Loss Damage Waiver implies, the user responds, “God, I do not actually know what it means.”
Solution
I have included an information icon next to each option to allow users to read more information if they are not sure what it means.
The additional options are neatly arranged to enhance user accessibility.
User Feedback
The user quickly finds where additional driver information is on the page and ticks the box.
Solution
The extra options are clear and neatly organized so users have no difficulties finding the right option for them and toggling it on.
The "Review & Book" page.
The Review & Book page shows clear information about user options and filled-in information on previous pages, a clear total price, and the options to edit information or go back before completing and paying.
The "Booked" page.
The “Booked” page shows a little message saying, “Thank you for booking with us! You will receive a confirmation email shortly,” which reassures the user that the booking has been completed successfully.
You’re welcome to explore my other two projects by selecting either option below.
Nanny Nest - babysitting platform
A smart babysitting platform that helps parents and sitters coordinate childcare and daily schedules with ease.
NXN Bank - secure online banking
This banking app simplifies money management with a clean design, secure features, and a touch of friendly charm.