Overview
What Hi-Fi? is the place to go for trusted reviews and advice across a range of audio visual technology. It caters to a range audiences, from the person needing simple guidance about which TV to buy to the hard core audiophile who want an in-depth review of a specific product written by an expert, with accurate information about what other products it works best with.
The site also includes a community forum that is broken into the different types of equipment to help people find answers to specific tech problems.
One of the key requirements of What Hi-Fi? is to help people quickly find a product that fits their needs. To support this we worked within an iterative design process around the review filtering section and the Best buys section.
To start with we conducted some usability tests with regular site users and those who have never used the site before to identify behaviours and usability issues.
The site also includes a community forum that is broken into the different types of equipment to help people find answers to specific tech problems.
One of the key requirements of What Hi-Fi? is to help people quickly find a product that fits their needs. To support this we worked within an iterative design process around the review filtering section and the Best buys section.
To start with we conducted some usability tests with regular site users and those who have never used the site before to identify behaviours and usability issues.
The Brief
To rework (based on a discovery phase) the best buys section and product filters on What Hi-Fi to enable better user engagement and use of our retail solution.
● Best Buys is popular: 10% of site traffic
● Navigation uninspiring to readers
● Key information unclear in articles
● Redesign could boost engagement and retail revenue
During the discovery phase (user testing & user interviews) we identified some critical issues and discovered that the users expectation was to be able to filter or navigate in the same way as store sites. Amazaon, ebay, John Lewis, Marks & Spencer. So we conducted a competitor analysis and built a list of recommendations, which included information on which filter groups were most important. These were designed and new visuals were implemented live as a test to get feedback. We also tested these live with real users using Lookback.io at the Bristol Sound and Vision show. This feedback was analysed to create a second phase which included new filter groups and changes to the way filters work.
Assumptions of rework
● Improved reader engagement with articles
●Increased retail revenue as a result
● Maintain advertising revenue
Discovery
We tested our current product with real users at the Bristol Tech show to see how they actually used the product. We also discussed what they would want from a Best Buys product, and ability to search using product filters.
Testing current product with users
Optimisation tests
We ran some A/B and MVT tests on the current product to see what changes to the current product would engage the users
Mobile wireframes
Once we'd collated all the relevant information from the discovery phase the team set about creating wirefarmes (mobile first) based on that discovery.
Desktop wireframes
Initial lo-fi (Balsamic) wireframes to hi-fi (Axure) wireframes
Best Buys navigation treatment
We created various different design comps both mobile and desktop and then tested those.
Results
Engagement
● Month-on-month (Sep -> Oct)
○ 21% increase in Best Buys pageviews (exc. main landing page)
○ 13% decrease in time on page
● Year-on-year (Oct-Dec 2016 -> 2015)
○ 10% increase in pageviews (faster than typical organic growth)
○ 9% decrease in time on page
E-commerce
● Retail Solution clicks sitewide up 18% (Sep 20-Oct 3 => Oct 4-17)
● GA clicks on Best Buys went from 5000 (Sep) to 25,000 (Dec)
● Translates into ~£3,000/month extra retail revenue
Advertising
● Revenue: +11% (+£4300) y-o-y (Oct-Dec 2015-2016)
● Impressions: +12% y-o-y (Oct-Dec)
● Viewability: +12% y-o-y (Nov-Dec 2015-2016)
● Click through rate: +3% y-o-y (Nov-Dec)
● Ad data
○ Monthly: June - present
○ Year-on-year: August ‘15 - present
