TL;DR:
Responsive Redesign of AAA Carolinas’ website. Completed research, design and coding in 5 months. Completed circa April 2016.
Context:
AAA is a national brand but members join and are served by semi-independent regional clubs. These clubs can choose which services they offer and can vary significantly by region, so each club maintains much of its own marketing presence – website included.
Recognizing the shift to mobility, AAA’s national headquarters mandated that each club update their website to be responsive by April 2016 with steep possible penalties. The Carolinas’ AAA club hired me to serve as the UX designer and architect for the site redesign, which was behind schedule.
Like other businesses that have multiple, equally important departments, AAA struggled with defining a hierarchy. Each department leader felt their business was critical yet underserved – but with a shift to mobile, screens were getting smaller and pushing their content further and further down.
Process:
The first step was assessing the existing site and understanding the org stucture. The old site was dated but thorough. Every department insisted on their own visibility, resulting in a daunting navigation and complex page layouts that were littered with visual clutter.
This exercise informed the next two steps: define the site’s Information Architecture and start developing template designs. Using tree tests, card sorting and a healthy dose of internal debate, we arrived at an acceptable structure.
Using the core information found on the existing site and leveraging this IA as a site-map, I began to design templates for each section: a “section homepage” and various supporting pages. This began as simple wireframes; after we had a basic structure, we began adding style and imagery to make them refined and presentable.
From there, we spent time iterating on various chrome elements: header, navigation and search, footer, mobile variations and other details
We continued to iterate on the navigation – it was a hotly debated topic among the department heads – but we also progressed towards the perceived star of the redesign: the homepage.
My aim for this redesign was simplicity. Knowing that our Members’ average age was about 60, I didn’t want to bog down the site with small text, multiple routes or competing calls to action that might confuse older users. On any given screen, I wanted to only highlight one thing we wanted them to do. Given the nature of the old homepage, this was not received enthusiastically by some of the department heads, who (accurately) felt their departments were being downplayed.
Using some mouse- and click-tracking heatmaps as well as evaluating link counts, I was able to demonstrate that the prior design’s clutter had resulted in choice overload: there was no clear path for users. Our redesigned homepage reduced the number of visible links by ~70% and offered users a single, clear option – the one thing we wanted them to do: Join AAA.
While Joining was top priority, we didn’t want to completely eliminate department presence, so we gave them big beautiful sections that were beneath the fold, secondary to the Join message.
We further refined the homepage concepts and discussed some alternatives with internal stakeholders, ultimately designing two variants.
These prompted discussions about the order of departments, the navigation, the hero images and more.
Result
We went down to the wire, but ultimately we were able to finish the design in time, meeting all the requirements and solving most of the departments’ needs. The analytics indicated the site was doing well, we were increasing traffic to the Join and Renew pages, especially on mobile, and we were able to decrease user complaints.
Bonus
I’ve always enjoyed clever 404 page design. The 404 is a frustrating error to encounter, which makes it a good candidate for improvement by offering help, humor and humanization: when users get to it, help them understand why and offer to redirect them. By being relaxed and human instead of uptight and robotic, we can ease tension and turn around a bad experience.
With the AAA website, I wanted to use these principles while leveraging AAA’s core offering. By layering in elements like being broken down, towing, and travel, we were able to create a playful take on an otherwise painful page.
