Hello Auto Web Quoter Redesign

Complete redesign of Hello Auto’s car insurance quoting tool. The goal of this redesign was to adapt the old tool to the new brand guidelines, as the company was in the process of giving its image a more modern look when I joined. Additionally, the aim was to improve the quoting process to provide a better user experience.

Industry

Car Insurance

Company

Hello Auto

Service

UX/UI Design

Date

2023

Hello Auto Quoter Cover
Hello Auto Quoter Cover
Hello Auto Quoter Cover

First Approach

When I joined the team, this project was already underway. Some components, documentation and screens had already been defined by the previous designer, Victoria Martín, which served as a solid foundation for the rest of the design work.

Quoter old design
Quoter old design
Quoter old design

Examples of the previous quoting tool design

Examples of the previous quoting tool design

Early designs by Victoria Martín
Early designs by Victoria Martín
Early designs by Victoria Martín

Screens designed by Victoria Martín that served as the foundations

Screens designed by Victoria Martín that served as the foundations

Workflow

Together with the Marketing team, the Product Owner, and the Development team, we prioritized and defined the screens that needed to be created. During these meetings, user flows and screens were established, and the components required were identified and then defined in as much detail as possible to hand over to the developers.

Components board
Components board
Components board

Some of the components defined in Figma

Some of the components defined in Figma

designs ready for development example
designs ready for development example
designs ready for development example

Example of screens ready for the developers

Example of screens ready for the developers

Final Result

We gave the quoting tool a complete visual refresh according to the new brand guidelines, ensuring that all Hello Auto products (App, Web, and Quoting Tool) maintained visual consistency. All designs were fully responsive. In this final stage, the graphic designer, Ángel Cruz, also contributed to add extra polish with his illustrations and animations in the tool.

desktop final design
desktop final design
desktop final design

Some of the desktop final design

Some of the desktop final design

quoter tablet mockup
quoter tablet mockup
quoter tablet mockup

Example mockups with the final designs

Example mockups with the final designs

Some of the animations created by Ángel Cruz

Some of the animations created by Ángel Cruz

Create a free website with Framer, the website builder loved by startups, designers and agencies.