Audi buy online

Case study

Client: Audi North America

Company: BIMM

Position: UX Lead Designer

Duration (design to delivery): 18 months

Product type: Responsive web

A crumb of context

Background:

When I commenced my role at BIMM, my inaugural project entailed crafting an e-commerce solution for Audi on their North American websites, aimed at bolstering their competitiveness and diversifying revenue streams. This endeavor commenced in the winter of 2021, coinciding with the ongoing disruptions caused by the pandemic.

Additionally, we navigated the challenges posed by a chip shortage impacting dealer inventories, prompting Audi to seize an opportunity to enable users to reserve vehicles in transit to North America. This project shows my strengths in managing complex user flows, orchestrating cross-team collaboration, and tackling diverse ecosystems, and serves as a testament to our ability to innovate even in challenging circumstances.

The Challenge:

Create an intuitive, iterative e-commerce MVP to reserve vehicles on the national Audi sites for the U.S. and Canada.

Why It Matters:

Engaging in this substantial Audi project was personally gratifying, as it suited my extensive e-commerce background. This project also marked a pivotal moment for Audi, representing their most significant ongoing project with global market implications. This would also be the only e-commerce touchpoint that Audi fully owns.

The UX process

At Bimm, the UX process played a pivotal role in shaping products from their inception. As soon as the product team defined their vision, our UX designers stepped in, embarking on a journey of discovery and project definition. This involved meticulously crafting detailed wireframes, annotating interactions, and curating UX copy, ensuring a holistic and user-centric approach.

When I first started this project, I had to catch up on some preliminary work that another UX Designer had started. This included:
- Creating ideal state user flows.
- Competitor analysis
- Mapping out requirements for the minimal viable product.
Given the streamlining of product requirements for an MVP, I undertook the task of updating the existing framework that predated my arrival. This comprehensive update encompassed:
- Crafting a streamlined user journey for the MVP.
- Outlining various integrations with various teams.
After the flow was solidified, I dove in to wireframing out a solution. This included:
- Designing in-depth wireframes which evolved throughout the project.
- Maintaining an active feedback loop with both internal and client stakeholders.
- Starting with mobile-first wireframes to ensure the complex flow would be easy to understand on any device.
I coordinated with our dedicated Design Researcher to create a wireframe prototype that we could use to get early feedback.

We have noticed a tendency for Audi fans to rate designs more highly than non-fans so we also opted to remove the Audi branding to make it more neutral and allow participants to focus on the flow without bias.
Using user feedback, I updated the wireframes to better meet expectations and smooth out pain points.

Also, there were somethings we had to remove based on updated business requirements, like our credit application and the payment page. Instead we would be integrating with other Audi teams that have existing designs for those.
After UI was completed, I created comprehensive annotations for interactions and tooltip copy.
As we were constantly receiving shifting feedback from various stakeholders, there were also many iterations in this stage. As a result there were months of iterations which consisted of myself and the UI Designer doing small design sprints to update the existing screens.

Unfortunately, many of the new requirements and constraints took us further and further from a user-centred design. And since there were so many tweaks, it ended up being something of a Frankenstein (‘s monster). We had a lot of very vocal stakeholders from many different parts of Audi, and although we stood up for our design choices often, we were frequently overruled.
This sometimes happens in design, although it’s regrettable and creates sub-par products, it does teach us resiliency, tenacity, and compromise.

Constraints and considerations

Technological

Integrations, such as Audi Financial Services, KBB, and myAudi, had strict guidelines and technical limitations that had to be adhered to.

User progress can only be saved after user is logged in to myAudi, which has a long and exhausting account creation flow. During testing this was a major hurdle for people but unfortunately that flow was owned by another team that we couldn’t influence.

Dealers

Designs had to be approved by the dealer council, which our team didn’t learn until 10 months into the project, which was after designs had been tested, finished, and development was already underway. This caused significant pivots, rework, and delayed our launch.

Dealers already had their own online buying tool integrations on their personal sites and therefore expected ours to be much more robust than the MVP we were planning to deliver.

Dealers were under no obligation to honour the user’s reservations, even with a deposit. Since the Dealers owned the car, they could sell it even if someone has “reserved” it online, which means the extensive buy online flow gives the user no guarantees that they will actually be able to buy this car.

Legal

All copy, layout, and interactions needed to approved by the Audi legal team, including all revisions, which slowed our review cycles.

Legal also provided disclaimers and some tool tip copy that needed to be integrated into the designs and could not be shortened or changed. During our user testing, participants have found the legal copy to be daunting and inaccessible, so it was unfortunate that we couldn’t compromise.

See the UX process

👀 👀 👀

See the UX process 👀 👀 👀

After UI Design

✨💅

After UI Design ✨💅

Desktop UI design of payment calculator and payment summary

Mobile UI design of 2nd trade-in assessment flow

What I could have done differently…

Focus more on setting user’s expectations

Considering our limitations, I feel like we could have done a better job setting the user’s expectations from the beginning. We tried to mitigate the gap between expectation and reality by including informational modals and an interstitial page before the myAudi log in, but it still didn’t communicate as much as we could have. Some ideas would have been an “I understand” checklist to communicate that reservations are not necessarily a guarantee.

Push harder for Dealer involvement earlier

I think that some of the Dealer pushback we received stemmed from their resentment of not being involved in the buy online tool from the beginning. The relationship between Audi and their Dealers can be competitive and it was something I was wholly ignorant of when I started at BIMM. If I were to start this project from scratch again, I would bring in the Dealers earlier so that we could incorporate their feedback and involve them as true stakeholders, which would help with design consistency and Dealer buy-in.

The launch 🚀

My wireframe on the left. Finished UI design on the right.

MVP Buy Online Launch

The MVP tool design work began in February 2021 and finally launched in March 2023. This was definitely the longest project I’ve worked on from conception to launch and the team was so relieved when we could finally release it.

We tested the end-to-end flow twice more before launch, incorporating user feedback where possible and it was great to see the user sentiments improve with each round.

The Results

The launch was very exciting and we were so happy to ship it, however due to the length of time before launch, the original purpose to help users during the pandemic/chip shortage was no longer applicable. We had some successful reservations but the numbers weren’t in line with what Audi was expecting.

The team is currently working on pivoting to offering this for in-stock vehicles and removing the deposit flow.

Unfortunately, I can’t link you to the live version as you need to create a myAudi account and place a deposit to access it, but here is the end-to-end desktop prototype as it was when it was launched.