Whilst working as the Senior Product Designer at Avis Budget Group I was responsible for the design of all the digital products across multiple brands. In this example, I am specifically talking about the Avis website booking flow redesign.
The Avis booking flow was outdated and was a poor user experience. The task was to design a better booking flow with higher conversion and less drop-off whilst also supporting the other designers in the team with feedback and guidance.
My Role
- Senior Product Deisgner
- UI Design
- UX Design
- Testing
- Research
Avis Booking Flow Redesign
I joined Avis in 2019 as their Senior Digital Product Designer. One of the many projects I worked on was the redesign of their booking flow both from a UI and UX perspective on their website.
UI
A new modern UI design and aesthetic were applied to the tool to bring the website up to date with current design trends.
The UI is simple and easy to navigate with larger CTA’s a reduction of unnecessary information and plenty of white space for breathing room.
UX
A huge amount of time was invested in getting the User Experience of the new booking flow right. The user-centric design was applied when considering the goals of our users. Layouts, language and CTA’s were researched and tested over and over using multiple UX research and testing techniques.
The live design is still tested and improved using live data from our in-depth built-in analytics tools to constantly improve and refine the booking flow to result in the most car hire bookings as well as make the User Experience stress-free and enjoyable.
Before
Out of date, dark UI. Too many clickable elements and messaging. Users found this UI confusing and overwhelming.
After
Cleaner more modern UI with lots of white space. More content appears above the fold and a reduction in options in the top nav as not to overwhelm users.
More UI above the fold
Booking Widget
Clean Home Page
A cleaner home page design with a new booking widget which is now positioned to the right allowing for marketing messages to be displayed left of the screen.
A cleaner, more modern aesthetic.
Choose your Vehicle
A new results screen with a step tracker that enables users to know where they are within the booking journey as well as modify their booking at any point in the flow whereas previously they would have had to start the booking journey again.
Clean UI utilising cards to display results.
Step tracker to give user informationa about where they are within the booking journey. Step tracker also allows customers to change their booking from anywhere within the journey whereas previously they would have to start the entire booking flow again.
Available car results. Results are displayed as cards in three columns but we have found that list views can sometimes perform better as more result appear above the fold.
Three cover options where standard cover is free. Free cover is selected by default and styled differently to encourage customers to upgrade their level of coverage.
Select your level of Cover
Avis cover packages are available in three levels. Standard, Vehicle Cover and Cover Plus. Standard cover is free and available by default so is styled differently. The other two packages are optional upgrades.
Add your Extras
Extras/Ancillaries are one of the most profitable revenue streams in car hire. Having an effective and thoroughly tested UI that increases conversion is paramount to the success of a car hire business.
Extras that are only available individually have a CTA to add to your booking.
Extras that can be added multiple times have a quantity selector. The different UI styles are intentional and performed well in both pre and post lauch testing.
Step tracker UI transforms into a booking summary.
Clean form fields with plenty of white space.
Complete your Booking
Step tracker UI transforms into a booking summary sharing the same layout and information for clarity around what the user has selected during the booking flow.
Clean form fields with plenty of white space broken down into categories for easy form completion and avoid overwhelming the user
The Atomic Design System
The Avis website and all other projects at Avis Budget Group have an Atomic Design System where Components are made from Molecules and Atoms.
This ensures the design is efficient, consistent and accurate even when multiple designers are working on Avis projects.
The Pattern Library
The Pattern Library is another important tool as part of the bigger Design System we have built at Avis Budget Group.
The Pattern Library similar to the Atomic Design System shares the same principles but is a tool for development rather than design. Each component in the Pattern Library has already been coded up and can be copied and pasted to build out pages on the website.
Components available in the Pattern Library
The configuration of the componet. These settings allow you to show and hide elements as required. The code is updated below.
You can adjust the settings of the Pattern Library as well as change the brand from Avis to Budget for example. All Avis Budget Group brands have their own styles and the Pattern Library supports them all as well as partner brands such as British Airways.
The code. Developers can copy and paste this code when building out webpages. When designing new pages we try and use as many pre existing elements from the design system to reduce developement time. When new components are needed we can add them to the pattern library to be shared across all brands.
Thi is the actual component. This is a live component made from code based on designs in the Atomic Design System. This component can be added into any Avis Budget Group site and be styled based on the appropriate brand.