Work

Work

Work

Digital Technology Operations dashboard

Quote Flow

Quote Flow

Coterie Insurance | UX Lead

Coterie Insurance | UX Lead

Digital Technology Operations dashboard

Quote
Flow

Coterie Insurance

UX Lead

Backstory

Backstory

Quote Flow was Coterie’s first digital product that was available to the public. Its purpose is to provide small businesses with a self-service system that could generate a quote in minutes without having to work with an agent. Quote Flow uses the business’ historical data to generate a quote and provide the user with coverage and add-ons suggestions.

When this project started, CIOs and other executives were using a webpage that had minimal data that dug into some IT processes within our organization. It was brought up to a manager to develop a dashboard that would allow executives to see the data in real time from its original source of truth. I was recruited to design the new user interface and make it work on different screen sizes. We were asked to stay “somewhat” close to what they originally had developed.


When this project started, CIOs and other executives were using a webpage that had minimal data that dug into some IT processes within our organization. It was brought up to a manager to develop a dashboard that would allow executives to see the data in real time from its original source of truth. I was recruited to design the new user interface and make it work on different screen sizes. We were asked to stay “somewhat” close to what they originally had developed.


At the beginning of this journey, we conducted interviews with potential users that were already doing business with the company. They provided us with insights and helped us create a much better experience. During the research period, I discovered that what the company had built prior to my arrival was not responsive. This forced me to pivot from doing user research into building a responsive version of the tool.

Quote flow on mobile and desktop
Quote flow on mobile and desktop
Quote flow on mobile and desktop

Journey

Journey

When I joined the team, this platform was steadily adding features; however, it needed a makeover as there were a lot of inconsistencies throughout the user flow. It had an incomplete mobile experience and it needed visual polishing to reflect the branding better.

The company was starting to gain more visibility and we needed to improve the overall experience. For this project, I started as an individual contributor, however due to time and other priorities I moved into an art director role. I wasn’t building every element on the page, but rather I was leading how the tool would interact with our users. My team consisted of one full time designer, a part time designer, a project manager and a small development team.

Quote Flow before and after
Quote Flow before and after
Quote Flow before and after
Site map and user flow
Site map and user flow
Site map and user flow

Collectively we started building a design system that we could use across all products in the company’s ecosystem. This would be the first of our products to benefit from such system. Our main focus was to make sure we could deliver a consistent experience across all devices and meet accessibility standards.

We reworked some of the language to give Quote Flow a friendlier tone of voice. Modals and error messages were updated to help the user pinpoint mistakes or complete missing information. We leveraged analytics to understand where in the process the users were getting stuck and try to address those issues.

Business information UI evolution
Business information UI evolution
Business information UI evolution
Design system in action
Design system in action
Design system in action
Phone version of Quote Flow
Phone version of Quote Flow
Phone version of Quote Flow

Results

Results

Now a days, Quote Flow is not only visually superior to its predecessor, but we have built it with the ability to scale up as the company increases its insurance offerings. The usage of our design system allows us to maintain consistency while decreasing the amount of production time. This redesign helped us spun out a white label version which was an idea that was born from some partners requests to be able to embed Quote Flow into their websites. We have gotten it to point where we can stand up a version that uses our back-end but visually it uses our partner’s branding while maintaining its general tone and feel.

Phone version of Quote Flow
Phone version of Quote Flow
Phone version of Quote Flow
Selection review screen UI
Selection review screen UI
Selection review screen UI
Multiple quote flow screens
Multiple quote flow screens
Multiple quote flow screens
Quote flow on an iPad
Quote flow on an iPad
Quote flow on an iPad

Find me on the interwebs

Sergio Garcia copyright 2012-2024. | All rights reserved | Sitemap

From Ohio with love

Find me on the interwebs

Sergio Garcia copyright 2012-2024

All rights reserved | Sitemap

From Ohio with love

Find me on the interwebs

Sergio Garcia copyright 2012-2024. | All rights reserved | Sitemap

From Ohio with love