Redesigning a South African Icon: overhauling Woolworths’ Online experience for timeless Impact

Woolworths Online faced challenges in designing a cohesive user experience due to the diverse shopping needs across categories like Food, Fashion, Beauty, and Home, each with unique browsing and purchasing behaviors. This made it difficult to create a seamless journey across different product categories.

Year: 2019

Studio: MakeReign

Role: Lead Product Designer

Services: Research, UI Design

Slide deck presented to stake holders

PLP card variations for departments

PLP card variations for departments

Problem

Woolworths Online faced challenges in delivering a cohesive and modern user experience - its outdated UI and the distinct browsing and purchasing behaviors across categories like Food, Fashion, Beauty, and Home made it difficult to create a seamless, unified shopping journey.

Goal

Improve the overall shopping experience on Woolworths Online by designing a cohesive and user-friendly interface that seamlessly integrates multiple product categories, driving higher engagement and conversion rates across Food, Fashion, Beauty, and Home departments.

Process

I led research efforts to gather insights in Global and Local competitor landscape and used this information to shape my design decisions.

01. Reviewed customer feedback from surveys

Worked closely with the founders to map out key workflows, ensuring alignment on the overall vision and understanding of the product's goals.

02. UX Audit to define key pain points

I conducted a UX Audit to identify pain points on the Desktop and Mobile sites. This helped me to identify areas for improvement.

03. Feature audit of local and global competitors

Woolworths Online store had a unique offering that allowed users to shop Food, Fashion, Beauty and Home items in one sitting. In order to fully understand what other competitors are doing for their target markets, I dug deeper into what features were commonly used on their sites and cross-referenced with what Woolworths did and did not have.

04. Develop guidelines for UI

We developed guidelines for consistent PLP cards across departments, designating areas for key info like labels, discounts, and colors, while staying true to core design principles. Research on competitors revealed that leading brands favored larger grid structures to highlight product photography, which inspired our new grid layouts for the PLP and PDP.

05. High-fidelity wireframes

As our role only focused on the PLP and PDP pages, we had to consider the overall aesthetic which Woolworths already defined with their navigation, footer, homepage and department pages and develop a UI that was not completely foreign to what they have.

06. User Interface Design

We developed a cleaner and modern UI to suit the new Woolworths rebrand and make it more timeless.

Impact

I left this project ahead of development ending, and do not have exact data to inform success, however, I can with confidence say that I have achieved the following:

  • Redesigned the end-to-end shopping experience across key categories like Food, Fashion, Beauty, and Home, improving navigation and conversion potential.

  • Delivered a modern, brand-aligned UI that has remained visually relevant and functional more than 5 years later.

  • Led research-driven design decisions through competitor audits and usability insights to align with local and global ecommerce standards.

Product listing pages

Product listing pages

Tablet variation for product listing pages

Tablet variation for product listing pages

Product description pages variation for departments

Product description pages variation for departments

Product description pages

Slide deck presented to stake holders

Slide deck presented to stake holders

PLP card variations for departments

PLP card variations for departments

© Nicola Badenhorst 2024

© Nicola Badenhorst 2024

© Nicola Badenhorst 2024