User research, UX, Interaction design

Optimising MOO Business Services to increase conversion

Role      Digital product designer

Team    Researcher, Merchandising & Optimisation 

Goal      Increase conversion to a paid business account on moo.com

Summary

I was tasked with revamping MOO’s business services page to increase conversion to a paid business account. Applying insights from a series of user interviews and A/B tests, I designed a new page that increased user understanding of the service and generated more leads.

User insights
  • Users needed more clarity. The difference between the paid business service and the free moo.com service was unclear.

  • The call-to-action is misleading. The “Find out more” button took users straight to a contact form, without learning about the service first.

  • Anchor links are disorientating. The page uses many anchor links, including an internal sticky navigation and buttons that link to the form in the middle of the page, causing users to get lost on the page.

  • Many users did not scroll past the plans on the page. There was a false-bottom effect when scrolling down the page, causing users to drop-off half way and missing a lot of useful information.

  • Users did not watch the video. In testing every user missed the video, but when they were asked to watch it, they found it valuable. In analytics, the video had a very low click rate, but conversion rate was higher for sessions that had watched the video. 
User interviews

We conducted user interviews, quantitative and best-practice analysis to understand the current page performance, behaviours and mental models.

Using these insights, I designed a new page, featuring multiple steps to help break down the information and create a clear path for users. 

Original-page-with-notesx2

The original page, highlighting anchor links, video location and scroll depth

mbs-user-flow

Proposed journey for the new business services page

Solution
  • Provide a clear value proposition. This would provide users with a quick summary to distinguish it from the rest of the site.

  • Create a clear path to the form. Removing confusing anchor linking and creating a clear path, with a relevant call-to-action.

  • Feature the video’s content on the page. This content in the video is vital in understanding the service, therefore, we needed to feature the content on the page.

  • Make the video more prominent. Some users will not watch videos at all, however, those that would watch a video did not see it. We needed to make the video more prominent on the page so that users who like to watch videos can find it.

  • Clear list of features. To create a better understanding of the plans and the paid account, we updated them with more universal terms and removed anything that is also included in a standard account. 

  • Visually distinguish the plan we recommend. The goal of this update is to drive more paid accounts, therefore users should focus on the central Office plan.
mbs-hero-shot-1

New button in the hero highlighting the availability of the video at the top of the page

mbs-content-shot-1

New content based on the video content, with clear, benefit-led headings and bullet points for scannability

mbs-plans-before
mbs-plans-after

Before and after shots of the plans module, now with visual emphasis on the paid Office plan

Optimisation testing

Alongside user interviews we ran an A/B test against the existing page to see the effect on conversion. We devised plans to collect feedback from the sales team on how this new design affected users in their onward journey, and observed a series of user-centred metrics using the HEART Framework.

Outcomes
  • In user testing, there was a better understanding of the service, users were able to navigate through the pages easily and more users noticed the video. 

  • In the A/B test there was a decrease in conversion rate, users dropped off at the point that they had to choose their plan. We were able to hypothesise that users did not understand the plans and were unable to make a commitment.

  • Reports from the sales team suggested that users were more convinced of their plan choice. Overall they had a better understanding of the service.
Heart-metrics-workshop

Outcomes from user centred metrics ideation session using the HEART Framework

Iteration and next steps

Following the drop in conversion on the initial test, we ran a follow-up test using the same content on a single page, removing the need to choose a plan before filling out a form. This was a success, increasing conversion by approx. 8%

Additional research, focused on user needs and values, led to a content redesign that will be tested against the previous design.

Learnings
  • Adding steps to the journey is worth testing. Although adding additional steps to this journey did not increase conversion, we were able to gather insights into users’ understanding of the service and what level of information they need to sign up.

  • Continue user testing and research after delivery. After delivering the project to be tested on the site, research was continued on this service. This new research allowed me to refine the design we were testing and plan for new iterations.

  • Front end A/B tests are a great way to test designs before building it into the CMS. We used a front end A/B test for the visual changes to the plans module to understand if this was worth building. This meant that we were able to get results in faster and prioritise technical work.
mbs-content-iteration

Content iteration focused on user needs identified in research

hello@daniellelast.com
icon-linkedin icon-twitter icon-instagram

© Danielle Last 2020