Quote vs. New Business
Wireframing | Whiteboarding | Final Mockups
Internal Tool
For over a year, I have been working on an internal tool for a major insurance company. The tool itself had already been designed by the company's internal UX team before my team was brought on. I was provided with the templates and design system they had created.
I add features to the existing tool and make changes as the tool is rolled out state by state. Different states have different regulations for insurance, so the tool is altered as each state launches.
Quote Vs. New Business
The purpose of this project was to create a screen where a car insurance salesperson could compare a price they gave the customer as a quick quote ("Quote Mode") against the price when they actually checked a customer's data in various databases ("New Business Mode").
Wireframing
I started by quickly wireframing a screen. Each tile shows a different element of car insurance. Then each tile is separated into the columns for each car in the customer's quote. Individual data points that differ in quote vs. new business appear in red.
I realized that this approach would make it difficult to quickly glance at the data for one car.
Wireframes
I wireframed a second version that maintained the "summary" section at the top and showed one car at a time in each tile. My teammate suggested adding the tabs to change which car would be highlighted. This made it easier to view data for each car, but each tile required a great deal of horizontal scrolling.
Sketching
To build on the foundation of the above concepts, a teammate and I hashed out a final idea on a whiteboard. It maintained the summary section at the top but separated the "quote" and "new business" data into two different columns.
Final Mockups
The final concept below shows the concept that was implemented.
