blueBackground.png

Audi

Mobile Wash

Role:
Independent portfolio project with support from Azmir Saliefendic

Tools:
Evernote, sketching, Draw.io, Adobe XD, Sketch, Keynote, Research, Persona, Wireframes, Flows, Annotations

 

Overview

A UX manager at VW Group presented me with a challenge:

Study the user experience of a vehicle you have access to and propose a way to improve it.

That eventually turned into:

Design a service for customers that improves the ownership experience and provides greater value. Design it for a 2020 launch in North America.

I started this project primarily to learn UX design fundamentals and how to solve a declared problem, with support. The following detailed case study shows how I identified a customer, found one of their problems, analyzed the problem, and worked through the challenges of creating a proposed solution. The result is an Adobe XD prototype of the new user booking flow.

 
prototypeMockupImage.jpg
 
 

01. CHOOSING A DIRECTION

 

The Question: How do I approach creating new services to improve a vehicle ownership experience—attracting new customers and keeping a brand relevant to existing customers?

 

Who am I designing for?

How can I provide value to current and future Audi owners? To learn about the customer, I read SQ5 reviews, combed through Audi forums, and spoke with two owners. I found that buyers cover a wide range of ages and characteristics. I chose to focus on the most likely buyer, the 35 year-old male professional. He was old enough to afford it, and young enough to desire its sporty styling and performance. I then took the research, added some assumptions, and shaped them into a lightweight persona.

 

Which Problem Should I Solve?

Which of Matt’s vehicle-related problems, if alleviated, would make the greatest improvement to his life? To find out, I first made a comprehensive list of problems with vehicles. Based on Matt’s need for clarity, I believed that reducing the responsibility and pain of vehicle ownership would give him the most value. I explored two major paint points, infotainment and maintenance, but couldn’t make a strong business case for improving either one. Azmir then refocused my search on services that could solve vehicle problems. I looked into the problems of refueling, picking up food, and parking; common problems where a service could save owners time and effort.

One problem took more time, was more unpleasant, and had the most potential to fix with a service, the car wash. I chose to improve the car wash with a digital experience because it is:

  • Universal - every vehicle owner washes their vehicle

  • Most time-consuming - requires more time over the vehicle’s useful life than most other vehicle-related responsibilities

  • Most unpleasant - the car wash is loud, requires public tipping, has a gift-shop gauntlet to run, too many services to choose from

  • Often Ineffective - washes always leave some dirt or water behind and wash brushes scratch paint

  • Requires special knowledge - most people don’t spend the time to figure out what treatments their vehicle needs and when

 

02. EXPLORING CHOSEN DIRECTION

 

Key Decisions

What attributes does a car wash service need to give its users time and peace of mind? Designing a great experience started with making decisions about what form the service would take. Before I could begin sketching out wireframes, I had to decide what form this service should take. First, I asked questions such as, “Where would the wash take place?” and “Who would own and operate this service?” For each question, I researched several possible answers and chose the one that served Matt’s needs best.

The basics:

  • Location: Performed anywhere (mobile service)

  • Business Arrangement: New company (run by Audi dealers)

  • Booking Medium: Mobile app

  • Number of apps: One (all-in-one)

 

Competitor Analysis

If the car wash service is accessed through an all-in-one app for Audi owners, what would this app look like? To determine the app’s goal and functionality, I researched existing auto-owner apps. First, I audited Audi’s current app. Its user experience and functions did not serve Matt’s needs, so I decided to design the app from scratch. Next, I analyzed every auto-owner app in Apple’s app store. I chose six to study further: Audi’s app, two of Audi’s competitors, and three top performers. I took notes on the functionality and feedback of each and then turned my notes into instructions on what to build.

 

03. DESIGNING A SOLUTION

 

Flow Development

If the user’s goal is to keep their car clean with less time and effort, what path does that best? I started by listing all tasks related to a mobile car wash, such as: placing an order, viewing order details, learning about services offered, and requesting help. I grouped related tasks together, formed those groups into process steps, and turned process steps into screens. I then refined the screens in rounds, each time adding more detail and trying new arrangements. Eventually, I moved over to the computer, where I could save time by reusing components and could work to actual scale. I made rough flows with the tool draw.io, then made more detailed designs in Adobe XD. There were two main flows: one for new users booking their first wash, and one for returning users looking to bypass repetitive steps. Once complete, I made a version of the flows designed to be read at-a-glance, with labels and call-outs identifying key elements.

 

Screen Development

Users need one place to view or take actions related to their order. This can involve a lot of information, so how do I find the right balance between clarity and usefulness? I started developing the “My Order” screen by listing every detail and potential action related to a wash order. Over several rounds, I turned the list into groups, groups into tiles on a screen, and then added details to each tile. After working through the major challenges on paper, I built the draft in Adobe XD. For consistency, I reused what I could from other screens, then built any remaining components from scratch. I then iterated on the screen’s content, layout, and section dividers until reaching a lean draft.

Final Draft

Screen Shot 2018-09-05 at 11.47.00 AM.png
  • Order Identifier - order distinguished by date and time placed rather than number

  • Status bar - shows current step in wash process and info icon links to description of each step

  • Change vs. Edit - "Edit" means "prepare for publication by correcting (before submission). "Change" means to "make different" (after submission). Here, the order has already been submitted, so the correct term is "change."

  • Notes for Detailer - this is where customers can leave notes for their detailer

  • Cancel Order - here the button is just below order details, close to the content it affects

  • Section Dividers - used single dark lines because they are compact and easy to process


 

Edge Case Exploration

After completing a basic flow of the booking process, Azmir challenged me to address a few edge cases: “What happens if my credit card expires? What happens if you wish to validate my card?” I first worked to understand these problems through questioning, brainstorming, and sketching. Then I did research to learn how to design payment-related screens. I gathered and analyzed images of payment screen designs and read articles about how to create them. The final article helped most. It showed me a thorough ideation process used to design a credit card form. It reduced the form to elements, created several versions of each, evaluated them, and explained the final selection. This process made me trust their decisions and appeared to make decision-making easier, so I then used it myself. With each part of the process explored, I used Adobe XD to build and refine final versions of these screens and flows.

 

Annotated Wireframes

With wireframes complete, Azmir suggested I make annotations to communicate more relevant details about them. wireframes to communicate more relevant details about them. I first researched images of annotated wireframes to find best practices, what worked well, and what didn’t work. I then read about what annotated wireframes should accomplish and what’s required to make them successful. I used bits and pieces of these findings to create a template that fit the needs of my specific project.

 

04. CONCLUSION

 

Lessons

The most valuable part of this project was developing a problem-solving process. I found a repeatable set of steps to take a big problem, break it down into smaller parts, solve them, and end up far beyond what I could envision at the start.

I also learned that it is difficult to serve users without data on what they need or clearly defined goals. In the future, I can use surveys, user interviews, and user research to collect data on user needs. I will then use the data to make specific and measurable goals, to clearly determine which solutions fit, and among them, which solution fits best.

 

Next Steps

The end goal is to improve the Audi ownership experience with a digital service. The current version needs more detail, feedback from real users, flows for the service provider’s experience, and exploration of how the service can provide new value once established. 

Complete User’s Experience

  • Draft remaining screens - fill all holes in the basic booking process, creating screens for: adding new vehicles, editing vehicle info, and seeing more information about wash packages.

  • Create shortcuts - Repeat users need a faster booking path. Ideally, washes would be on autopilot, with Audi would figure out what treatments are needed and when. Work towards that by first adding shortcuts to booking process.

Validate App

  • Conduct user research - watch potential users interact with the concept to find out if it has potential, and if it does, how it can be refined to better serve users.

Design Employee Experience

  • Design wash process - determine how detailers would learn about jobs to do, navigate to them, perform the wash, and leave.

  • Detailer’s app - design app to give detailers the info and tools they need to successfully complete a wash.

  • Dealer’s portal - what does the dealer need to know and do? What tool would they use and how would it work?

Design Phase Two

  • Services beyond detailing - Once the basic wash process is sound, explore ways for the detailer to provide additional value to the user. Detailers could support users by answering questions, ensuring satisfaction with the vehicle. They could recommend Audi accessories that align with how owners use their vehicles. Detailers could also collect data on vehicles to help Audi design products and services that serve customers better.

 


Audi Mobile Wash

John Hietter

Let’s talk - j.hietter@yahoo.com