Audi Inventory Page

Insight:

While conducting a site wide audit for Audi’s North American websites, I came across the Inventory page. It is one of the first stages of a buying process that the users encounter. Coming from the homepage, the Inventory page’s design seemed to be visually lacking compared to other pages. Upon further investigation, I came across several issues that not only visually affected the page but also the user experience. I wanted to improve the visual and improve the user's experience significantly. In order to understand how I could solve this problem, I collaborated with the UI lead, UX lead and a small team of UI and UX designers.

Solution:

Improve the visuals, updating the page with design system used across other pages on the site, creating components where required. Introduce convenience to site users by implementing a robust inventory page, improving the user flow on the page by introducing updated vehicle cards, interior/exterior images and a uninterrupted filter experience.

Challenges

The timeline is limited based on client and business needs. To create an experience that Audi users expect from the brand which is reflected in the vehicles. The product must meet pre-established design guidelines set by Audi while improving the overall design, adhering to existing design systems and components

Usability audit

When we began, users were able to already view the inventory and select filters, but the page was lacking features that would ease the user’s journey and reinforce their buying decision. It created a hindered experience and increased the drop-off rate.
From a UI and UX perspective we were able to pinpoint several inconsistencies that the page had. Some of the pain points were:

Page has outdated design compared to the rest of the site
Components are either not in the design system or older version.
Drop shadow usage which is not part of the design system
White space issues
Badges look like button and disabled buttons
Bottom of the card which looks like a button lacks click area
Info icons popup into full modal disrupting user flow
Notice is not dismissible

Findings & research

In order to understand the problem better, I viewed the Usability testing sessions that were conducted by the Research teams, I brainstormed with the UI lead and Research lead for insight into how users have reacted in previous tests of the page as well as current ones. Some of my findings were:
- Users would often confuse the "Available Now" badge for a button and try to click it.
- There was excess of white space above the car images
- The info icons would confuse them and in order to filter their selection they have to scroll to the top where they are presented with a filter modal breaking their user flow.
- In order to make changes to their selection, users have to scroll to the top of the page where the Filter tab expands into a full screen modal and save changes to reflect their choices.

Once I had a better understanding of the pain points, I set out to

Understand current and potential user targets and empathizing:
- A user looking to purchase an Audi vehicle specifically
- A user looking to purchase a luxury vehicle regardless of make
- A user looking to compare vehicle inventory on websites

Planning & Strategy

I noted down the user problems, the findings, and the existing user flow in order to determine how to improve the experience and fill gaps within the page to an experience users are familiar with on other vehicle inventory pages and similar e-commerece websites.

In order to understand the vehicle inventory page better, I conducted competitive audits to understand the gain points, pain points, what we can do better and how we could fill the gaps in our inventory page itself.

Direct competitors

Mercedes
Tesla
BMW
Volvo/Polestar
Autotrader.ca

Indirect e-commerce competitors

Ikea
Amazon
Wayfair

Creation & execution

After conducting the competitor analysis on various other brands, and with input from the Lead Researcher, user-testing archives and help from the UX designer, we moved into the wire framing stage, collaborating on multiple concepts and prototypes, we were able to establish a final structure.

1. Filter tab access

The filter tab now lives besides the inventory cards for easier access and updates instantly without a CTA.

2. Inventory card

An updated design of the inventory card based on the current design system, with scrollable interior/exterior images, a clear CTA and badge to notify inventory availability as well as options to compare cars and moving the dealer name to the top of the card.

3. Independent scrollablity

To reduce having to scroll back to the top to make changes to their preferences, I made the scrolling for the filter independent from that of the inventory card section.

Final designs

This is my favourite part. Designing the UI, the components, design system and putting together all the ideas that we came up in the previous stage of this design process.

Here's a link for the interactive prototype: Audi Inventory page

Key design attributes:

Dismissible notice
Redesigned inventory card
Updated and collapsible filter section
Redesigned Inventory card
Comparison feature
Persistant filter tab

(Scroll to view)

Responsive design for various breakpoints - Desktop, Small desktop, tablet & mobile.

Some of the design system components I used and created for the Inventory page.

Old vs New

While conducting a site wide audit for Audi’s North American websites, I came across the Inventory Page.

Notice card:

Old

The notice is not dismissible and it takes up valuable real estate on the page.

New

Notice is dismissible, visual cue to get the users attention, takes up lesser space and does not repeat if the user is revisiting the page.

Filter tab:

The filter tab was one of my biggest gripes with this page. It is spread across the page, taking up valuable real estate again, the clear filter buttons were away from the tags and the hierarchy was incorrect. Along with the scroll up required to access it every time the user wanted to make any changes in their selections. I redesigned the filter tab to reflect the light mode, moved the location selector inside it for convince and updated the tab width using layout grids so that it would reorder the inventory cards without blocking them completely.

Old

The user has to scroll back up to the top of the page, the filter tab opens with an overlay which is in dark mode, and manually save changes using the CTA thus breaking the user flow.

New

In the redesign, the filter section stays persistent and the user can open the filter make real time changes while still browsing the inventory alongside.
‍

Inventory card:

The inventory card is another major component of the page which was redesigned based on data from user tests of various pages which would start from the inventory page. The redesign includes a clear hierarchy for the vehicle such as the dealership location (which populates from the modal they enter their postcode), followed by the vehicle image and then the details such as the model name, trimline along with a info icon to educate the user of the the name, followed by the cost of the vehicle and a clear CTA rather the previous design where the entire card was clickable.

Old

The card utilizes older design system components (fonts, drop shadow, icons) and the badge was easily confused as a button. The info icons would also popup into a seperate modal. Excessive whitespace above the vehicle.

New

Updated with design system components and the redesigned card features a distinct availability badge, clear actionable items - Compare, chevrons to view interior/exterior preview in the card itself and a distinct CTA.

How can we validate the design?

User Perspective:

Users responses could be tested out with the existing and redesigned Inventory page via a structured usability test to gather qualitative data about their experience.

Business Perspective:

Audi & BIMM could collect data on user dropoff rates for the page in its existing state vs the new state. This would validate the redesign from a business perspective by measuring whether it was resulting in more leads, and eventually, more sales.

What I would do next time

Although I was able to participate in some user testing and recorded sessions, I would have loved to see the user testing for the before and after redesign, ensure the design was meeting business and user needs, and to be able to advocate for the user in client meetings using actual feedback from the users.

That being said, this project was able to pinpoint a lot of user pain points, creating tickets for a future redesign and the components would be implemented in other sections of the website. I handed over the project to the design team, hoping to see these design implementations soon!