Summary page - UX Process

Summary page project

Presentation of a case study, walking through the UX process

Nuria Gámez UX/UI & Graphic Designer

Ideas come from insights...

What is the problem?

A quick summary

Beagle Street is an online life insurance company that aims to make life insurance simple for everyone. This means provide with clear information around life insurance policies, take away complexities, and allow to make an informed decision. We spotted that in the sales journey our summary page wasn't working properly and we decided to understand why and how we could fix it.

How?

Why?

What?

Using customer insights, we A/B tested a new summary page design. The new design made editing the page easier and presented the information in a clearer format.

We must present key details back to the customer before they see their final quote. We use our summary page in our journey to do so.

Customer research identified some key customer challenges with our summary page. Users are not always clear about how to edit their cover on the quote page.

Qualitative

Quantitative

Google Analytics

121 User Research

What is the problem?

Usability Research -UserZoom

Test Learning - VWO

Ideas come from insights...

SessionCam

Call Centre listening

SessionCam

Whilst most users could interpret the displayed information, they typically failed to interact with it.The heatmap shows no interaction with the edit menu.

Edit menu view on mobile device

Users were not always clear about how to reduce their life insurance cover amount.

Edit menu view on desktop device

Common errors included changing the cover length or amending the critical illess amount.

Users struggled to remove critical illness cover more on desktop (72% ) compared to mobile (88%). Common errors included removing child critical illness.

Hypothesis:

• Users are not taking the time to review their details.
• They are quick to click through to the next step.
• Users often incorrectly interpret this is the last step of the journey.

Google Analytics

Average time on page: Mobile= less than 16 seconds Desktop= less than 13 seconds

UserZoom

An usability test was done with 10 users on the summary page on mobile and desktop devices to identify potential issues. We were asking users to think out loud during the test and then we realise about what were the main problems on the summary page.

Main problems

• Research suggests the page to be difficult to understand and hard to navigate.
• Edit links are easily missed.
• More users interact with the edit buttons on mobile.
• Desktop users typically don't know how to edit and click straight to the next page of the journey.
• UserZoom has highlighted that the understanding of the summary page was mixed, with some finding that users struggled to understand the page layout and feel overwhelmed.

So... what are all these insights telling us?

Customers that cannot edit their details have a poor experience. Risk of frustration and drop off.

Some customers don't understand how to edit their details. Risk of drop off.

The page is not being used for its intended purpose.

UX Design

New summary page

Over to UX Design A/B test - mobile

Control - A

Variant - B

New design: users click 'Edit cover amount' and they could change easily their answers. We introduced new features such as: -Help text (?) -New titles to help users -New copy text to help users.

Old design: users click on the dropdown menu paragraph to edit the answers provided on previous application form.

Old design - UX Design A/B test - desktop

New design - UX Design A/B test - desktop

Test Summary

Hypothesis: Because we observed customers were not interacting with the Summary Page (SessionCam brief) or they didn't know how to edit their answers (UserZoom study), we expected that by redesigning a clearer summary page, we would minimise confussion and more people would click throught the journey. Control vs. Variant: The variant has been declared winner due to a +6% relative uplift in the page.

The results

Running time: 6 weeks

Customer insights

Performance results

1. SessionCam heatmaps showed higher levels of interaction with the new summary page overall.
2. GA data showed the lenght of time on the page increased by +8s on mobile and +7s on desktop overall.
3. More customers were editing their details on the summary page, reducing the risk of frustration and drop off.

1. Engagement with 'Edit' buttons doubled.
2. +6 % uplift in the page views across all devices.

Try the new summary page

1. To play around with the new summary page, please click on the CTA "SEE SUMMARY PAGE".
2. Please fill the application form. On the first question, which option best describes you?, select 'I need help deciding my cover'.

see summary page

Thanks!

Nuria Gámez UX/UI & Graphic Designer