Choose

I led the UX & UI design of this product comparison service.

2018 · Responsive web

Background

Choose, one of the original product comparison sites, were facing difficulties monetising their site traffic.

Their business model consists of providing product comparison tables and consumer advice content, generating referral and advertising revenue.

A high bounce rate and declining revenue indicated that the existing website wasn’t giving users value nor delivering against the business model.

Goals

  • Discover why revenue had stalled.
  • Increase user engagement.
  • Redevelop and create a modern experience.

Constraints

  • No insight into why revenue had started to fall.
  • A very limited budget with which to discover and fix issues.
  • An ageing technology stack that made redevelopment of the site time-consuming.

My role

I led the UX Research, UX & UI design phases of the project working alongside a UI Designer and a development team.

Audience & research

Data analysis

I worked with a colleague to carry out a Google Analytics analysis to draw out patterns in the existing user base.

We discovered:

  • The existing site had an engagement problem: a high bounce rate (85%) and a low average session duration.
  • There was a retention problem: 90% of visitors were new to the site and the average pages per session were just over 1.
  • The site was overly reliant on Google organic search for traffic (91% of traffic.
  • Mobile was the dominant device but engagement and conversion were lower than desktop. The site was poorly optimised for mobile usage.
  • The comparison tables perform well but had little traffic.

Remote user testing

I carried out five remote user tests of the existing site and found:

  • Users were unsure of the value proposition of the site and its differentiation from more recognisable brands.
  • Users found the different product comparison options overwhelming and wanted clearer information about the best deal.
  • Users wanted to use a powerful site search, but couldn’t find it and, when pointed out to them, found the results confusing and struggled to find suitable content.

Screen recording

I also used CrazyEgg recordings to observe user behaviour and found recurring issues:

  • Users had difficulty using the site search and when they did, typically didn’t tap through to a result. Issues observed included a result for ‘wifi’ returning hi-fi reviews.
  • Users who used the comparison pages didn’t interact with the results filters, and if they did, didn’t notice the need to tap ‘Apply filters.

UX Design

Problem definition

Before we began our design phase, we defined the goals and metrics for the project as:

  • Increase engagement & circulation (Metrics to track - bounce rate, session duration, average pages per session)
  • Focus on retention (Metrics to track - returning visitors, sessions per user)
  • Make the mobile design the priority (Metrics to track - mobile bounce rate, session duration, average pages per session)
  • Increase affiliate conversion rates (Metrics to track - affiliate goal conversions, affiliate goal conversion rate)

Ideation

As the core components of the site (consumer advice and product comparison) weren’t changing, and because of the tight budget, I brainstormed features that could help meet our target metrics.

I sketched ideas for our chosen key features.

Sketches of different ideas for increasing comparison traffic - top row - and increasing circulation - bottom row
Sketches of different layouts for product comparison cards

Prototyping

I designed mobile-first responsive wireframes using the atomic design principles to build a design system which we could layer visual design on top of to quickly give our final designs.

Mobile wireframe of key templates: home, product comparison and a consumer advice guide.

Interaction design

I experimented with different options for navigation on mobile and chose a nested menu approach with a separate search button to encourage searching and increase site circulation.

I wanted users to be able to get to two-levels deep in the menu so designed different options for the site menu allowing for deep navigation. I chose an accordion system to allow for deep navigation.

Wireframes for different menu options; a split screen menu, a nested tree menu with overlapping panes, the final accordion system allowing multiple levels of nav.

I experimented with different methods for displaying comparison results, which because, of the variety of different product types and options would have to be very flexible. I chose the longer, but complete comparison card as it quickly gave all the info the user would need without requiring additional interaction.

Wireframes for comparison cards; a longer card showing all info, a card that flips over to reveal more info on the back, a card that expands to show more info when tapped.

I experimented with different layout and interaction methods for comparison results. I designed vertical and horizontal swipeable galleries of cards. I chose the vertical display of results, which would make it easier to rediscover your chosen result.

Vertically stacked search results vs swipeable galleries of results.

UI Design

I art-directed a UI Designer to refresh the site visual language, which included introducing a new colour palette, new typeface and more photography.

I guided the UI Designer through this process, reviewing options with them before making decisions about the design direction.

We decided upon a colour palette that references the original branding but mixed lots of white space with bursts of colour to give visual hierarchy.

We decided to keep the footer illustration which gave brand continuity and personality.

Retained footer graphic

We extended the existing footer style to introduce illustrated icons to help the user identify different product types, allow a brand-ownable style and also to add personality.

We introduced Illustrated icons to give more personality and a distinct visual language

We experimented with a variety of typefaces before settling on Lato. Lato is a widely available web font, which has good legibility for the longer consumer advice articles, displays well at different sizes, and more importantly feels friendly and welcoming.

Elements from the Atomic design system

Final design

I led the design of the final UI working with the UI Designer to establish initial template designs and art-directed the design process of the rest of the templates.

Final homepage
Scrolled homepage
Comparison page
Comparison page - results card
Consumer advice guide
Consumer advice guide - page details

Results

The project has only just launched and we will be monitoring bounce rate, pages per session, returning visitors and mobile conversion rates.

View live website


Next project

o2