Product comparison

Dyson Apr 21

Context

User feedback showed that some users were finding it difficult to compare between Dyson vacuums. After a period of deeper research into user behaviours, another product team identified one output as being a simple comparison table so that users could compare 
side-by-side.

Our product team was tasked with refining the UI and creating a CMS component ready for our global content teams to add to the live site.

Solution

CMS-driven compnent allowing authors to create responsive comparison tables for any product.

Mobile-first, and able to be added to any page on the site for further usability and A/B testing.

Accessible to WCAG 2.1 (AA)

See the final design

Process

Outcomes

Improvement in NPS scores related to browsing and research.

Increase in conversion for visitors who interacted with the comparison table.

Key design decisions

Fully responsive table

The table was free-scroll on mobile, giving the user full freedom to explore and compare, and non-touch screens had arrows to navigate when any items were cropped off-screen. The table element was also fully accessible for screen-readers.

Sticky sections

Both the header and section titles were sticky, meaning visual users didn’t lose context of what product or section they were comparing against.

Final UI

© Lewis Royal 2021