Personalised product recommendations

Dyson Jan 20

Context

Support the launch of Dyson’s new Airwrap range by helping users decide which product is right for their hair type. A tool existed in Dyson’s retail stores which had already proven successful, so I was tasked with bringing the equivalent experience to the Dyson website.

Solution

A fully responsive, fast-loading, CMS-editable wizard tool, which gave the user a personalised recommendation based on their answers.

See the final design

Design process

Project outcomes

High completion rate - users could complete the tool 
and receive a recommendation in under a minute.

Double the conversion rate of a 
non-personalised product.

Positive internal feedback - our cross-functional team won internal awards for this piece of work.

Scalable and flexible - We built the CMS component to be reusable for future cross-category products.

Key design decisions

Making the selectors feel clickable

The original UI for the selector elements was unboxed, but I felt the clickability could be improved. I proposed some design options to my team during a design critique, and we decided to run a quick user test to see which design users were faster to interact with. The grouped design won, suggesting that it felt more immediately clickable to users.

Button colours

Traditionally, Dyson’s primary progression buttons on web were green, but the version launched in Retail stores was already fuchsia, which matched the product. We ran a couple of short usability test during UI refinement to see which aided progression, but participants in both studies seemed to progress at a similar pace. So once we launched, we ran an A/B test with live traffic, and learned pretty quickly that the fuchsia button aided progression.

Manual or automatic progression

In the retail version, selecting an answer would automatically move the user onto the next question, to aid speed of progression. However after refining the logic, we had three answer types - single selection, range/scale selection and multi-select. There was no way of knowing when a user had finished multi-select question, therefore we would need to provide a ‘confirm’ button to progress. As a result, we decided to enable the ‘Confirm/next’ button on all screens for consistency.

Final UI

What I would do differently

Learning from this project, I'd do a few things differently if given the opportunity to do it again:

  • Run some more testing on more granular iterations of the interactions, to understand whether users would benefit from auto-progressing to the next question once answering.
    At the start of the project there was going to be a mix of answer types: single select, multi-select and slider scale. Initially, we wanted to automatically progress the user to the next question once they had selected an answer, in order to help them progress more quickly. However, when answering a multi-select question they would need to actively confirm when they had selected all their options, therefore we decided to include a 'next' button on all question types for interaction consistency. We should have done more testing to see if this is actually what users expected.
  • I could have improved the developer handoff
    This was one of my

Collaborators

This was a cross-functional, team effort across design, product and development, with multiple iterations delivered in a short time window. Shout out to Becky, Georgina, Shakeel, Ryan, Will and many others for their efforts 👊

Looking for a bit more detail?

If you'd like to see a full case study for this project, showing the full design process and key decisions, please contact me directly.

Request a case study

© Lewis Royal 2021