Product Page Redesign

Posted 19th February 2017, in UX Design

Redesign of SuperBreak's product page, improving the user experience, website consistency, conversion rate, SEO rankings and visitor numbers. The key highlight was a +96% improvement to year on year conversion rate for SuperBreak's Theatre Product pages; +22.13% page value increase for hotel only; +14% conversion rate increase for hotel only.

Computer displaying SuperBreak product page

Involvement:

  • Lead Designer

Background

original product page

SuperBreak receives over 5 million visitors a year and sells a wide range of products including theatre breaks, hotel stays, minicruise, attraction breaks, rail breaks, Eurostar and more. The product page is key to any of these journeys but had not been improved for some time. The page was also inconsistent between products with the layout and content structure varying. There was therefore much scope for improvement to its visual appeal; usability; content and overall user experience.

Working with a number of people and stakeholders, the page went through several rounds of design and usability testing. Each round we saw usability testing scores improve, bench marking each version against the last. The redesign resulted in a much improved user experience, consequently resulting in many key performance indicators dramatically improving.

The new design would:

Consolidating Product Pages

Products were set up in various ways, partly due to the limitations of the system. For example, for concert and event breaks, there were different product pages for ticket type and venue which led to sometimes over 10 seperate product pages for the same event. Other than usability reasons, this wasn’t great for SEO. Therefore one of the first things we had to do were consolidate the pages by planning out the user journeys so that each product could have one page with similar features, but slight permutations to account for the difference in product.

We also had several brainstorming meetings to discuss ideas and objectives of the new designs.

This is a sample of one of the flow charts used:

flow chart depicting user journeys for different scenarios

Initial Designs

Several ideas were developed which went through a few rounds of design and feedback internally before settling on two many approaches.

Wireframes were created using Axure RP, these were a collaboration between myself and another designer. Click to view full versions.

product page thumbnail
product page thumbnail

User Testing with What Users Do

These were developed into clickable prototypes using Axure RP so that we could user test them. A benchmarking system was used to record low, medium and high issues. We could then compare the scores of the two designs, address the issues and then test again to see if the new design scored better.

This is an example of one of the user journeys: Fake user journey. (note the test was done a few years ago so many of the pages look pretty old now!).

This is an example of one of the clickable prototypes used: Hotel page prototype

User Testing Stage 2

One of the main concepts of the design was that it used tabs to display content. However, it was determined that either more content would need to display on the first tab or a design without tabs, using anchors instead, would need to be used for SEO reasons.

We ran this round of user testing internally. I have observed user testing sessions before but in this case, my role was to design the version, created the Axure RP prototypes for testing and to make any changes to the designs based on the results of the testing.

Version 1

View the Axure RP prototype and fake user journey for version 1 of the test.

Version 2

View the Axure RP prototype and fake user journey for version 2 of the test.

version 2 product page

As the designs had already been through user testing we were keen that the new version, which would work better for SEO, would also still perform well for users.

Benchmarking the designs, v1 performed as well, if not marginally better than v2. It was also the version most likely to be best for SEO.

Applying the product page design to various products

I then had to create designs for a large variety of permutations of the product page, some of which are viewable here: product page designs

One of the key versions is SuperBreak’s theatre product page, seen below. I designed the bulk of this page but another designer assisted by redesigning the search interface / steps / mechanism.

SuperBreak theatre product page

Front End Development

I did the front end development for much of the product page project, creating HTML,CSS prototypes of the designs, for the developers to use.

The development project was huge, given the expanse of the website, as well as the continual content task of sourcing bigger images and adding content.

laptop displaying superbreak hotel page

Conclusion

The product page redesign led to many key metrics improving across the products, including a +96% improvement to year on year conversion rate for SuperBreak’s Theatre Product pages; +22.13% page value increase for hotel only; +14% conversion rate increase for hotel only. We also see session times, SEO rankings and tablet conversions increase.

The project also opened up further opportunities to enhance performance of the pages even further, through AB tests, as part of a continual cycle of iterative enhancement.