Woolworths

Woolworths is Australia’s largest supermarket chain. Operating 995 stores across Australia, Woolworths relies on the 115,000 team members in stores, distribution centers and support offices to provide our customers with superior service, range, value and convenience.

My job as Lead Product Designer involves growing the design team, mentoring, setting up design processes and improvements, design future focus strategy, cross-team alignment, brown bag sessions, stakeholder engagement, leading design on native app and web projects, and being a visible advocate for design thinking.

Role: Lead Product Designer

Project: App & Website Design

Year: 2019 – 2021

Introduction

Over the past few years at Woolworths, I have worked on many design and strategic projects. These have been for the native iOS & Android platforms and also for the websites. The projects have been for customers shopping online, in-store, browsing content and using the Everyday Rewards app which you can see in another case study. As the work has been extensive and broad I am going to show examples of design artefacts that I create during the lifecycle of a project, as each project is different I may create different outputs each time. One thing that doesn’t change is the design process I use which broadly covers customer research, business analysis, workshops, concept creation, prototyping, user testing, market validation and release.

Discovery Research

At Woolworths, we have a defined and well-tested way of conducting research and initial discovery of a project. As we follow the Double Diamond of design each project has a clear start and endpoint in which we perform various product design activities to experiment, test, and learn as we continue with the work. Some of the activities we may do in the research phase is demonstrated below are:

Problem Statment Definition Workshops: These are to really analyse the project before we kick it off, these help put us in the mind of the customers and what they might be thinking and feeling.
Design Workshops: Design is a team sport so workshops are crucial to getting everyone’s ideas out and visible so we can talk about them, vote, and create together.
Competitor Analysis: Used to understand the market and what others are doing, we can pinpoint gaps and find unique ways to stand out against them if we do this properly.
Persona Creation: We create personas and archetypes to visualise who the users are and try to solve for their needs, these are also fantastic as a reference point for marketing and recruiting users for testing.
Surveys & Interviews: By speaking to our customers we can extract important information that will help us make sure we are designing the best and most effective products for them, we may even come across brand new ideas to use.

Two food-specific Archetypes

Survey Insights Synthesis

A section of a Competitor Analysis

Define Phase

After we gather information and talk to users and the business and experiment we start to narrow in on what some of the design solutions could be with the user and the business goals in mind. In this phase that we start to really solidify and put pen to paper so to speak. We want to see our users in action and understand what they are thinking and feeling in order to design the right experiences for them. Below you can see a customer journey map used to identify pain points and sections of a shopper journey. Next, you can see a teardown of Walmart where I analyse each screen and look for opportunities and gaps.

A shopping journey map

A Teardown Analysis of Walmart

Wireframes

Once we have a good idea of what we are designing creating wireframes is the next step. These can be done in low fidelity in greys to focus on the main interactions and experiences without getting distracted by colours. This is only used strategically for certain projects as sometimes using colour high fidelity wireframes can better to show a more accurate final product to the customers for feedback.

Low Fidelity wireframes for early testing

Research & Presentations

As we proceed with the project I find it super valuable to document the outcomes of each piece of work. For example below you see some slides from research decks where I explain and summarise the main takeaways from speaking with 50 customers. I condense this down into something non-designers can read and understand easily. After we do our user testing it is also important to show what happened, we do this by bringing people along to watch the live sessions and then by presenting it in an easy-to-read deck for discussion.

Slide from a research survey presentation deck

Slides from a user testing results presentation deck

Slides from a user testing results presentation deck

Design Phase

After completing all the necessary steps of research and exploration in the first two phases we now know what the users are thinking and have a more defined vision, we then move into the design phase where we start creating the high fidelity wireframes, interface designs, and prototypes for the final user testing, presentations, and refinements. For everyone to understand how a design journey connects together I create wire flows that show each touchpoint a user clicks and where that leads to. I also make prototypes out of these to user test and share around the business for feedback. Figma allows us to create all of these things quickly and easily. Below you can see a complex end-to-end wire flow showing every screen and touchpoints a user needs to purchase a container with rewards credits. After that is a prototype animation showing the fresh ideas for you section of the Woolworths app.

Final wire flows for a collectibles project

Final Interface Designs

Once we get to the final pixel-perfect UI design stage we are close to starting development. By using a design system containing, components, grids, colours and brand styles we are able to design consistently and rapidly inside of Figma. At this stage, we also prepare any assets to export for the developers and create final prototypes for the last rounds of user testing if it is required. Once all is confirmed we can send the dev team the Figma links and work with them to make sure everything is coded as planned and working smoothly with no bugs, we would also look at animations to make it come to life and delight our users. See the final designs created for the Woolworths recipes sections below.

Final designs for the recipes section of the iOS app

Final designs for the recipes section of the website

Post Release Optimisation

When the project has finally been developed and released smoothly with no bugs or issues we monitor and optimise the designs for constant improvements. We do this by observing data analytics, using surveys, A/B testing new design ideas, and talking to our customers. The great thing about digital products is they are never done so there is always room to experiment with new things and keep improving to create the ultimate customer experience!