Notonthehighstreet Product Listing Pages

 

Redesigning the UX for the PLP (Product Listing Pages) as part of the site re-platforming.

Background

To support the re-platforming of the site, I led the UX design of main site pages (PLP and PDP) which account for 74% of traffic. Here I will be referring closely to the PLP redesign.

Notonthehighstreet.com is an e-commerce marketplace for handcrafted and bespoke sellers of all sizes.

The company undertook a decision to re-platform the site, starting with the Product Listing Pages (PLP) and eventually Product Detail Pages (PDP), both of which I did the UX Design for. In this project I will talk about the PLP.

As a newly formed Product design team, we had a window of opportunity to redesign the UX for the PLP, which would be the first pages to go onto the new Design System.

The PLP includes Category listing pages (CLP) and Search listing pages (SLP) as well as Partner PLP (PPLP), which are listing pages with products sold by a particular Partner/Seller.

Challenge
There were a few hurdles we had to overcome in this project:

  • Time constraints meant we had to be lean in our decision making for the PLP, we found ways to quickly validate our ideas and work with the development team who were already preparing the backend.
  • There was also no digital design style guide or system (when starting UX for the PLP) but this presented an exciting challenge because the new structure and UX for this project would form the first building blocks of the new Design System.
My role and deliverables

I was leading the UX for this project. I had to get designs approved from Product Manager, Head of Product and Product Design and was responsible for liaising with relevant parties, such as Developers or Analytics in order to collect the correct data and insight in order to inform design decisions.

I created several UX deliverables including journey maps for particular journeys, interactive low-fi prototypes, research reports (working with User Researcher).

My involvement in the project process

UX Design

  • Competitor analysis
  • Best practice reviews
  • Interactive lo-fi prototypes (as wireframes)
  • User testing (Analysis and gathering research questions)
  • Weekly reviews with PM, Principle Designer and Head of Product & Product Design. Liaising frequently with stakeholders.

Visual Design

  • Helping create the new Design System by validating and testing the parts of the system via User research.

Production & Sharing back

  • Ironing out UX issues with developers
  • Presenting back how and why we made certain decisions to wider stakeholders including to CEO

Finding opportunities for MVP

We kicked off the project by doing a week long abridged online Design Sprint. (For this PLP Design Sprint I was a key participant and presenter, however for the PDP project I arranged and moderated the design sprint).

This activity included people from different parts of the business getting together to understand the user pain points and data points in order to come up with ideas. We then tested a selection of these ideas with prototypes at the end of the sprint.

This formed a basis of understanding for which aspects should be prioritised, the Product Manager used this to prioritise aspects such as filters, sign posting and pagination.

The site experience on desktop for a CLP page (Jun 2020)

The site experience on mobile (Jun 2020)

I prefer the count of goods at top...you might click on something while scrolling. [Users were observed trying to scroll all the way up on mobile, in order to see how many results they had to narrow down]

Anon UserDuring user testing session

Below you can see how I analysed pain points users had described in previous user testing. I looked at which items could be low effort but high in impact (using an impact vs effort matrix). This was then used by the Product Manager (PM) to prioritise features and user stories.

Designing the experience

User prioritised user stories and collaborating with PM

Competitor Analysis

Low-Fi wire-framing and interactive prototyping

User testing

Sharing results and getting stakeholders on board

Iterating the PLP: between SLP, PPLP and CLP

Using insights gained from best practice and competitor analysis I created variations of different components. I then liaised with key stakeholders in order to get particular ideas and components approved. For design variations, potential risk level was assessed by how we could easily unpick a bad decision incase data showed something had gone wrong after release.

We made several decisions in order to improve the UX, included but not limited to….

Bringing hierarchy to guide the user : 
Although we could not hide the repetition of categories as we were constrained due to SEO concerns, we managed to make it more discreet.

We also made interaction decisions such as having the “filter” and “sort” as a sticky, once the user scrolls up on mobile. To recognise their intent of not having found what they need (better shown in live site).

Better transparency :
Making important information such as the number of products and the applied filters more transparent and intuitive to users, by carefully considering its placement and design.

Separating “Filter” and “Sort” to make it better aligned with competitor sites and user mental modal.

Reducing friction :
A new style of pagination to encourage exploration and simplify the experience of browsing.

The process went through regular feedback and once we had a high level of confidence with our chosen design, we put it through User testing.com.

I created an interactive wireframe prototype using Axure Pro. The purpose of this was to show different components interactively and use the chosen versions to collate a final version. It provided an easy way to view wireframes interactively via different responsive device view ports.

Final UI Design

Below is the CLP (Category listing page) which is part of the final PLP re-design. We tried to emulate the same experience throughout all the PLP’s : PPLP (Partner PLP), SLP (Search listing page) and CLP pages.

UX was handed over to the Principle Designer so that it could be the starting building blocks to the Design System.

Project Outcomes

We released the PLP over several weeks (first CLP, SLP, and then PPLP) to more and more users through an AB test. The release of the PLP to 100% got a flat trending positive uplift and the SLP was trending positive at…

+3

more TTV per user uplift

41000

more per week at 100% of users (circa)

2000000

more per year (circa)