About Us
Lorem ipsum dolor sit amet, consectetur adipi Suspendisse ultrices hendrerit nunc vitae vel a sodales. Ac lectus vel risus suscipit venenatis. Morbi dignissim mi non dui phaedrum ullamcorper.

Hirtenstraße 19, 10178 Berlin, Germany

+49 30 24041420

ouroffice@any.com

Follow Us

Quoting App Redesign

Vanessa Lindell Portfolio / Quoting App Redesign
Quoting App Redesign
Improving how new customers enter information and obtain an insurance quote on The Hartford's web-based quoting application — while also expanding the design system and enabling new capabilities for the development team.

Background

The Hartford sells business, home and car insurance. To enhance the quoting process, a complete redesign was launched with the main goals being faster and easier, decrease drop-off rates, increase sales and refresh the design. A strong emphasis was placed on the mobile experience with responsive layouts. Some enhancements included pre-filling public data, progress indicator, simplified questions, customize and save quotes, online payments and issue policies without involving an agent.

As lead designer, my job was to partner with the Personal Lines team and provide UX/UI designs and recommendations. From concepts through final designs, I worked closely with the product owners, other UI and UX designers, usability and development teams. Deliverables included wireframes, design concepts, prototype screens for all unique mobile, tablet and desktop devices, custom icons and illustrations, design system enhancements, redlining and style guides.

My Role

As a member of the User Experience team, my role was to offer full UI/UX support to the Personal Lines team. I worked with Researchers, UX Designers, Stakeholders, Product Owners, Copywriters and Developers. I attended brainstorming sessions, created wireframes, and designed the UI from rough concepts through pixel-perfect prototypes.

Challenges

Users are looking for a quick and accurate quote with little effort. They're easily gone if questions are too personal. However, the application needs a fair amount of data in order to generate an accurate quote. How do we retain the user through the entire quote and minimize drop-off rate?

Target Audience

The target audience for this application are people ages 50+ who are looking to save some dollars on their Auto and Home insurance. These people typically own their homes and are looking to save money and increase their coverages. They consider a quality policy with good customer service high on their list and value strong, trustworthy claim handling.

Strategy

The strategy was to offer an easy, fun experience with short, direct questions. Sensitive questions were prioritized and asked early in the flow. An interactive progress bar indicates where they are and allows them to jump back. The design is bright and positive with simple animations. Colors are minimal and typography large and easy to read.

Requirements

The quote flow should be friendly and easy to complete. It must have a visual indicator for progress. The questions should be friendly and conversational. The quote will offer 3 choices - Basic, Standard and Deluxe and one of them is similar to their current policy. The user will be able to go on to purchase the policy or retrieve an existing quote.

Implementation

Once we obtained stakeholder sign-off on each phase, I worked 1 on 1 with developers and QA testers to ensure the design specs were adhered to in the final coded screens. I created all final graphical assets and red line specs to the developers within an InVision prototype. I also documented all new visual elements, colors and typography to be incorporated into the design system.

Process

This is an outline of the process I followed working with cross-functional teams to put the user's needs at the forefront of the app redesign. This was a full lifecycle project and with each phase being iterative, our focus was to ensure the customer's needs were identified and addressed with solutions that aligned with the business requirements.
1
Research & Discovery

Business Requirements, Competitor Analysis, User Stories, Use-case Brainstorming Sessions

2
Ideation & Conceptualization

Personas, Journey Mapping, Process Flows, Exploratory Design

3
Prototyping & Testing

Low/High Fidelity Wireframes, Prototypes, User & Business Acceptance Testing

4
Design Refinement & Iteration

Visual Design Mockups, Prototypes, Content Integration, Stakeholder & Developer Feedback

5
Collaborative Development & Implementation

Presentations, Walk-throughs & Working Sessions w/ Development, Asset Creation, Redlining Specs, Final QA

Wireframes

For this project we used Axure to create medium-fidelity wireframes and prioritized them into Agile phases. This is a sample of the extensive wireframe screens I worked on with two other UX designers. Our process included daily sessions with product owners, stakeholders and developers to flush out functionality and screen flows. This was a fast-paced environment and I worked on both the UX and UI simultaneously.

Prototype

This is a sampling of screens from the prototype used for testing the screen flow, content messages and functionality. I developed these screens in Sketch with limited color and as many functional elements as possible.

Brand Identity

The Hartford helps customers through the insurance quoting process while allowing it to be easy, delightful and accurate. Visual metaphors support these principles and allow The Hartford to create the right feeling for the audience.
ILLUSTRATIONS
Newco Tree Car
Newco Tree Home
PROGRESS BAR
Newco Progress Bar1
Newco Progress Bar5

Mobile Screens

The Hartford helps customers through the insurance quoting process while allowing it to be easy, delightful and accurate. Visual metaphors support these principles and allow The Hartford to create the right feeling for the audience.

Cross-channel Experience

These are just a few of many entry points available to customers to begin getting a quote. Quote boxes were redesigned and seamlessly integrated into the existing brand and provide convenient opportunities to guide customers into the quote flow. The quote boxes are responsive, reusable and nested in convenient locations within the content.

Slide Responsive Desktop Landing Page Floating quote box with icons appears on larger screens with banners. p p p Start Quote Tablet View Easily design layout, intuitive progress bar Tablet Quote Box A clean and stylish variant. Bordered with banner, insurance options pulldown. Standard Mobile Quote Box Simple, responsive and toggles to the retrieve saved quote.

Tools

Sketch
InVision
GitHub
Photoshop
Illustrator
After Effects

Thanks for viewing!