AUTO INSURANCE AGENT INTERFACE
SUMMARY
I worked on a project in which the challenge was to redesign an auto insurance agent web application to rebrand the client, provide efficiency, and create a mobile-first solution. My task was to create a new design system focused on accessibility and modernization, and apply visual design to all wireframes of the agent process. My solution was a fresh yet timeless rebrand that set the client up for future expansion, and designs that were accessible for all agents and provided an easy insurance quoting process.
YEAR
2022
PURPOSE
Professional
TOOLS
Figma
STYLE GUIDE AND DESIGN SYSTEM
I chose an indigo color as the primary brand color for the client. Competitor companies often relied on royal blue, so I wanted something that would stand apart from competitors but was similar enough to them that it fit within the auto insurance identity. I chose a forest green as an accent to provide a fresh contrast, as well as to refer to the tie between the color green and a car taking action at a green light. All colors were also tested to meet AAA compliance for accessibility. For the logo, I chose a letter-based graphic that mimicked the company name and used semicircles to bring about the image of wheels on a car. I also chose a sans serif font that brought the branding into the future while staying simple and timeless. In a similar manner, I chose Helvetica as the typeface for the application for its readability and endurance, which was implemented with a standard type size hierarchy. Components such as clickable buttons and fill forms were also designed with accessibility as a primary focus, with all items meeting 32px or larger.
QUOTE CREATION
The major functionality of the web application for insurance agents is the process of creating a quote for the customer on the phone. Issues with the previous interface included too many clicks, difficulty viewing and editing quote information during the process, and no mobile-friendly version of the platform.
The navigation bar at the bottom of the screen takes the agent to one of their main portals, in this case the quote creation. The progress bar at the top of the screen allows the agent to see where they are at a high level in the process of creating a quote. Individual screens include simple fill forms, and drop downs for states, birthdates, etc have been implemented wherever possible to reduce clicks and typing errors. Forms change states to reflect that they are either uncompleted, active, completed, or incorrectly inputted. Each section has a "next step" button that is only active after all required fill forms are completed.
If the agent would like to edit a previous section, they can simply click on the quote progress button in the corner of their screen to view the previously inputted information or click back into a previous section to change the content.
At the end of the process, the agent views a summary and can edit by clicking into the displayed sections, or hit calculate to view their digital receipt with any discounts, and then print, email, or submit the quote to enact the transaction if the customer desires.
QUOTE SEARCH
Another major section of the web application is the quote search tool, in which agents can view their recent quotes, or search for existing quotes using any of the criteria they might remember from an interaction in order to increase ease of use and efficiency.
I developed a quote status system so that agents could easily determined how much of a quote creation they had completed. Incomplete quotes are quotes that are autosaved, however not all of the required fill forms have been filled in, and they are editable. Unsubmitted quotes have all forms completed and have been calculated, but have not yet been opted in for by the client, and are thus still editable. Submitted quotes are complete and have been submitted, or approved by the client and and transacted, and are thus no longer editable. Each quote ticket shown in the quote search area displays one of these statuses.
The agent views a list of their 10 most recent quotes as well as a search bar in which they can check off the criteria they want to search by using the drop down. From there, they can type the keyword they remember into the search bar and hit enter to create a search tag tied to the first criteria they selected. The remaining criteria will auto populate into the criteria section so they can easily continue entering the keywords. When they are finished, they can hit the search button to view quotes that meet their search criteria. They can then click into these quotes to view a summary of them or edit the information if the quote is not yet submitted. Another action the agent can take is to create a spin-off, in which a duplicate of the quote is made as a new, editable quote, and takes the agent into the quote creation section.
ART OF THE POSSIBLE
My team and I also developed a future-forward concept for the client company in order to show commitment to the product we worked on and an expertise in modern solutions for the next generation of insurance customers. We proposed a design for a public-facing website for the company, in which visitors could do their own self-service quote calculations without calling an agent. After calculating the quote, they enter a chat interface in which a chat bot can help suggest beneficial changes to the quote or answer any questions, and changes can automatically be made if the customer hits "apply changes." After this interaction, the customer can submit the quote and they are told that they will receive an email from a real agent, who will either let them know that their quote was successfully submitted, or help them fix any issues. This benefits customers who want to do this type of work on their own time, and benefits agents, who can be more efficient and focus their time on those who want to call in.
