Portfolio > Web, Mobile UX/UI > Rethinking AAA.com

Case Study: Rethinking AAA.com

Steamlining navigation, adding visual queues, and simplifying page layout

Portfolio > Web, Mobile UX/UI > Rethinking AAA.com

Case Study: Rethinking AAA.com

Steamlining navigation, adding visual queues, and simplifying page layout

UX Process

UI Design

Prototyping

The Overview

Let me start by saying, I AAA.

I can't tell you how many times I've been stranded somewhere — battery dead, or in need of a tow — and thanked God I had Roadside Assistance!

I'm not only a AAA member, I have auto, property, and life insurance through them.

That said, as someone who's spent more than 25 years browsing, designing, and developing sites, my blood pressure goes up when I have to interact with AAA's website.

The Goal

Create a seemless web experience, simplified header and navigation, a single point of login for multiple administrative actions, and provide consistent content layout.

Details

Duration: 2 weeks

Focus
  • Information Architecture
  • Process Flow
  • Page Layout
  • Front End Development
Tools Used
  • Omnigraffle
  • Illustrator

Disclaimer: All product names, trademarks and registered trademarks are property of their respective owners. All company, product and service names are only for identification purposes.


Mapping Out The Navigation

At first glance the navigation seemed logically laid out...

AAA.com Navigational Structure

However, as I started listing out each of the sections/subsections of the navigation, I noticed a lot of crossover and repetition in the site structure.

I also found that a number of navigational items immediately launched an external site tab: AAA-related but not part of the main site; or another affiliated site altogether. Also some navigational items were simply anchors to content somewhere down on a page of the main site.

Multiple logins, redundant links, anchor points to somewhere, and spawned external tabs become a frustrating experience to navigate through all that AAA has to offer.

Mapping Out The Navigation

After mapping out the navigational menu, thoroughly logging duplicates, external references, and crossovers of each section/subsection, what I found was ...

  • 28 links to multiple external sites
  • 26 anchor links to internal pages
  • 5 links to logins for 4 separate sites
  • 5 links to Identity Theft Protection page
  • 4 links to Mexico Auto Insurance page
  • 4 links to the Auto Club App page
  • 4 links to Foreign Currency page
  • 4 links to Car Rentals page
  • An entire Travel subsection also appearing under Discounts
  • ... and more.
Identifying Redudancy, Anchor Points and External Tab Spawning
Review / Key Insights

It's The Web... It's ALL "Self Serve"

There are subsections of the navigation that reference "Self Serve". The issue is that a website's primary function is "self serve" in that no one else is there doing it for you.

All this may be an effort to distinguish what you can do online ("self service") versus what's offered at their branch offices ("full service"), but the labeling is confusing.

There's also an entire section of the navigation devoted to "Self Serve" (highlighted above in light gray). This section simply repeats links within the "Self Serve" subsections.

Another issue is that links in "Self Serve" subsections are not as much "do" as they are "teach". Some links are simply anchor points to say more about what you CAN "do" if you did it yourself.


To Click Or Not To Click

Although the labeling of subsections is nice when viewing the dropdown, the labels themselves can't be clicked on to go any main page of that subsection.

That wouldn't be a problem, except in a few instances, there are main pages that a user could browse.


In this example, when you arrive at the anchor point, the title is not only buried under the header, but it doesn't match what you've just clicked on.

"Drop Anchor(s)"

There's something annoying about being dropped into the middle of a page without knowing where you are, and then forgetting why you clicked on it in the first place.

It's also annoying when the anchor points don't properly account for the fixed header, so the title is under the header and you have no idea what you're reading.


One Login To Rule Them All

Granted, creating a single login point for four separate sites would be no small feat. But it would streamline the user's experience, not having to find then establish separate logins for Roadside Assistance membership vs. insurance policy holder vs. someone a AAA credit card holder.


Silly Rabbit, Apps Are For Mobile

There are no less than 4 links (not easily found) to a whole page devoted to downloading the AAA mobile app, along with a section at the bottom of the homepage.

The only problem is that I'm surfing the site on a laptop. Determining device breakpoints (screen widths) could automatically eliminate these from users who are not on their phone/tablet, introducing them only when certain breakpoints are reached.

The Revised Information Architecture

After removing duplicates, anchors, Self Serve, and separating out Branch Services, the revised IA lays out like this...

Identifying Redudancy, Anchor Point and External Tab Spawning

Of course this is my interpretation of how it should be restructured.

I would immediately set out to prototype this and perform usability testing to verify that a user could easier identify and perform the tasks the online services provide.

But it's easy to see — from a usability perspective — there is less clutter, easy points of entry to individual pages (no more anchors), and a deliniation between what is/was "self serve" and what are "branch services".

Competitive Analysis / Inspiration

Scouring the web for redesign solutions, I found one possibility in a AAA competitor...


There are a number of points to appreciate about the simplicity and clean look:

  • Every part of the navigation is a functional link.
  • There's plenty of line height between navigational items.
  • The navigation doesn't overlay the content, it eases the page content down.
  • There is a single, clearly marked and visually apparent point of login.
  • You could be 4 levels deep, and the breadcrumb clearly marks where you are in the site structure.
  • The breadcrumb is attached to the bottom of the navigational dropdown to maintain the visual queue.
The Results

The following is a side-by-side of the existing site and a conceptual redesign with an example of the revised information architecture.

Things to note are that the brand has been moved to the left (it's also slightly larger) decreasing the height of the masthead while, at the same time, opening up the space.

Also, in the second set of images, the revised Membership information architecture is shown, minus redundant links, and Branch Services brought to the main navigation.

I retained the internal marketing block in the navigation from the existing site.

Identifying Redudancy, Anchor Point and External Tab Spawning
Identifying Redudancy, Anchor Point and External Tab Spawning
Identifying Redudancy, Anchor Point and External Tab Spawning
Identifying Redudancy, Anchor Point and External Tab Spawning

This is an example of a landing page, showing the breadcrumb located below the masthead.

Note the branding could actually go larger with minimal adjustment to the Calls-to-Action or navigation to the right.

Identifying Redudancy, Anchor Point and External Tab Spawning

Below is an example of how affiliated external sites could appear as part of the main site.

Using a fixed header with a loaded iframe below it would allow the user to interact with the external site content, prevent spawning tabs, and maintain consistent navigation to the rest of the site.

Some tracking of the user's browser history may be necessary to provide a means for them to use their Back button (still the most used button on the web), but it will make for a quicker engagement and less confusion.

Identifying Redudancy, Anchor Point and External Tab Spawning
MFA AND SSO FOR LOGIN

Login and account management across multiple sites could be addressed using Multifactor Authentication (MFA) and Single Sign-On (SSO) technology.

Now I'm no expert on these technologies, but a quick read revealed the business and user benefits: combining MFA and SSO represents the next evolution of online fraud protection and identity intelligence; one that can easily be strengthened by other security measures such as behavioral monitoring and analytics.

And while the use of MFA adds to login security, it could also fill gaps or lapses in account information by verifying/updating current points of contact such as phone number, email, etc.

Below is a flow process showing how SSO Authentication can provide a single point of sign in, simplifying the customer experience as well as reducing database administration costs.

SSO Authentication Process
  1. The user visits the target domain.
  2. The user is redirected to the SSO domain.
  3. The user signs in with their credentials and the SSO domain finds a match.
  4. The SSO tool requests an encrypted token from the authentication server.
  5. The user is redirected back to the target domain.
  6. The encrypted proves that they’ve been authenticated.
  7. The user can now freely access associated domains, also.


When I revisit this, I plan to come up with a visual mockup of a revised login incorporating these above processes.

Conclusion / Reflection

A more consistent, streamlined experience

This exercise really only addresses the "external" workings of the site. There are still numerous issues to address in terms of the consistency of account management. For the sake of AAA's IP, I won't expound.

There are benefits to creating a simpler experience for the user. The average user may only sift through so many lists to find what they're looking for before having to contact someone for help.

As call center costs will only increase, it makes sense to maintain simple navigation, and establish easy-to-use interactions that make the user's experience more satisfying.