The Legacy Application

AIA’s legacy application, known as CS-Agent, was a desktop quoting application used by agents to create quotes for their customers. The capabilities of CS-Agent were limited to just quote creation, which left off a lot of potential functionality such as integrating search features, allowing account creation, and using the program on the go. Additionally, CS-Agent was not a user-friendly application and agents found it so cumbersome to use that they were not making quotes with AIA.

User Personas

The first step in the design process was to create User Personas for the people that will be using AIA’s new application. I identified three different types of people who would be using the new app: experienced agents, new agents, and managers.

User Workflows

After getting to know AIA’s users and gathering the requirements from the client I created workflows and user stories to show how a user would navigate through the app to complete different tasks.

Sketches

I created three rounds of sketches detailing how the Web Agent Pro might look and function. These sketches were created from a mobile-first perspective, which was part of the requirements agreed upon with the client. Shown are the final round of sketches.

Wireframes

The final sketches were turned into wireframes which were used to communicate with the development team and ensure technical feasibility.

Identity

AIA needed a fresh look to introduce Web Agent Pro to their agents.

The logo I created is a bird with four feathers; each feather represents one of AIA’s core values. The color palette consists mainly of blues, which portrays dependability and trustworthiness while still feeling modern and updated.

Final Design

Overview

The high-fidelity wireframes were created using AIA’s new branding. They were designed to be easy for the agents to navigate and scan. Colors were applied strategically and with consistent meaning to ensure that it is always clear to the user what is happening. The app also took an atomic design approach, meaning that the visual design can be easily implemented as AIA grows the application.

01 - Quoting Process

The questions used in the quoting process remained identical to those in CS-Agent, but were reorganized and optimized for usability. The wayfinding at the top allows for the agents to see where they are in the process, lets them skip around to different sections as needed, and reinforces what areas have been completed or have errors.

02 - Search

The search section is a new feature of Web Agent Pro. The default search is by name, but filters can be added to narrow down the results. Colors were assigned to draft, calculated, and submitted quotes to allow for easy scanability of the page. The information show in the result is what the agents use most often.

03 - Account Management

Account management is a feature used only by managers. It is the process AIA has to approve accounts created in the log in section. AIA requested that accounts should not be able to be deleted, so this is not a feature in the app.

04 - Chatbot

AIA decided to implement a chatbot in the release of Web Agent Pro to help quickly address common agent questions.

05 - Log In / Create Account

The process used to create an account or log in on Web Agent Pro.

Accessibility - Designing an application for all

The final designs also took accessibility into consideration, and made sure that the contrast of all text meets web standards. Currently, web standards say that contrast must be at least 4:5:1 for text. All of my text meets and some even exceed those standards.

Additionally, the designs considered users with colorblindness by using type alongside any color coding, and checking with a colorblindness tool to make sure everything had enough contrast.