Going Eco-Friendly Car Rental at Budget.com- a UX Responsive Web Redesign Case Study
Overview:
I was working in a team of three for this redesign responsive web project. Our team’s client is the rental car company- Budget.com. We applied a three-phased approach, which included user research, design exploration, and refinement.
My Role:
In this responsive website redesign for the Budget.com project, I was the UX researcher together with the other two team members and the Design Lead of the team. I conducted user interviews, and participate in data synthesis and persona building as a UX researcher. As the design lead, I initiated a mid-fi and high-fi prototype, set the style guide and insured the cross-platform design consistency.
Phase 1: User Research
Screener Survey & User Interviews
We first set up a screener survey consisting of 7 questions to find the right people to interview. Out of 18 responses we collected, there were four potential interviewees who covered a wide age range from under 25 to over 60 living in different residential areas (city/suburban/rural) and had previous self-booked car rental experiences. We intended to interview people from different backgrounds to learn their pain-points and preferences during the car rental process.
During the user interviews, we asked users more about their car rental process in detail, from booking online to actual pick-up/drop-off experiences. Besides getting to know users’ booking experience, preferences and travel style, and their offline experiences, we also asked users what they cared about on a social level and how this may or may not affect their travel booking. We foresaw a potential area of improvement and aimed to add a social conscientiousness feature.
Insights from Affinity Mapping
By synthesizing raw data directly from our user interviews, we got 8 insightful statements from the users.
- “I like to minimize human interaction during the rental process.”
- “I want the best value.”
- “I want to feel comfortable while driving.”
- “I value safety and security.”
- “I’m concerned about the environment, but less so when traveling.”
- “I wish pick-up/drop-off locations were easier to find.”
- “I am usually rent cars with someone I care about.”
- “I care about others’ quality of life.”
From the user interview, we found out that users were struggling with pick-up and drop-off in-person experiences. While looking for their car rental, they were looking for the best value for a comfortable, safe car. A noticeable point
Persona & Journey Map
After aggregating insights from the user interview, we put together a persona, Troy Peterson. Based on the persona and scenario, we create a journey map of Troy Peterson booking a car rental for his two-week vacation.
Problem Statement
Troy has booked a car according to his preferences using budget.com on his laptop. The planning and booking process was relatively easy comparing to the confusing and tedious transactions during pick-up and drop-off.
How might we make Troy’s experience at the pick-up and drop-off locations quicker and easier to navigate, and further ease the difficulty of booking car rental using the website on his mobile phone?
Usability Test on Current Website
As our users were using mobile devices to view reservation and browse car rental for booking, we decided to focus on the mobile website first. We conducted two usability tests with 3 users on the current mobile site to find out the potential areas of improvement. The useful insights from two tasks on the current site are below.
Usability Testing Task 1: Find a car rental at Budget.com
Score: Minor Problem
3/3 users completed the task successfully, with some frustration.
Users were able to fill in their information and continue to the next page. However, users got frustrated with how long it took to enter their information and how many things they had to click through. The filter function is not useful where it is currently embedded.
“I don’t even know what this ‘discount & options’ would tell me. Never thought that could possibly a filter thing…”
Usability Testing Task 2: Determine the car you want
Score: Minor Problem
“These pop-ups are annoying since they keep covering where I want to click”
3/3 users completed the task successfully, with mild frustrations.
Users were able to quickly get a clear sense of their options. As on the user input screen, however, aggressive use of promotional pop-ups greatly hindered ease of use. Users seemed a bit overwhelmed by the extent and lack of organization of the default results, yet did not notice the sort and filter functions near the top of the page.
Phase 2: Design Exploration
Feature Prioritization
Design Studio — Ideating and Sketching
Learning from our users’ needs and their current website frustrating experiences, we started with sketching out potential redesign layouts on paper. This design studio focused on two main pages, which were the user input page and results page. On this one-hour ideating and sketching process, we brainstormed ideas, sketching multiple layouts, pitching our design to each other, and converging our best thoughts.
Mid-Fidelity Wireframe
Mid-Fi Usability Test
We conducted a round of usability tests on the Mid-Fi wireframe with 5 users. This round of usability tests was testing on the functionality before going deeper into the design and visual aesthetic. A scenario and a task were included.
Scenario: You are planning for your one-week vacation and you find that having a car to drive around Miami, Fl would be more convenient.
Task: Book your car rental.
Score: Minor Problem
5/5 users completed the task successfully.
2/5 Users did not notice the Sort and Filter functions provided.
“I know what the inside of a car looks like, I didn’t need to swipe here.”
“I like all this info clearly displayed here.”
Phase 3: Refinement
During the refinement phase, I took the lead of the interface design. We fully designed the high-fidelity mobile website prototype and translate three main pages into desktop design as well.
High-Fidelity Prototype
From a successful mid-fi wireframes usability test, we moved to high-fidelity design. We implanted the budget.com branding color and typography into our mockup. We collaborated in Figma and succeeded in accomplishing a user-friendly redesign.
We achieved a perfect usability score from our users, though there was still room for further improvement. We moved to three desktop design and collaboration with software engineering cohort to realize the responsive web redesign. Moreover, our team delivered a full presentation of this redesign and I took the lead on explaining the design decision and walking through the prototype.
Next Steps
- Provide more clarity for the “eco-friendly rating” leaf icon.
2. Provide onboarding for the new check-in feature — i.e. Scanning QR code, how this will speed up car pick-up.
3. Further prototype by building out the checkout process once the car payment method is selected.
4. Further redesign and prototype on the responsive website on the desktop.
5. Work with Budget to integrate the QR code into the pick-up, and build the Driver Help Center options into current practices.
