Redesigning the online experience of a South African favourite

Year: 2019

Studio: MakeReign

Role: Lead Product Designer

Services: Research, UI Design

The client

Woolworths is a premium retailer that is known for selling quality produce, clothing, home and beauty items to consumers within South Africa.

The challenge

Woolworths Online has a unique website which offers users the opportunity to shop between various departments, such as Food, Fashion, Beauty and Home, in one sitting. Due to this the shopping style of an individual doing grocery shopping would be different to another who could be shopping for beauty, fashion or home items. Our challenge was to improve the overall user experience from browsing products on the Product Listing Page to the Product Description Page, while developing a new modern and clean UI to go with the brand.

The solution

We conducted research to understand current usability problems the current website faced and to define local and international benchmarks for ecommerce sites. We were able to use the research to define UX and UI improvements for the PLP (Product Listing Pages) and PDP (Product Description Pages) for the various departments (Food, Fashion, Beauty and Home), as well as design a new UI to elevate the brand.

Understanding the local and global landscape

I conducted research on local and international competitors in the Food, Fashion, Beauty, and Home departments to develop benchmarks. To further define improvement opportunities and enhance the overall customer experience for the PLP and PDP pages, I completed a feature audit along with an UX audit.

Based on our research, we identified key areas for improvement for the PLP Cards, Filtering, Grids, and PDP pages, and presented our findings in a presentation to key stakeholders for each department.

Slide deck presented to stake holders

Improving the browse-ability of items to increase sales without sacrificing minimalism

Each department had their own clear financial targets and sales strategies, to ensure successful sales in their specialised area. This led us to examine the PLP Card in more detail and define guidelines for handling all of the information from each department in a simplified and contained way. We were able to deliver a PLP Card that included all necessary product information (Colors/Volume, Brand, Name, Tags, and more) from each department while maintaining a clean and minimal feel.

PLP card variations for departments

PLP card variations for departments

Product listing pages

Product listing pages

Tablet variation for product listing pages

Tablet variation for product listing pages

Providing the perfect amount of product information to a potential customer

Based on our research, we were able to define areas for UX and UI improvement for the Product Description Pages. Some of the improvements included, larger product imagery, scroll through thumbnails, free delivery call outs, find in store, recently viewed products and more.

Product description pages

Product description pages variation for departments

Product description pages variation for departments

© Nicola Badenhorst 2023

© Nicola Badenhorst 2023