UX case study
Waagan – Simplifying the car rental booking experience for the next generation
A breezy, modern car rental application built from scratch with ease of use, multi-device support, and reliability in mind. A complete case study from Research to Prototyping.Now book your next rental car in a blink!
Introduction
When it comes to travelling around, renting a car is a popular choice for many people. However, renting a car can often be tedious and frustrating, especially when using outdated car rental applications. In this UX case study, I will share my experience in redesigning a car rental application to improve the user experience and make the process of renting a car more seamless and enjoyable. I will discuss the challenges I faced, the design decisions I made, and the outcomes of the redesign.
Where?UX Design Institute
Ireland
RoleDesigner, Researcher
What?Website
Mobile, Watch
CategoryTravel, Booking
Why?Post Graduate Diploma
Portfolio project
Duration6 months
Competitive Benchmarking
I studied four car rental applications – Revv, Zoomcar, Trip.com, and Mychoizecar and did competitive benchmarking. Initially, I was confused in choosing the players for my analysis. Then, I narrowed down where they stand in their respective market and did a skim of how they are rated for their apps in the Play Store and App Store. After seeing a few reviews of their websites, I arrived at the list of the major four players in the car rental industry (in India).
I compared the usability and UI of their homepage, search page, results page, and payment page and pinned down the positive user experience, and negative user experience and where there is a scope to improve. After completing my study on the individual pages, I did a heuristics comparison among the four to decide what had been implemented and what hadn’t been.
Overall, Trip.com and Revv came out with a better user experience when compared to their counterparts.
User Survey
The objective of the survey was to investigate the Goals, Behaviors, and Contexts of people while using car rental websites. It uses a mix of open-ended and multiple-choice questions.
I split the questions into 5 types – Demographic, Experience, Attitude, Behaviour, and Needs. Using the Random sampling method, I surveyed 44 participants and analyzed the results.
A total of 11 questions were asked in the survey, predominantly to understand the experience and behaviors of the users. A quick recap of what was gathered from the research is presented below.
56% prefer having a driver
Usability Testing
For this usability testing, I chaired the interview and recorded the whole process. Later I took notes revisiting the recording. I used Lookback to conduct the testing with my friend on 2 different websites- Revv and Mychoizecar.
I already had a recording of two usability tests with two different users from my institute. Two different car rental applications were tested, namely, Sixt and Green Motion. I watched the recordings of those usability tests along with the one I conducted with my friend and took notes for all three usability tests.
I organized my notes into three categories – Positive User Experience, Negative User Experience, and Neutral User Experience. These notes were then reviewed and added to the Affinity Diagram later.
Shyam SundarCopywriter
Affinity Diagram
I sat with a couple of my fellow students from the UX Design Institute and studied our notes over a week to distill raw data from our user research. We met at various times to accommodate our different time zones – one was from South Africa, the other from Dublin, and I was from India.
We managed to extract usable sticky notes from our competitive benchmarking, user survey, and usability test notes.
Later, I collaborated with Grace, another UXDI student from Malaysia, to group and sequence the notes into clusters that would help guide our application’s flow and provide valuable insights.
For instance, I grouped the notes under five criteria:
- Positives
- Pain Points
- Mental Model match
- Mental Model Mismatch
- Scope of Improvement
I then further themed them based on their relevance to different areas of the application, such as the homepage, payments page, and filters used in the sorting page.
Lastly, I ordered the note clusters to describe the typical workflow of a customer navigating the car rental application, resulting in seven potential steps.
This affinity diagram project required multiple iterations and team effort, but it provided valuable insights and expanded my understanding of different thought processes. We analyzed over 150 notes, formed around 25 groupings, created six sub-categories, and sequenced the entire map based on customer usage.
Pierre Rajangam loves to drive cars safely and loves to explore new areas on wheels…
Pierre Rajangam,IT Professional
User Persona
As an avid reader, I always find ways to incorporate my favourite characters into projects. What better place for me to insert my favourite name than the user persona? I named my fictional friend Pierre Rajangam, an amalgamation of two of my favourite characters – Pierre from Leo Tolstoy’s epic ‘War and Peace’ and Rajangam from the movie ‘Soorarai Potru’, which is based on Captain Gopinath’s book ‘Simply Fly’.
So my character Pierre, age 32, is a Data Analyst who travels a lot on weekends. He enjoys travelling alone and exploring nature in four-wheelers. Pierre is a safe driver and a nature enthusiast. He is very knowledgeable and understands all the car terms that one could throw at him. As a frequent customer, he expects the process to be hassle-free and quick.
Pierre Rajangam loves to drive cars safely and loves to explore new areas on wheels…
Pierre Rajangam,IT Professional
User Persona
As an avid reader, I always find ways to incorporate my favorite characters into projects. What better place for me to insert my favorite name than the user persona? I named my fictional friend Pierre Rajangam, an amalgamation of two of my favorite characters – Pierre from Leo Tolstoy’s epic ‘War and Peace’ and Rajangam from the movie ‘Soorarai Potru’, which is based on Captain Gopinath’s book ‘Simply Fly’.
So my character Pierre, age 32, is a Data Analyst who travels a lot on weekends. He enjoys traveling alone and exploring nature in four-wheelers. Pierre is a safe driver and a nature enthusiast. He is very knowledgeable and understands all the car terms that one could throw at him. As a frequent customer, he expects the process to be hassle-free and quick.
Customer Journey Map
In my project, I analyzed two critical stages of customer interaction at our car rental site: entry and usage. Pierre, planning a weekend trek to Bonacaud, only needed to book a rental car to complete his preparations. He explored various rental sites but was dissatisfied with the available car models and prices, further frustrated by the lack of home delivery options.
When Pierre finally selected a car, he struggled with poor-quality images and a confusing pricing model on the rental site. This complexity was compounded at checkout, where he faced unexpected price increases due to undisclosed taxes and insurance fees, adding to his frustration.
To address these issues and improve customer satisfaction, I implemented changes to enhance transparency and user-friendliness in the rental process. These modifications aimed to provide a smoother, more predictable experience for users like Pierre, ensuring clearer communication and easier navigation on Waagan.
Flow Diagram / Information Architecture
Based on the above findings, I have started designing the user flow. I designed my site to have four main pages:
- Homepage: This is where the user provides all the basic details regarding their rental.
- Search page: Here, the user can search and find their rental car. This page includes various sorting options and filters to streamline the search process.
- Summary page: Once the user chooses a car, additional details about the car and pricing split details are displayed. Any add-ons, if available, will also be shown here.
- Payments page: With all the details verified, the user is taken to the payments page where the actual success of our product comes into play. The final cost, along with any available discounts, is shown here.
With this skeleton, I went ahead with the wireframing process.
Interaction Design
Once I arrived at the basic skeleton for the pages, I started adding the elements to those pages. Slowly, the pages began to come to life. Additionally, I incorporated a couple of extra pages during the interaction design phase. I also integrated the search and homepage, as it made sense from the user’s perspective to immediately engage upon landing on the homepage.
I designed the header, logo, body content, and footer for all the pages using the traditional pen and paper method. I took screenshots of them and added them to my project for review.
Interactive Prototype
From the wireframes, I did a mini low-fidelity prototyping. I designed the monochrome elements and placed them in the places where they were meant to be. Once I had them in place, I gradually started adding the actual elements. I gave them the colors, made high-quality elements, and started giving life to the wireframes I designed early. I designed various screen states to cover the whole booking process. I designed close to thirty-five screens with multiple components embedded.
As mentioned in the Information architecture, a user might take one of the many paths to traverse the given product. However, though those cases are handled in my design, I had the prototyping for the success path and not the failure path. Various error handlings were in place to prevent crucial failures.
Header Design
Footer Design
Homepage Banner
Date and place picker
Signup
Summary
User Review
Clear info banner with car details
Important info prioritized
Signup
Summary
Header Design
Homepage Banner
Date and place picker
User Review
Clear info banner with car details
Footer Design
Logo
Important info prioritized
Design Decisions
A few crucial design decisions I made on the way include,
- Automatically traversing to the return date and time once the user completes the departure date and time.
- Users cannot click on the search without filling in all the required details.
- The final price is shown well in advance before the payments page for the customer to understand the cost split up.
- High-quality images of cars are used.
- Primary CTA is clear on all the pages. No other element fights for competition on the same page.
- All terms and conditions are covered in the Summary page. No hidden agenda here!
- Proper navigation marks are present on the payments page for the user to understand how far he is yet to traverse before paying up.
- Also, the user can move back to the previous step with just a click without losing any information.
The input fields for the payments page are handled in such a way as to prevent mistakes.
- The date field is restricted to the MM/YYYY format.
- CVV number is only 3 fields long
- Credit/Debit Card number is split into a 4-digit format for easy recognition
- Placeholder text is in place for input fields to guide what sort of input is needed for each of the fields.
Figma
I was using Figma for this whole project and this gave me a big opportunity to learn the tools present within.
- I learned how to design the basic wireframes
- Learned how to use the basic shapes tool and the various boolean functions to arrive o the desired shape. Example – I designed the logo in Figma.
- I learned how to use the components and variables to minimize design duplications. Example – I used this technique for adding multiple car cards to the search page.
- Learned to organize the elements ab grouping them and creating various pages for components and libraries.
- Learned to design glass morphic effects based on transparency, inner shadows, and outer shadows.
- Learned how to animate elements and do complicated prototyping to mimic the workflow of the users.
- Learned the basics of ‘Smart animate’ so I could use it for some creative effects in the future.