AAA

AAA

Neuro lock screen image.

Challenge

How might we improve AAA's user experience by making it clear and more intuitive to use?

My Role

UX Design, Research, Interaction Design, Prototyping, Usability Testing, Ideation, Visual Design, and Research.

Year

2020

Timeline

2 Weeks

Tools

Figma, Origami Studio

Team

2 UX Designers

Roadside assist inquiry Screen Image

Roadside assist inquiry

Roadside service Image

Roadside service detail

Home screen Image

Home screen

Dispatch request Image

Dispatch request

Dispatch chat feature Image

Dispatch chat feature

Destination selection Image

Destination selection

01

Understand

Context

For this case study, I defined a number of constraints to work within, as well as a project scope. I also outlined goals, non-goals, and edge-cases that I wanted to think about throughout the process.

Problem Definition

Through firsthand observation, and interviews with real AAA users, a clear picture emerged of the rider's pain points. To name just a few:

  • Lacks assurance - long wait times between the dispatch and arrival with a primitive approach to locating and communicating with users.
  • Lacks convenience - users are not given full access to the dispatch driver for updates or an estimated time of arrival.
  • Unclear hierarchy - it's unclear what should be clicked on with a large amount of content to scan through.
  • Services not made prominent - main services are only shown once a user is making a request for roadside assistance.

From the problems identified above, I drew up a problem statement:

How might we improve AAA's user experience by making it clear and more intuitive to use?
Flow Chart Venn Diagram

Business problem

With uneasy navigation and poor communication, app usage and awareness of the business is low.

User problem

Navigating AAA's app is a visually exhausting experience and lacks communication.

Discovery

Discovery methods I relied on included interviews, a thorough audit of the app itself, competitor research, and user personas.

  • Cluttered interface - The layout of the app interface itself is cluttered and poorly organized.
  • Poor discoverability - Confusing UI choices hinder discoverability for important basic actions like knowing what AAA offers, and getting help or reporting an issue to the user's dispatcher.
  • Direct messaging - Instead of relying only on the phone call a user gets once the dispatcher is within a certain mileage, we could allow the user to direct message the driver. This can can close the gap on communication issues. Through competitive research, no companies have a feature like that.
  • Location detection - Users find uncertainty when they are not able to get a reliable estimated time of arrival. Through competitive research, no companies have a feature like that.
Existing app screenshots

An audit of the pre-existing app

02

Gain Confidence

Ideation

I sketched ideas for the the 3 major areas that would be a problem or useful for users, particularly for the persona of Travis and Chrissy. After brainstorming and sketching, I eliminated ideas that seemed impractical or out of scope.

Validate + Iterate

The ideas from my brainstorm and sketching fell into 5 broad directions. From there, I narrowed down to 3 most interesting, all of which focused on the native app:

  • Hand holding - One approach was heavier with hand-holding, giving focus and highlighting to each section.
  • Merged sections - Another direction combined steps and sections together for a faster run through.
  • Hybrid - A third approach was a hybrid of the other two.

We eventually settled on the Hybrid approach, which allowed for a helpful yet organized interface, using cards as a device to not only highlight sections but also grouping sections with a carousel for AAA's micro services.

I did some basic usability testing on it with people and they found it quite easy to understand.

Home dashboard screenshot

Home dashboard

Services screenshot

Services

Chat feature screenshot

Chat feature

A view of many screens of the apps

03

Polish

Finished Designs

Next, I moved on to UI Design. AAA brand colors consist of an apple-red color, so I used this as a primary call to action color for the app.

Maps are an inherently noisy surface, so I tried to minimize the visual noise in other areas of the interface, including the maps. This meant using white surfaces, clean, flat buttons, simple icons, and a minimal type-scale. Blue is used to highlight and brake up content, while red appears when an important action is about to occur.

Typography specifications

Navigation

When opening the app, you are confronted with waves of micro services/info, cluttering the page. We introduced a new home design that has hierarchy and organization by grouping information into a carousel. The user now can quickly find their way around without
being overwhelmed.

Main services

AAA's Roadside services can now be found in two locations, instead of after submitting your request. Now users can have a better understanding of the services and are more likely to use the app.

Gps tracking and time

After submitting your request, users can now monitor the time and location of the help unit. This will reduce the anxiety one may feel while waiting with no updates.

Chat feature

Now with the chat feature added, users can communicate more quickly and effectively.

04

Conclusion

Results

Any of the following outcomes would suggest that the design is successful:

  • More people are able to navigate the app with ease
  • More people find peace of mind knowing the exact ETA of the dispatcher
  • Communication is easier when sending updates via the chat feature
  • More people are aware of the services AAA offers

Reflection

This UX project was focused primarily on research. I worked with my partner to help facilitate the research and studies. The partnership gave me a healthy responsibility for gathering information and documenting it. This project taught me how agile UX can be, as we had iterations and research to look over constantly.

Isaac
Thomas