audi-wallpaper-hd-38572-1200014.jpg

Audi of America (Reservation Platform)

 

Audi Reservation Platform

Redesigning the Audi enthusiast’s reservation experience.


Role

UX Research + Design

Time

8 months

Tools

Sketch, Invision, JIRA, Abstract


Overview

Audi wanted to redesign their reservation experience. The Audi Reservation Platform allows users to reserve a new model, and then track the progress of their reservation from the time of the deposit, to the time it is ready to be picked up from the dealer.

The Challenge

Redesign the reservation experience.

Business Goals

One of the goals in the redesign of the reservation platform was to add an additional “inventory match” experience. During the last launch of the e-tron, the business found themselves with a number of cancelled reservations, resulting in a surplus of inventory. This inventory was manually matched with existing reservations (that did not have cars already being built in the pipeline).

For the launch of the 2020 RS7, the business wants to allow the customers to browse through inventory that is already in the pipeline, instead of only being offered a custom build.

The Process

As a UX Designer, I was a part of the discovery team (Scrum Master, Product Owner, Solutions Architect), and worked with the delivery team (UI Designer, Front-end + Back-end Developers, QA) to redesign the Audi Reservation Experience, and additionally, add an inventory match feature.

UX Responsibilities

  • UX takes Domain Specifications and conducts research on progressive solutions

  • UX generates a wireframe(s) for each scenario

  • UX reviews wireframes with “Three Amigos” to make sure all acceptance criteria is met

  • Additional Domain Specifications are developed as part of refinement for UX

  • UX is reviewed with any Subject Matter Experts (Business, Legal, or IT-Sec)

  • UX refines wireframes

  • UX generates prototypes for testing

  • Conduct User Testing

  • UX finalizes wireframes & delivers to UI Designer


Research

Heuristic Evaluation

With the discovery team, we analyzed the legacy reservation experience, to understand the pain points of the current design, and needs for the redesign.

screencapture-qa-audiusa-myaudi-overview-reservation-2019-09-19-13_25_43.png
Screen Shot 2020-02-14 at 7.19.00 PM.png

User Insights

Legacy ARP Data Research

I worked with a digital data analyst in order to research data detailing what users were clicking on in the legacy reservation platform. This data helped me to design avoiding information overload, and understand what is users actually find to be important in this experience.

Reservation Overview

Below is the data related to the e-tron timeline. ​31%​ of the page views to the reservation page generated a click on the timeline. The timeline builds level of engagement as users wait for the reservation to be delivered.

image004.jpg
image005.jpg
image002 (2).jpg

Reservation Resources / Reservation Details

About ​11%​ of myAudi Reservation PVs went to the resources page (12,146 PVs). Once they got to resources page, below is a list of what they clicked on or utilization. The majority of the clicks focused on the FAQs, with the checklist getting ​3%​ of the click activity on that page. Considering the FAQs were below the checklist link, users may not have understood value of that checklist link on the page.

image009.jpg

Ideation

Design Principles

Designing for Reusability

One of our agency’s core goals across workstreams was if we had to create a new component because it did not exist yet in our design system, we would strive to create components that are reusable.

The legacy reservation platform used a “battery” as the tracker, as it was for the e-tron (electric car). For the redesign, we wanted to make sure that we would use a design that could be used for any future model, and even for other “tracking” experiences on other parts of the digital business.

Working Across Brands

Additionally, we worked across brands with the Volkswagon team, who were simultaneously creating their own reservation platform, to develop components such as the reservation tracker in order to share engineering resources, as well as allude to some cohesiveness across the two brands.

Screen Shot 2020-02-17 at 12.44.10 PM.png

Working Across Workstreams

Another workstream was working on designing these cards for the inventory page, but were far from development. Luckily, we were able to utilize these cards and adapt them to our needs. This was a huge help in cutting down our LOE (level of effort), and our team was able to develop a card that would be reused by other teams.

Using Design Systems for Brand Consistency

There were instances when we needed to create new components because nothing had been built yet that met our needs, but many times our design and development processes were accelerated by the use of our existing design system, style guides, and component libraries.

We utilized an extensive design kit with our grids, spacing standards, typography, form fields, icons, etc.

Designing Across Breakpoints

Every component was designed across 5 breakpoints: 375, 768, 1024, 1440, 1920. These breakpoints include grid and spacing. Doing these designs facilitates smooth developer handoff, as well as maintaining UX principles across various screen sizes.

Concept Development

Reservation Overview

User Testing

We found many benefits to working across workstreams and brands including sharing of engineering resources and design systems. During this project, we were also fortunate to be able to share user testing results, since Volkswagon was developing a very similar experience. We utilized these results to finalize our own designs.

Wireframes

Reservation Overview

rs7.png

Inventory Match

Example of a component proposal

Timer UX Proposal.png

User Testing

After wireframing, we ran a 5 user, 2 question test to get feedback on the design of the overall interface, as well as the functionality of the “View More” component.


The Final Product

Reservation Overview

Tracker

Inventory Match

Stage

Location

Filter

Card


Results & Key Takeaways

Collaboration across workstreams & Sharing resources

One of the biggest takeways from this project was the need for collaboration across worksteams. There are several moving parts across our workstreams and in order to maximize everyone’s work and effort, we found it extremely important to keep in consistent communication about what everyone was working on. We often found that two teams were tasked to create or were in need of the same component for their projects.

Working in Agile & Including engineering team early and often

During this project, we found that working in agile was beneficial to us in making our team easily adapt to changes stemming from issues in business, production, etc. For example, we came across an issue where the color swatches on our inventory cards were returning on the back end as circle swatches instead of the design rectangular ones. For our first set deadline, we decided to omit the swatches for MVP. Then, when the deadline changed, we decided to keep the swatches and redesign them as circles. Later on, we found a resource that would be able to work on fixing the issue so that we can keep the swatches as rectangles. These constant changes forced us to be adaptable in agile, as well as clearly keep in communication with the engineering team about the changes in the designs.