Redesigning the way to quote
February 2021 - April 2021
The Challenge
Our goal was to turn the car insurance quoting form into a delightful experience through user-centered design.
My Role
I led the project, working side by side with Business Owner Ignacio Vargas and UX/UI designer Mateo Ruiz.
Context
Before the redesign, the quoting experience was an intricate and extensive form. Upon reviewing it, we raised our own hypotheses of problems and opportunities for improvement.
- Too many clicks needed.
- Too many questions asked (Almost twice as much as the main competitor).
- No auto filling data we already know about our customers.
- Ambiguous steps.
- No context for the user (form name or breadcrumbs).
- Inconsistent labeling.
Design Process
We worked through a research phase and a design phase. As we tested with users, it was necessary to iterate and reformulate solutions. At the end of the process, we ended up with a new quoting form and a new design system exclusive for forms.
Hover to zoom
Research
Interviews: Call Center
I moderated one-on-one interviews with 10 executives to discover possible user pain points. These were the main findings:
Users mistakenly believed that their car may be insured by a third party because the form had one confusing question.
Due to the lack of clear instructions, users entered incorrect information in the “model” and ”year” inputs.
Users seeking insurance for commercial use had a negative experience, due our lack of coverage options, which was communicated at the end of the quoting process.
Benchmark
We made an information architecture benchmark with 6 direct competitors. The objective was to find patterns to meet user expectations in quoting car insurances online.
In the table below, the rows are the competitors and the columns are the questions of the competitors forms (inputs).
Click to expand
Scroll right to see the full table.
The main conclusions of this benchmark were:
- Form tend to ask for the vehicle details first and then for the owner personal data.
- Our form has more questions than our competitors.
- Unlike our competitors we have the insured's data distributed in different places.
User flow first approach
We created the journey that we thought would be ideal for the user. The objective was to use this flow to create a prototype and test if our hypotheses were correct.
Our mine hypothesis was that the user would want to quote through Rut (National identification number), since most people know it by heart.
Click to expand
Scroll right to see the full diagram.
Survey
To validate the hypothesis of whether the user preferred to quote with RUT or car license plate, we launched an online survey giving a fictitious scenario and asking users how they preferred to quote.
The sample was small, since we were more interested in the qualitative than in the quantitative perspective.
I wouldn't feel safe giving my RUT if I'm just quoting.
The car's license plate is linked to the vehicle that I want to quote, and it is more related to the main action that I want to perform.
The main conclusions of this survey were:
- They felt that their RUT was sensitive information to deliver at this stage.
- They saw a more direct relationship between the car license plate and the task of quoting.
- We believed that users would prefer using their RUT (National identification number), but they did not. Therefore, we had to rethink the flow.
💡 Design recommendation
The car license plate should be the first question in the form.
We can use our database for autocomplete car information related inputs.
Also give the option to quote without a license plate for those users who prefer it.
Usability test
We readjusted the flow. Having a pre-built design system saved us a lot of time, so we decided to create high-quality wireframes for conducting a usability test.
Test goals:
- Know if the information architecture was consistent with the user's mental model.
- Know how the user feel about data autocompletion.
Methodology:
- Sample: 7 users belonging to the User Personas profiles: 4 with car insurance experience and 3 without.
- Procedure: Profiling questions, then they had to simulate a quote in the interactive prototype, SUS test and closing questions.
- Time: 30 minutes.
The main conclusions of this survey were:
- Users liked the idea of autocomplete the car data as it made the process more expeditious.
- Users felt uncomfortable with autocomplete personal information (phone and email), because they felt that it was invasive and/or that this data might not be up to date.
Autocomplete car details would be very useful, especially if I want to quote for someone else and I don't know their details.
I would prefer to complete the email myself even if I have to type
SUS test
The SUS (System Usability Scale) is a ten-item questionnaire administered to users to measure their perceived ease of use.
The test results were great. Which left us very happy and confident.
| SUS SCORE | SCORE | |
|---|---|---|
| User 1 | 97.5 | A |
| User 2 | 92.5 | A |
| User 3 | 95 | A |
| User 4 | 92.5 | A |
| User 5 | 100 | A |
| User 6 | 97.5 | A |
| User 7 | 80 | B |
| FINAL SCORE | 93.57 | A |
💡 Design recommendation
Autocomplete vehicle and owner data, but not personal data.
Maintain the structure: Step 1: Car details; Step 2: Owner details and Step 3: Contact details.
Something unexpected happened...
Several users expressed disagreement with the design.
It could be a little bit prettier ... I think it's a bit simple ...
Too simple, it could be unattractive. Being very simple I felt that it did not give confidence
Iteration
New Survey
With this new information we decided to give a try on illustration, a resource we used to include in our communication channels. We had our doubts, for example, if it was going to distract the user from the task or if it will add this little extra users where expecting. It was a success.
For the survey we ask new users to use a word to describe the two proposals. One was the design we previously tested and a new one including illustration.
Sample: 33 users.
The illustration brings it to life
79%
of users prefer the layout with illustration.
It's like the illustration of the good vibes company and I think that inspires confidence
The illustration brings it to life
It's like the illustration of the good vibes company and I think that inspires confidence
79%
of users prefer the layout with illustration.
Hover to zoom
Definition
New user flow
Given all the previous research this was the design of final flow. We start by asking for the license plate to auto-complete the car's data and finally ask for the data of the car's owner. We eliminated questions that were not necessary to quote and grouped them by topic.
Click to expand
Scroll right to see the full diagram.
New input system
Together with the fronts, we decided to build a new library of inputs. These would provide better feedback to the user, and aid information. They would have a status of success, tooltips, loading, among others.
Click to expand
Scroll right to see the full input system.
Handoff to development
As a team (UX and Front), this was the way we defined to facilitate the designs to development. This was an iterative process in co-creation with front.
We included arrows that indicated flow. This way it was easier to understand what the navigation should be like, in addition, I added details in boxes so developers could find everything they need to build de form in one single place.
Click to expand
Scroll right to see the full chart.
Take Away!
What did we improve?
- We used a database to autocomplete car data, leaving the personal info to be completed.
- We decreased the number of clicks.
- We decreased the number of questions.
- We improved the information architecture (we grouped related questions into steps).
- We improved the experience for commercial use cars (now we notify the user if there are no insurance plans for their vehicle from step 1).
- We included an illustration to enhance the viewing experience.
- We included information that the user was missing (explaining why the car model may be missing and that its data must match those of the registry).
- We improved the feedback the system gives to the user (more states for inputs).
- We improved the alert and information system for the user: showing information that the they might know when they click on an entry instead of showing it all at once.
- We added tooltips for those questions that are more complex and the user may need help with.
- We improved the form's context by including breadcrumbs.
- We informed better where the user is by including a stepper with clear labels.
- We unified the voice and tone of the UX writing to through the form, from titles to questions.
