Get A Quote
About The Project
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.
Approach
For Get A Quote, I participated in the full lifecycle of the project. 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 product development. With each phase being iterative, it ensured the user's needs were identified and addressed with solutions that aligned with the business requirements, which is likely to be the best possible solution.
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
PROGRESS BAR
Final 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.
Consistent Customer 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.
Tool Set
