Product List Page

My role at Dunelm throughout it's digital transformation was full cycle. Inititally, I facilitated the stragegic aligment of UX opportunities with business objectives. I then led the rethinking and reworking of the Discover, Inspire, and later the Evaluate vertical of the Dunelm website. This entailed designing for all shoppable pages on the website. Finally, I iteratively released and monitored pages and components to successfully achieve determined UX and business objectives.

Client

Dunelm

My role

UX Consultant, 18 months

Project

Research, User Testing, Problem Reduction, Stakeholder management

Project Background

Dunelm was undertaking a platform migration, with requirements for additional features, new technologies and significant opportunity for UX improvements. Due to an iterative shift from a monolithic data model to in-house microservices, consecutive component based rollouts were required. It would be critical to both maintan a hollistic view and to preserve the live site's integrity when releasing. The agreed method of releasing and monitoring updates allowed for greater freedom and quick quantative perfromance data. There was a dedicated stream for testing, such as design iterations, card sorting and current site user observation.

The Discovery Process

Review of Current Page for painpoints, opportunities and areas of concern.

Lack of spacing around core elements, small text, text lacking in clear a visual heirachy, and inconsistent CTA's and links. The site lacks a visual language to re enforce meaning and enable intutive user behaviour.

E-spots are a common product of optimisation testing, which is heavily quantitive and most often conducted via A/B testing.

These spots are injected into the site, controlled by CMS platforms and designed by content teams sitting outside of technology and UX. The resulting effect is that they are inconsistent with the rest of the site in terms of font, hierarchy, imagery and will not have been put before users. For example, when a navigation element is required, it should be part of a site-wide dynamic navigation system, which would be consistent and holistic, with clear visual language for the user to innately understand.

Filters recieved less interaction than industry standard, and of those who interacted, less CVR

Architecting filters is an interesting challenge, because the majority of users will not use them, but those that do are on-average up to 35% more likely to complete the purchase. This of course could be indicative of the user's original intent and focus on a specific item. However, leading them the most effective way possible gives the best likelihood of securing the conversion, and avoiding frustration.

These filters are particularly problematic as they are not optimised for mobile touch heights, do not provide feedback of selected items and can only be selected by tapping within the checkbox. These obvious oversights cause friction when users interact and hinder them arriving at the evaluation phase..

It is best practice to maintain the minimum amount of content displayed at one time for effective communication.

The existing Dunelm product card offering is cluttered and inconsistent; multiple types of banners are overlaid on the product image. This is a common area for improvement as the images are often low-fidelity, not legible, do not meet screen-reader requirements, compete for attention, and distract the user from scanning the product images.

At this stage in the discovery phase, the user will be scanning imagery and product title information for key requirements or products that take their interest. Anything that detracts from this is in danger of decreasing the CTR, and ultimately, the CVR.

The approach of very minimal beautiful filters was popular across websites prioritising attentive, or with minimal content to filter.

The approach of collapsible filters allowed the user to opt to interact with powerful, functional filters but maintaining the original minimal impact. This does reduce interaction with filters, users are not prompted to interact on first view and should they reach the third page they are more likely than not to exit.

The third approach of featuring powerful, functional filters from first load and aim to attract as many users as possible to interact. In retail, is it standard to find the subset of users who interact with filters to have a higher CVR than those who do not.

Knowns

Unknowns

1Interaction with filters very low at 6-8%
2Exit rate too high consistently above 50% - home retail avg 40%
3CTR & CVR too low

1Why aren't users interacting with filters?
2Are espots enabling or hindering users?
3Are product reviews useful at PLP level?

Hypotheses

1If we reduce the amount of content displayed on the PLP then we will increase the CTR and decrease the exit rate because users will not feel overwhelmed by the current PLP offering.
2If we focus on filters at all stages of scrolling on the PLP then we will improve CVR as users will be enabled to find and purchase the products they are looking for.
3If we create clear and usable Filters then we will improve CVR as users will be enabled to find and purchase the products they are looking for.

My primary focus was to standardise and prioritise the information displayed.

Only one promotional banner, brand to only be used when not a Dunelm product and migrating the content team away from images with banners embeded and instead supporting real time editing of promotional banners in the CMS.

Consistency in placement help form future user expectations.

Clearly show which filters have been selected by the user

The application of the see more and the fixed scroll within the Filter Set boundary is following UX convention but features an improvement of a commonly applied pattern. Many sites allow the user to scroll directly within the Filter Set boundary.

I was keen to avoid creating any areas on the screen in which the user could accidentally scroll filters as opposed to the product list. Keeping the scroll behind an action prevents confusion, jarring dual scroll and also prevents the user from feeling overwhelmed by many options they have not yet displayed an intent to see.

Filter Considerations

Initial state appears sparse without a border when providing users a 40px target area

Focus appears more prominent than selected state.

Selected state is not obviously definied on first impression.

Inititial State is a clear target area.

Focus is defined in colour and thickness from Initial State.

Selected State is defined by 2 traits for increased accessibility. Tick placement is on the right, this enables for consistent text alignment for scanning.

Inititial State is a clear target area and communicates inactive status via conventional visual language.

Focus is defined in colour and thickness from Initial State. Clearly communicates inactive status.

Selected State is defined by 2 traits for increased accessibility. Clearly communicates active status.

Inititial State is a clear target area.

Focus is clearly defined in colour and fill from Initial State.

Selected State is clearly defined in thickness, colour and fill

Having developed a series of Filter Option styles and states I needed to consider them as a part of a larger functional structure.

The structure of the Filter Sets is conventional for a retail website. It was optimal to default some filters to expanded states despite the often long lists of Filter Sets. Expanded Filter sets received 16% more usage and users who interact with filters have significantly higher CVR.

User testing provided crucial insight that usability and preference testing did not. The key areas of concern from user observation were;

4/10 users did not understand the minus icon in the Filter Set accordions when asked to collapse the Filter Set.

3/10 users expressed confusion at the plus icon in the Filter Set accordions with 1/10 believing it would apply all of those filters.

4/10 users did not understand the see more active text with 2/10 believing scrolling in that area would expand and 1/10 thinking that the 8px arrow icon was the click zone to expand.

2/10 users commented after having selected 2 Filter Options that there was “a lot of green” or that the design was “very green”

3/10 users showed hesitation when asked to remove a single applied Filter Option.

Further rounds of user Testing, A/B Testing via monetate and preference testing influenced additional iterations to the PLP. This design had successfully passed our user observations and was ready to launch to the 25% test audience in preparation for launch. The changes include;

Accordions updated to arrows from minus / plus icons

See more links updated to a link style active text from text + icon active text

Selected Filter Options are now black instead of green

Slightly darker grey outlines on borders a divider lines

Icon to delete selected Filters changed to a cross with filled background to be more noticable

Initial

Simple Inititial State with aligned text and 1px mid gray border. This state communicates the filter term it applies and also the amount of results that will return for this term. This is especially important when making multiple filter selections as the liklihood of a user ending up in a 0 results scenario increases. By providing this information it enables the user and helps provide helpful guidance without even being used.

The active target of the filter has drastically increased. Previously 12px check boxes and incredibly tight lists made selecting the intended Filter Option difficult. The legibility and most importantly for a PLP, the scannability is much higher with users showing significantly faster responses when asked to select a particular Filter Term.

Focus

Elevated Focus State with aligned text and 2px black border. This state is designed to communicate to the user that it has been focused on either via the tab key or an accesibility reader.

It is key that this state is differential from the initial state and the selected state in more ways than simply colour due to partial sightedness and colour blindness making this difficult to distinguish. The 2px border, and darker colour emphasise this element and convey that it has been highlighted.

Selected

Defined selected State with aligned text, 2 px Active border & right aligned Active Tick icon. The Selected State is defined by 2 traits for increased accessibility.

It is key that This state is the most defined and easily recognisable as selected, the tick alignment allows users to scan the Filter Options to easily identify those which are selected. The tick icon placement is on the right, which enables consistent text alignment for scanning.

Sticky Header

Maintaining a sticky header gives the user a quick return to the menu should they decide this search is not useful. 60% of users bounce after page 2 so this is an essential anchor to place them back at the top of the conversion funnel.

Pagination

Despite business appetite, user testing proved that infinite scroll would not be effective given the vast amount of products Dunelm sell. Without anchors to refer back to, users lose any ability to re-trace and products become less desirable and relevant the further a user scrolls. This negatively affects their journey, perception of Dunelm and is far more likely to result in a bounce. Pagination was designed to allow a user to reach any page within the result from any page, rather than simply previous and next. In addition, the products were set to 60 products per page as this was the most favourable in the iterative rollout tests performed.

The website attracted increased user visits, 37.5m per year, Annual revenue increased 4.8% to £1.1bn, with pre-tax profits up by 23.4%.

Conversion rates were up significantly, with Add to basket increasing 23%. Online sales were up 130% from the previous year, taking them to 31% of total sales across the business.

Review

It was a hard requirement that the new platform was launched with adequate time for testing, before the peak period in order to allow for a go or no go review. A high risk requirement was that the transition did not disrupt this high value trading period.

Dunelm reinvested in its digital offering and saw signifcant ROI. In 2020 many highstreet retailers made signifcant losses: Dunelm outperformed the retail market due to its new digital capabilities with an increase of online 85.2% in Q2 and 60% year end in online sales 2020 on 2019.