Leisy Vidal

Case Study

Designing an Internal Communications Hub for AAA

The American Automobile Association (AAA) came to Designzillas looking to develop a new concept – a brand new internal communications tool to make internal company communication for their 40,000 nationwide employees easier and faster. Their current system composed of a single 50+ page monthly PDF magazine that was emailed to every employee, and moving into a digital platform was a huge and eagerly awaited improvement for their national team. As a designer for Designzillas, I was tasked with planning, designing, and executing both the user experience and user interface design for this new internal communication platform.

Project Scope

Designs for an internal employee communications hub

Role

User Experience and User Interface Design

Project Ownership

Designzillas

Step 01

User Flows and Wireframes

The start of planning this project started with a full team debrief. AAA’s national communication team members came to Designzillas headquarters to talk about project requirements and scope in a project kick-off meeting. From there we wired out some user flows such as logging in, viewing a dashboard, subscribing to particular news feeds, and reading articles. Here’s a few versions of the medium-fidelity wireframes we created to test out different layout options for the use case of subscribing yourself to a specific news category’s feed.

Pictured above: three medium-fidelity wireframe versions of how logged-in users could subscribe to different news feeds.

Step 02

Early User Interface Designs

From the approved wireframes, we moved into more solid high-fidelity designs. We started playing with different font pairings, layouts, photography styles, and menu designs. Although the designs were loved by the client, after listening to client feedback and testing designs through various internal design reviews, we moved into a further phase three to try a more traditional news-style layout approach that better accommodated the large scope of content being featured on the home news dashboard of the user, and to better pair with AAA branding.

Pictured above: views of early proposed home page, news feed, and expanded three-level sidebar menu designs.

Pictured above: views of early proposed home page, news feed, and expanded three-level sidebar menu designs.

Step 03

Final User Interface Designs

After much collaboration internally with the Designzillas design, development, and marketing teams, and with feedback from AAA, we landed on these final designs to become the next digital face of the internal employee communications hub for AAA.

Pictured above: views of the final approved designs for the communication hub’s single article page, home page, and search page.

Step 04

Style Guide And Component Documentation

As part of design hand-off for development, I created a full design style guide to depict desktop and mobile font sizes and styles, button styles, colors, global form styling, and components for major news card style variations.

Pictured above: the style guide created for the communications hub project

Pictured above: components included in the style guide for the communications hub project

Step 05

Design Hand-off

Once the UX and UI for this project was approved, the designs and assets were handed over to the Designzillas development team during a full design to developer handoff.

Back to all Case Studies