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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.