My role: UX designer and researcher
Say Insurance is a start-up online only auto insurance company within Shelter Insurance, a large traditional insurance provider in the Midwest. A few years after launching, a persistent pain point had emerged in the user experience of Say, specifically around the difficulty of editing an auto insurance quote. The original quote had been designed so that when a user received their rate, they couldn’t go back to edit any previous answers. This was increasing call time and frustrating users and support staff alike. This frustration was expressed to UX in the form of a request to build a separate quote web app just for the support staff.
I started tackling this issue by understanding more about why the quote had been built that way in the first place and what problems did editing the quote actually solve. Why did people need to edit their answers? What situations were they in? Why were people needing to change their answers when on the phone with a support rep? I spent time performing contextual inquiry interviews, shadowing and listening in on support calls to understand the use cases. We came up with a healthy list of viable reasons that edit-capability would better meet overlapping users and support staff needs more than building a costly second web app. I also learned that to change the edit capability of the quote was to refactor the entire underlying back-end structure. This would involve changing calls to various other systems, APIs, and services that affected many engineering teams.
Because of the scope of the issue, I planned and executed a cross-functional design sprint with the help of my scrum master. With representatives from front-end and back-end engineering teams, UX, PMs, marketing and support, we worked through the full five-day protocol and came out with a wall full of over 300 post-it notes from the usability tests, a user-tested prototype, and a list of revisions to inform the next iteration.
Our big idea involved creating a hub-and-spoke flow paired with an interactive progress bar. As a user worked through each question of the quote and purchase flow (the spokes), they would see a recap page (the hub) before moving to the next category. On the recap page, we would surface the information they’ve provided and allow in-line editing. If they wanted to go back and make edits to earlier categories, they could navigate quickly to other recap pages using the interactive progress bar. The interactive prototype that I created during the sprint validated this concept and gave us a direction, but the biggest challenge in the weeks following was working out how quote storage and retrieval would operate. Users could stop mid-quote and return at any time. Figuring out where they should be dropped back into when they returned and how we would save information was a massive engineering-UX collaboration over several white-boarding sessions, flow mapping, and iterations.
Sprint prototype screens made in Sketch, InVision, and (the now defunct) CanvasFlip.
Implementing the redesigned and refactored quote
As I worked closely with my PM and scrum team to move forward in this refactor, a design system effort simultaneously kicked off within the UX team. Engineering and UX were growing, and we needed a scalable way to efficiently communicate, manage inconsistency and increase velocity. As we began to codify our colors and their usage, another UX designer and I began tinkering with a new color scheme for the quote flow. User research had shown that the original magenta background within the quote flow was controversial. Some loved it, some hated it, and some didn’t even notice it. One usability test participant said she wouldn’t move forward in the quote specifically because the colors made her not trust the company.
A responsive, light quote
Since we were redesigning all of the pages in the quote as part of the refactor, I was able to converge the concepts from the design sprint, the output of the design system changes, and a visual refresh using smaller doses of the highly-saturated color palette into this project. In designing the recap pages, I was informed by Material Design and the interaction of sliding cards on the Gmail sign-in page. Our users were primarily accessing the quote on mobile devices but there were quite a few desktop users as well, so designing a responsive quote flow was a key consideration.
Once implemented, this project could justify itself with quantifiable improvements to call times in the support center, user feedback, and resolution of technical and design debt incurred prior to the design system implementation and back-end refactor.
Sample high-fidelity designs for desktop and mobile featuring a light gradient background, the new progress bar, and new button styling.
Examples of high-fidelity mobile designs of two “hub” pages in the new hub-and -spoke design. The progress bar shows where a user is, where they’ve been, and where they can go by varying the size of the dots, the color of the bar, and the interactive labels.
Example of the edit functionality and motion design on mobile.