About the project:
BEEP car rental is a fictional website for a start-up company, renting cars in Croatia. This was a solo project I worked on during my studies for the UX Design Institute's professional diploma in UX Design.
Problem:
Many car rental websites are too clogged with advertisements and too many options, resulting in user confusion. Customers are frustrated and spend long hours to reach a desired goal. The insurance policies are often time avoided and miss read as the contain too much information for the user to read. A lot of terminology is misunderstood and unexplained.
Goal:
The purpose of this project was to create an online experience for users that is simple, fast, and easy to access. My main areas of focus were a simplified booking process and a clearer understanding of insurance policies and terminology linked to renting cars and renting laws.
Tools used:
Figma, Figjam, Adobe Illustrator, and Google Forms.
THE DESIGN PROCESS:
This is the design process I followed and referred back to throughout this case study.
STEP 1: Empathize (Research)
Competitive Benchmarking
To get a good understanding of my competitors and the market, I started my research phase with competitive benchmarking. This gave me a good overview, of the best practices that I could follow, some pain points I should improve on, and conventions I should emulate. Since the website was to be located in the country I live in, I focused on researching 2 world-class websites: Sixt.com and Hertz.com, as well as some local websites in Croatia; Novarentacar.hr and Oryx-rent.hr.
Some of the main conventions I discovered were: the language option, currency option, login/register option, chat/agent option, progress bar, extra gallery of the cars available, and a payment confirmation page, just to mention a few.
Online Survey
After understanding the methods my competitors use, I moved on to get to know my public. I created an online survey with Google Forms and distributed it on my social media platforms and throughout my email contacts. The questionnaire was composed of both quantitative and qualitative questions in order for me to better find out the problems the users had.
Some of the issues and preferences found were:
- The audience mainly focused on the price (40%) and insurance (30%) as the main booking factors, while others (10%) found unlimited kilometers important for their booking.
- The preferred device for booking a car was a laptop (70%), followed by a mobile phone (30%).
- Customers preferred to have software that was forthcoming (presenting only the available cars at the moment) compared to being presented with cars that ended up not being available.
- Users valued the chat options and easy access to an agent/support.
Usability testing
To back up my previous findings and gain more qualitative insights, I also conducted 2 usability tests, by preparing an interview script and conducting the interviews myself. My candidates were my brother who was looking to book a car for his upcoming vacation trip and a friend who recently booked a car. Both were suited to be good candidates. I started off by explaining what the interview is about, then continued with questions about their profile and profession, and finally asked the users to complete a range of tasks on two different car rental websites.
While conducting the interview I was also note-taking, which I later kept on referring to when analyzing the data.
Problem:
One of the main findings during my research phase was the problem regarding insurance policies. Both of my users had a lot of trouble understanding them or were not feeling motivated to read the insurance policies as there was too much information. They lacked clarity. There were often times terms that customers did not understand and needed extra time to define them.
Example of the new insurance policy plans designed.
Solution:
How could I solve this problem and increase user adherence on the website?
STEP 2: Define
Affinity Diagram
With all the research data I collected from the competitive benchmarking, online survey, and usability testing, I was ready to analyze and define my findings. I created an affinity diagram with key points that could be improved and key points that were of best practice. Once all the notes have been written, with a couple of helpers, we organized the notes into groups and then further divided these groups into two categories of: good UX and bad UX.
Categorizing into groups gave me a more structured overview of which areas need to be worked on and more clearer ideas on how the new user flows should be structured.
Here are some of the groups categorized: Search results, Page layout (UI), Location, Additional Help/ Functionality, Terms and Information, Bars/Filters and Tabs, Price, User behavior, and Calendar.
Most pain points were found in the Terms and Information category, as these were mainly linked to the unclear and bombarded information users were confronted with on this page.
Examples of positive and negative key points in the Terms and Information category.
Example of the Customer Journey Map.
Customer Journey map
After the affinity diagram, I continued on to building a customer journey map. This allowed me to focus more on the user's thought processes and record their emotions as they navigated through the website. I defined the user's goals, behaviors, mental modes, positives, and negatives and backed it all up with some quotes to give the map a voice. This was another great tool for me to affirm and organize my findings.
Some of the overall conclusions from this method were:
- Users tend to avoid a lot of information on the screen. (advertising and upgrade options)
- Users value quick and simple filters.
- Users put importance on insurance policies and terms and information should be well explained.
- Users do not care much about the overall appearance of the webpage, as long as they can accomplish the task in the shortest amount of time.
- Visual aid like maps are of great value to the customers.
STEP 3: Ideation
User flow and Sketches
I began the ideation process after fully identifying the key issues I will be focusing on improving. First, I started by creating the new user flow, taking into account the goals, behaviors, and context of the customers. The new screen outlined the potential solution to the problems I discover during the analysis phase.
Once the user flow was determined, I took some paper and pens and sketched out some ideas of how the new layout will look like. This was very helpful in determining if there are any extra screens I need to include. The sketches also allowed me to check if everything was going in the direction I wanted and if the wireframes would be feasible.
New user flow that adds an extra gallery and showcases more information regarding a selected car.
STEP 4: Prototype
Example of some of the main screens designed.
Mid-Fidelity Wireframes
Using Figma, I translated my interaction sketches into medium-fidelity wireframes. I improved them by adding a few images, some basic color choices, a logo design, and some components I created. I wanted them to look as close to the final product as possible. However, they were only defined enough for some basic user testing of the main tasks. I added hotspots to make the prototype clickable and ended up writing my detailed annotations for the developers in the comments.
It would now be ready to hand off to the developers for building.
"Really nice work. Sufficient detail to test the interactions and high-level user flow. Nice design, it was clear and intuitive to use."
- UX Design Institute