The Challenge

Shop & Buy (my team) partnered with the telematics team, their UX, POs, PMs, business stakeholders and devs in addition to ours, as this was an integration of our two products. We collaborated closely involving multiple meetings getting the right people involved, gaining buy-in, & managed timelines, expectations, and technical capabilities.

The goal was to increase findability and comprehension of the Drivewise program, because the results of the Round 2 unmoderated study pointed these out as issues.

Round 1 Usability Research and Learnings

Before I joined this project, research had been done on the following two designs.

Left: We assumptively included Drivewise with the three policy options, and it could be removed on the next page. This design had people question: How much all three rate options would change with and without Drivewise, if they had to start a quote completely over to get back to the three rate options page.

Right: Drivewise on/off toggle appeared lower down the screen. It’s directly associated with the rates but people didn’t notice that because the toggle and rates weren’t visible at the same time.

 
 

Round 2 testing and learnings

In partnering with the telematics team, they decided to run the next round of research based on the designs below. Despite there being three separate screens for Drivewise, few noticed or read any Drivewise-related content overall.

 

I determined the issues with this round of testing were:

  • The sessions were 90 min which are long

  • They were unmoderated

  • Participants started with answering questions to get a quote, binding online, then were asked questions about their account 2 and 5 months post-purchase

  • Oftentimes participants run through unmoderated tests as quickly as possible to get paid for their participation

  • Only 12/200 participants selected the Drivewise toggle

  • Only 24/200 opened the on-page accordions to learn more about the program

  • Nearly everyone missed the minimum # of trips required and participation requirements

The problem with the design was the Drivewise toggle on the shopping cart card is sticky on mobile, so always visible. In the future when we offer additional products - ex. Home - it would be odd to have the Drivewise toggle always present when the quote includes more than auto.

 

Round 3 Usability Research and learnings

Round three I decided to move the toggles next to the price points, and to test two similar design concepts. As a special team of business and technology people were assembled specifically to pickup this project, now was the time to converge, taking the best of what we learned so far and making it better (versus introducing new concepts).

Concept 1 had the Drivewise info block on the Quote screen as the only place you see it.

 

Concept 2 (final designs) surfaced an interstitial on top of the quote page, introducing Drivewise in a focused way. The modal could also still be accessed from “What is Drivewise” link on the quote screen at the point of need.

Working with our visual designer and component library team members, we created a new component to solve our ‘modal within a modal’ issue. Clicking What’s a Trip of the FAQs would move the current page left off screen while that next modal screens slides in from the right. To get back to the Earn a Better Price screen you could click ‘back’ either in the top to the modal or the button on the button. This new UI element was intuitive to users and tested well.

Moving the Drivewise content block off the quote screen works for two reasons:

  • It reduces the amount of information seen at the same time on an already info dense page

  • It makes the design similar to how the other product lines will look when added to this page in the future

Interstitial

 

What we learned was:

  • People preferred the interstitial. Even if they closed out of it immediately, when looking at the Drivewise toggles they remembered there was information available to learn more about it. They liked and most interacted with the accordions to learn more in the interstitial more than on-page. People had a pretty good grasp on how to qualify for the discounts and what qualified as participation.

  • People liked the toggles above the policy rates. Unprompted they verbalized it was the right hierarchy for the page, understanding that what came below was related to that decision point above.

  • Unprompted, some people explained how the hierarchy of the toggles at the top made sense, and how they understood the info below would be related to that decision point.

This round solved both the findability, and within the telematic team’s comfort levels, the comprehension issues. Customers will have additional opportunities post-purchase to receive more information on Drivewise. We wanted them to know enough at point of purchase to feel comfortable with their decision.

 

Reflections

I was reminded of the importance of:

Open, cross-team communication. The special team to work on this project was assembled before this feature was picked up by UX. If they had thought to ask our timeline for working on this it would have reduced the time pressure felt by all.

Befriending key stakeholders and making them feel supported. Understanding from their perspective where their questions are coming from, what their concerns are, and working with them to gain support early to be united when sharing out solutions/recommendations with the larger group.

Early and often full UX team collaboration. By Round 3 we needed to test close to final VD and content to get real reactions so it was important to work together in parallel on what was included in the prototype.