Budget.com - Responsive Web Redesign Case Study

Video: Budget Redesigned Mobile Website Prototype

Overview

Timeline
One Two-Week Sprint
Platform

Responsive Website

(Mobile First)

My Role

UX Researcher

Design Lead

Tools

Figma

Sketch

InVision

This is a mobile-first responsive website redesign case study on Budget.com with a team of three. During the research, we found that users need a simplified booking process with an access point to eco-friendly options and a quick pick-up feature. We redesigned the flow and visual to improve current user experience and accessibility.

Methodology in Use

Research
Screener Survey
User Interview
Affinity Mapping
Persona Creation
User Journey Map
Ideation
Feature Prioritization
Design Studio
Paper/ Low-Fi Sketches
Design and Prototype
Mid-Fi Wireframes
High-Fi Prototype
Usability Testing
Style Guide Creation

Research & Analysis

We conducted contextual inquiry to observe how users currently interact with car rental booking process while sent out a screener survey to recruit those who rented a car before. We interviewed 5 of them to get additional data on their car rental experiences. By asking questions like “walk us through your last car rental experience”, “how do you decide on the car to rent”, etc., we discover the following problem area:

  • Users are frustrated with completing the long booking process on a small phone screen.
  • Users tend to pull out the confirmation on the phone during the pick-up but currently unavailable.
  • Users are concerned about environmental issues but don’t pay a lot of attention during traveling.

a persona of Budget.com user
Figure 1. Budget rental car user persona: Troy Petersons

Design Solutions

After digging into details and potential design solutions, we used the MOSCOW method to prioritize the 7 features/edits to ensure that we maximize the product improvement in a tight schedule. Three sessions of design studio were conducted and focused on the mobile web-flow, user input page, and result page, which were later translated into mid-fi wireframes to validate our design solution with users.

mid-fi wireframes
Figure 2. Mid-Fidelity Wireframes - Budget.com Redesign

We tested the redesigned booking process at mid-fidelity level design with 5 users with car rental experiences. The task is to book a car for a road trip returning to a different location. 5/5 users successfully booked the reservation with no difficulties.

Design Outcome

The final design followed the Budget.com branding style guide. The redesign improved not only the visual readability but also the ease of use of Budget.com. The new quick pick-up flow and simplified booking process were proved more useful and efficient by the users.

High-Fidelity mock up on iphone 8
Figure 3. Hi-Fi Prototype - Budget.com Mobile Website Redesign

We conducted 4 usability tests with users who had rented a car before on the tasks to book a car rental and pull out the reservation for pick-up. 4/4 users succeeded in the tasks and clicked on redesigned CTA buttons. Users commented that the QR Code for pick-up was convenient and couldn’t wait for the implementation in real life while the booking process was self-explanatory.

Feature Highlights

We developed a new flow dedicated to a smooth offline car rental experience while focused on simplifying the current booking process. The new eco-friendly feature was embedded throughout the booking process.

A New Flow

Besides the revised booking flow, we also created a new QR code pick-up flow to support users’ needs during pick-up. This redesign also implemented a driver help center as users mentioned their frustration of locating the rental car counter during pick-up and return.

a screen flow
Home Screen - New promotion, New Visuals

The new eco-friendly feature is promoted on the home screen background while the CTA button of the Pick-up feature was positioned in the center to provide this new flow to support users' offline needs.

highlighted screens - main flow
User Input Page - Less Effort, More Efficient

We used check boxes to replace less frequently used fields and combined the dates to provide a more efficient search while redesigned the visual to meet WCAG 2.0 guidelines.

highlighted screens - main flow
Result Page

The proposed redesign screen used iconography to provide essential information that users want to know upfront, which intended to reduce the number of clicking. The eco-friendly index was shown as color coded leaf icons, which was approved to attract users's attention during the usability tests.

highlighted screens - main flow
Payment Page

We grouped the long scrolling information into sections to minimize the user’s frustration of scrolling on a small screen. The promotion of going eco-friendly would appear on the payment page to reward and further encourage users who chose the eco-friendly options.

highlighted screens - main flow

Responsive Website: Desktop Mockup

The success from the usability testing result indicated that we could move forward from the mobile site to the desktop design to further support the user’s current behavior. Within the tight project timeline, we designed three main screens accordingly to reflect the edits on the flow and visual. These screens provided a visual reference for our developing team to work on and the live desktop website could be viewed here.

responsive desktop mockup
Figure 4. Responsive Website - Mobile vs. Desktop

What I Learned

We divided mid-fidelity screens within the group and found slight variations in elements position and icons size when converging the mid-fi designs. Though we were testing the functionality, users noticed those slight changes and commented them as distracting. I learned that it was important to set a brief style guide even at a mid-fidelity level to ensure design consistency and improve test results, which essentially saved time for the team.