I led the UX & UI design of this product comparison service.
2018 · Responsive web
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.
- Discover why revenue had stalled.
- Increase user engagement.
- Redevelop and create a modern experience.
- 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.
I led the UX Research, UX & UI design phases of the project working alongside a UI Designer and a development team.
Audience & research
I worked with a colleague to carry out a Google Analytics analysis to draw out patterns in the existing user base.
- 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.
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.
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)
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.
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.
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.
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.
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.
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.
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 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.
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.
The project has only just launched and we will be monitoring bounce rate, pages per session, returning visitors and mobile conversion rates.