UX Research, Content Design, UX & UI Design

Product page design

In this project, I was tasked with redesigning the website's product pages to improve the user experience.

The solution

The outcome of this project was a working prototype, which is being used to develop the refreshed webpages.

Overview

We had received feedback from customers that the product pages were difficult to use. I was tasked with completing a landing page audit, conducting research and creating a working prototype of an improved design.
Deliverables:
  • Site audit
  • Competitor SWOT analysis
  • Research report
  • Iconography
  • Low fidelity wireframes
  • Prototype
  • Stakeholder presentation

Product page audit

When completing the audit, I empathised with our website users to understand the pain points of the current design. See the Figma file below to read my annotation of the pain points. I presented this information to stakeholders in a report.

I also had a look at the data collected from HotJar to see where users were (and were not) clicking.
view product page analysis
Overview of HotJar data:

Competitor research

I compared the features of our website with three direct and three indirect competitors. All three of the indirect competitors had brilliantly laid out product pages that enhanced the customer experience.
Overview of competitor research
Examples of good design from competitor analysis    
Easy to understand colour options.
Contact button above the fold.
Icons to help the user scan the page quickly.
Large images that users scroll through.

Problem statement

Our business customers currently struggle to find the information they look for on our product pages. Our solution should deliver a clear and concise refreshed product page design; with an improved user journey.

By improving reducing the cognitive overload that some customers face when navigating the product pages, we will increase product understanding and the customer experience.

Prototype

After creating a few low fidelity wireframes, I used Adobe XD to create a working prototype.

Click here to interact with the prototype.

Wireframes

After creating a few low fidelity wireframes, I used Adobe XD to create a working prototype.

Final design and analysis

This is a video that demonstrates how the prototype works. In Adobe XD, I struggled to recreate a sticky module. Content on the top right was set as fixed, which got covered up with a white box as the user scrolled to re-create the effect.
Analysis of this project
The aim of this project was to research the best product page practice, alongside competitive analysis. That body of work should have informed design decisions when creating low fidelity wireframes and a prototype. The problem statement outlined the reason for this project: our customers struggle to use the current product pages to find the information that they need.

In the page audit, some issues with the current design were highlighted which made it difficult for people to use the page. For example, Jakob's Law states that as users spend most of their time on other websites, then your website should function just like theirs. The links on the pages didn't look like links so people didn't click them and struggled to find the information that they were looking for. It was also evident that some of the elements on the page were unnecessary - which contributed to cognitive overload.

The research into competitor's product pages and the best product page practice demonstrated how the information on the page could be displayed better. After conducting the research I removed the large product description which was hard for users to scan. This has been replaced with three bullet-pointed features and three product highlight icons. That is one of the ways the redesign made it easier for people to find the most important product details without overwhelming them with information.

Overall, I believe that this project has been very successful.

The results

I completed a second round of user testing to gather and compare data from before the redesign.