Ux Design
AAA Connect Suite


The Connect Suite is AAA’s internal system that aims to connect varying lines of service and transactions. The suite’s objective to provide an all inclusive hub for 5 points of operation- search, intake, sales, membership, and service. In the past the suite was used to service solely the internal staff, however with Covid, the business saw an opportunity to support new enhancements to the system, moving to support 90% internal operations, and creating new functionality to the system with 10% supporting customer self-service.

System Interactive Prototype


The biggest challenge of this project was that due to the global pandemic majority of AAA branches were shut down, making user research difficult to accumulate. In addition, my only opportunity to speak with stakeholders was once a month making it hard to pin point important features.


The goal of the redesign for the Connect Suite was to increase customers experiences, make internal staff’s lives easier to assist members faster, increase sales, and retain customers.


The objective of the Connect Suite would support the goals by enhancing the features offered within the suite, connecting each of the hubs into one centralized portal, and offering consumers the ability of a more self servicing experience.

Day One

Getting Started with this project, with little insight and no opportunity to conduct research, my manager gives me my first task: Create wireframes of how you think the app should work. He shared with me two things: The product was going to be a redesign of what Is currently being used within branches today, and that the product would holistically consider the 5 points of operations- sales, membership, service, search, and CRM.

Ux Investigator

At first I questioned this tactic, as it was not a conventional ask to design something without understanding the audience, the users needs, the technological requirements etc.  So I then tried to put myself in their shoes, because at the end of the day, I was a customer of AAA. It wasn’t enough to validate, but it was enough to start.

5 persona groups were set-up to analyze different user journeys. Based on the 5 points of operation, I was able to create stories that aligned with specific areas.

Things that were taken into account were the goals of their journey and phases with actions, emotions, and AAA touch points.  

Personas, Journeys, Flows

Journey Map

Once the initial personas, user motivations and journey phases, and lo-fi wireframes were designed and confirmed with my manager, the next step to create was a refined solidified user journey. Since the product wasn’t a linear flow, I wanted to see where operations may connect.

Ui Design

The Ui of the current application was in need of being reassessed not only to create a consistent experience, but in order for the product to be responsive. Some of the components that were being used, were not mobile friendly or user friendly. Touch point sizes were inconsistent, and there were various style systems incorporated through out.


The styles within the framework were inconsistent and so as part of a Ui redesign, I started to reimagine a new experience with an updated look and feel that was still in sync with AAA’s brand.


The atomic components created were designed first in order to be implemented in varying locations and within diverse patterns. A few components of the framework included items such as buttons, links, controls, toggles, tabs, forms, inputs, accordions amongst others.


Reusable Patterns were created that utilized the components and styles initially created. Patterns were a good way to organize multiple components into a multi-functioning container. Things like search with advanced search, payment containers, cart experiences, list containers with the ability to link to additional pages were amongst the many.


Starting with lo-fi wireframes was a great jump start into visualizing how the Hi-Fidelity versions could translate. In addition, I was able to expedite the process by utilizing the built out ui library. The web app was to be responsive, so that was another consideration I needed to take into account when designing out the different wireframes and flows.


Once it was all said and done, I had designed a fully responsive, intuitive solution to replace their existing platform in 2 months time. I loved being able to explore the sky as the limit initially with no limitations. That inspired a tremendous amount of creativity before any solutioning could be done by business or dev. I would have loved to have more interactions with stakeholders and branch reps, though the pandemic made that challenging.

Next Case Study
User Experience and Interface Design
Microsoft Web Framework