Rocketing online sales by 33%

• Overview

• Project scope

• New workflow

• Heuristic evaluation

• Atomic design system

• Product description page

• Image optimisation

• Bespoke colour drawer

• Responsive hi-fi designs

• Results

Overview

Dunelm is the largest retailer of homeware in the UK. In 2018 their yearly sales reached £1 billion, with £100 million being made online. They planned to move to a more flexible, cloud-native platform. They also wanted to offer click & collect to encourage more customers into stores. This presented the perfect time for Dunelm to revolutionise their online experience.

I was part of an ambitious project to redesign Dunelm’s website from the ground up. I consulted with Dunelm as a product designer for one year between Jul 2018 — Jun 2019. I had the privilege of working along side Richard Palmer, Amber Rose and Drew Tavernier.

Richard was the head of user experience working alongside Drew out of the head office in Leicester. Amber and myself collaborated remotely and on-site at their digital hub in London. We had a team of about 15–20 engineers, including front-end, back-end and full-stack developers based in London. We also had a remote team based in Sofia, Bulgaria of about 12–15 engineers.

Project scope

The work was divided up into two main sections, browsing and buying. Amber and myself were tasked with the browsing journeys whilst Drew worked on buying. We further divided up the buying journeys into two categories, product landing and products description pages.

The PLP (product listing page) is a catalog page for multiple products belonging to the same category. Here you can filter you products and then navigate to the product details page.

The PDP (product detail page) is a dedicated web page for a product. It provides information like price, colour, dimensions, delivery, how to use it and customer reviews. This is also where you can add an item to the basket.

I lead the experience for the PDP and Amber lead the PLP. These sections are closely linked so collaboration was essential for many of the design decision.

Before we could start designing these sections, we needed to redesign and build an atomic design system. This would consist of a component library, specifications for development and supporting design guidelines.

New workflow

The agile framework was also introduced to Dunelm shortly into the project. We could see an opportunity to implement better ways of working and managing designs. We introduced a new workflow and new software tools:

• Abstract — Version control for Sketch

• Sketch — User interface design

• Zeplin — Publishing finalised designs

This enabled:

• Linked libraries between different projects

• Easy updates and quicker delivery to clients

• Version control and backing up of files

• Working in a team and resolving designs

• Seamless handover to teams and developers

A problem commonly faced is ensuring that the final developed version meets the original design specifications. Therefore, I ran training sessions with engineering and quality assurance. This involved showing how the tools worked and teaching best practices.

This helped improve the standard of the build and increased the speed and efficiency of deploying code. This also meant less time was needed reviewing designs as many of the inconsistencies were resolved during the build.

Heuristic evaluation

Our focus was on designing a new beta website. We were however, also keen to provide quick and simple improvements to the current website. If they proved successful they could potentially be carried across to the beta site.

I started with an unbiased UX performance analysis of the website. Using 100’s of UX parameters to compare against industry leaders and user’s expectations. This helped form an actionable and prioritised list of recommendations, with some of the main areas including:

• Searching and filtering products

• Browsing product information

• Arranging delivery and making a payment

• Accessibility and readability

• Design language inconsistencies

Among this list was a collection of quick, low cost and high value tests. Our aim was to implement these as fast as possible to the existing website.

PDP page layout

One of the problems highlighted in the review was the PDP page layout. The majority of the product details were constrained to a narrow right hand column. This created a number of problems:

• A large amount of white space beneath the product image

• A narrow and lengthly product description

• Scrolling that caused the image to disappear off screen

The solution — keep the image carousel anchored to the top of the page. The benefits were:

• Working within the existing page design

• A quick and simple development change

• Content could now be read alongside the images

Search

With over 55,000 products we knew that search was an important part of the user journey. I recommended comparing 3 variants against the control with an A/B test. This is one of the concepts that we explored.

The winning variant proved very successful, increasing:

• Conversion rate by +3.3%

• Search submits by +1.4%

• Add to cart by +1.6%

Zero search results

My hypothesis was that we could reduce exit rate on zero search results page. The existing page provided little guidance and no call to actions. We ran an A/B test with a few different concepts.

The winning variant improved these metrics:

• Reduced bounce rate by -13.2%

• Navigating to a product by +1.9%

∙ ∙ ∙

Atomic design system

The design system was our first major step in designing and building the beta website. This was a collaboration between the whole team. With my background of print design and in-depth knowledge of typography I was tasked with the new type structure.

We decided upon an 8 point grid design system. It’s a consistent and scalable spacing that helps both designers and developers work much faster. From this I set a 4px baseline grid, this allowed for consistent spacing between type styles and components.

Supporting guides were also created to help inform how type should be designed and built. This included optimal line lengths and minimum type sizes for increased accessibility and readability.

To fully optimise the type across devices, breakpoints and type size rules were set. Body copy was set to 17px, which was significantly bigger than before. Heading styles were responsive increasing in size for larger displays.

I built out each permutation in the Sketch library, which was controlled by Abstract. This gave the design team the full list of pre-made type styles to build their layouts. If a Sketch file contained an updated style, the next time they opened it they could see and commit those updates.

This new workflow and atomic style of building component libraries transformed how we worked. If any changes needed to be made to a type style or component, the master library could be updated. This allowed us to make changes across multiple files instantly, something that wasn’t possible before.

Periodically we would gather at the office to share and critique work. This particular workshop focused on the design system components. It helped us to create consistency across all elements and collaborate our feedback and ideas.

∙ ∙ ∙

Product description page

The first step I took for the new design of the PDP was was planing out all the required features. We planned to launch with a selection of these features first, then implement more periodically. Therefore, it was essential to design a layout that included all features. This would avoid any unnecessary re-designing when new features were launched.

Those features included:

• Title

• Pricing

• Options

• Colours

• Delivery

• Stickers

• Favourites

• Product description

• Also bought

• Bundles

• Collections

• Ranges

• Reviews

• Recently viewed

Like most products I design, they usually start as a sketch in my Leuchtturm1917 dotted notebook. It’s the most effective way to document a thought or design. I try and sketch as much as possible during the conceptual stages because it’s fast and easy to share ideas.

Sketches often get designed as low-fidelity wireframes. I usually create blocks of content before working out the details. This allows for quick and simple ways of fitting the pieces of the puzzle together. I often use the principle with post-it notes, this is particularly helpful when collaborating or in a workshop.

Similar to the approach with the design system, I started with type. It’s the most important and fundamental way we communicate information online. So I was keen to build the correct foundations of the page, designing the layout of the product information.

Product information helps bring the product to life with descriptive copywriting. When speaking with our customers, specs including dimensions and materials where important in the decision making process.

One of the main challenges was how much vertical space product descriptions used. I experimented with multiple prototypes which included, read more links, accordions and modals to help try and solve this problem.

In this layout the description and specs are side by side. To reduce vertical height the copy is partially hidden. All the copy can be viewed with the show more button.

This is a similar approach but with a dedicated modal for the specifications.

Here I’ve used an accordion and displayed the specifications in a table.

I find observational, qualitative user testing among some of the best ways to prove or disprove a design hypothesis. Focusing on what the customer actually does is often more insightful than what they say.

For this reason I was keen to test a number of design ideas and options with high fidelity interactive prototypes. In this first prototype I tested:

• Displaying all images on the page

• Removing dropdowns

• Micro-interactions and rollover states

• A full-width drawer for product information

Here I experimented with:

• Stylised dropdowns

• Integrating bundles

• A full page image carousel

This page layout tested:

• Buttons vs dropdowns

• Specification tables

• A full page image carousel

• Displaying all images on the page

Learning from the previous prototypes and tests helped me to evolve the page layout. I tried re-designing certain aspects and new ideas including:

• Product information on the left

• A mixture of drop-downs and buttons

• Bundling products

∙ ∙ ∙

Image optimisation

Images are another fundamentally important part of a PDP. In my research I would often see over engineered and complicated carousels. Many of our older customers struggled with these more complex interactions.

This was the image viewer that was displayed after a customer clicked on an image on our alpha website. It automatically zoomed into the picture, with a thumbnail on the top right hand corner. To move between images you could either use the small arrows on either side or the thumbnails on the left. Scanning across the zoomed image was unintuitive and often unnecessary.

In summary, this made for a busy, complex and frustrating user experience. On mobile this proved even more challenging.

Larger and higher quality images improve the performance of eCommerce products. Therefore, a solution that makes viewing all the images more easily would improve conversation rates. Better engagement = increased sales.

This was an interactive prototype that I built and tested with our customers. A single tap or click on the image opens a fullwidth stack of all the images. No zooming is required as the image is set to fullscreen. The need to navigate with thumbnails or arrows is also removed. As all the images are stacked on top of one another, all the customer has to do is scroll down the page.

We would have regular catchups with engineers, team members and stakeholders. This gave us the opportunity to highlight the outcomes from design sprints and field questions and feedback.

This was the most successful concept and test with our customers and performed equally well on a mobile. This solution was implemented in the final design.

Bespoke colour drawer

One of the most significant problems our customers faced was making a colour selection. Products with less than 12 colour options generally performed well. However, if a product had more than 12 colour options a swatch carousel was used.

Some products have 100+ colour options to browse and choose from. This is common within furniture, curtains and rugs. Browsing the full list of swatches would require the customer to click through batches of 12 colour swatches at a time. With some products this would mean browsing over 10 batches of swatches using the rather clunky and slow swatch carousel.

To actually see the product image in its respective colours, a swatch would need to be selected. This increased the complexity of viewing all product images and colour variations exponentially. Some products took over 3 minutes to browse the full range of colour variations with well over 100+ individual interactions required.

My solution was to remove swatches entirely and replace them with the product images. You simply click on the colour option and scroll through the full catalogue of images across the full colour range.

It’s likely that a customer is browsing for a specific or small range of colours. Therefore, I could improve the experience further by adding filters. This radically improved the functionality, ease of browsing and filtering of colours.

In this catchup I shared the progress made with the colour drawer.

I modified the final version to a drawer that slides in from the right hand side. The list of options are on the right, so this made for a more intuitive layout. The final solution transformed 100’s interactions that could take more than 3mins into a few clicks taking a matter of seconds.

We now had a simple way of picking colours from a long list of options. This meant the introduction of a second user interface component, the colour drawer. This posed some more questions:

• Should the drawer replace swatches?

• Could we have the option of either?

• When could we use swatches?

• When could we use the drawer?

We asked our customer to select a different colour option using swatches. 100% selected the correct area on the screen.

We asked our customers to select a different colour option using the drawer. 66% selected the correct area on the screen. This suggested that swatches were the clearer option.

My recommendation was to display swatches when ever possible. This meant showing one line of swatches if there was room. If there wasn’t room we replace the swatches with the colour drawer.

If you’re on a computer you can you can see how this works on Dunelm’s website. Change the browser width to see the colour options switch between swatches and the drawer.

Responsive hi-fi designs

I’ve often seen the quality of a product fall short during the build stage. This is often due to looming deadlines and poor processes. The minimal viable product can also be a reason why small details and sometimes entire features don’t make it to the final cut.

The devil is in the detail and it was important to ensure that quality was controlled and high standards were met. We periodically reviewed all screens and user journeys. Any final tweaks were made easily with the workflow and tools we introduced at the beginning of the project.

To help achieve the highest quality build we art-worked every aspect of the website across across five breakpoints. This ensured that our designs worked seamlessly across all devices and sizes.

I collaborated closely with the engineers and QA’s to help create a final build that matched the intentions of our design recommendations. The result — a beta website that we were all proud of and excited to see perform.

∙ ∙ ∙

Results

The website went live to a small customer based towards the end of August 2019. By the end of the year the website was fully launched. Here are some excerpts from various publications:

“The Leicestershire-based company was boosted by a large percentage growth in its online sales, which rose by 33.2 per cent”

This is money — 9 Jan, 2020

“Its chief executive Nick Wilkinson said its new website was key to the firm's financial success”

This is money — 9 Jan, 2020

“The retailer’s growth was particularly driven by soaring online sales, with revenue from Dunelm.com rising 32.1 per cent to £47.7 million during the quarter”

Retail Gazette — 9 Jan, 2020

“For the 2020 financial year, digital made up 27 per cent of sales. By the end of its 2021 financial year it was 47 per cent. That's an impressively fast transformation”

Investors Chronicle — 16 Sep, 2021

“Record profits and sales, with online up 120% in two years”

Internet Retailing — 9 Feb, 2022

Over the past few year I’ve seen how the platform has boosted in performance and sales. Its success bolstered Dunelm and helped with its ever increasing success during the pandemic.

It was a project that I was proud to be a part of and had the fortune of working with some exceptionally talented people. A rare opportunity to have such a key role in the digital transformation of an industry leading brand.

You can view all the topics featured in this case study at dunelm.com