Woolies X
Food Hub Initiative
Case Study by Garett MacGillivray
1
Woolworths Overview
Woolworths Group is made up of some of the most recognisable and trusted brands within Australian retailing. Woolies X is the digital arm for Woolworths Supermarket and its’ various services.
2
Woolworths Current Situation
The COVID pandemic sped up the adoption of digital products and services among consumers changing the public's daily habits and professional lives. With increased competition from local and international giants, and the rise of food delivery services, customer expectations were rapidly shifting. The pressure to innovate had never been more intense. Before COVID, Woolworths Group had never really anticipated how integral Woolies X could be to their business.
3
The Food Hub Initiative 🍲
Due to the increase in usage of their digital services and platforms. This presented a magnitude of business opportunities. The Food Hub was one of these initiatives.
The goal of the Food Hub is to provide new and existing customers with best in class food-related content, inspiration, recipes, celebrity and user-generated content, helpful tools and personalisation.
Increase Share of Voice
“My Woolies”
Cast a wider SEO net
Increased Customer�Engagement
Increased Additions to Cart
Personalised Product Suggestions
4
My role within the team
As a lead product designer at Woolies X, my role within the Food Hub initiative is true end-to-end design (UX & UI), from discovery to delivery.
This involves:
5
Team makeup
I am part of two teams responsible for delivering the Food Hub Initiative. One team is responsible for the web platform, the other, the IOS and Android platforms. Our teams are composed of a Product Designer per team, Product Owners, Full Stack and Front End Developers, QA and Scrum Masters.
When I started at Woolies X I joined a design department working in silos, the web and app design teams had separate communication channels, weekly meetups, and cultures. Initially I was assigned to the web team and the web specific project for Food Hub, however I quickly reached out to the Food Hub app counterpart to begin a much more collaborative effort across the projects and platforms.
We had become one of the first successful omni channel teams within the company, and thus became a case study internally. Woolies X has since shifted its’ teams to be feature lead, in order to achieve feature and experience parody regardless of platform..
6
Our Design Process
To create great digital products it is important to follow a design process. For the Food Hub we use my favourite process, The Double Diamond of Design. This process is easy to understand and explain to team members and stakeholders. It clearly shows what stage the design is in and what’s up next.
Discover
Define
Design
Deliver
Problem
Solution
Research, understanding, synthesis and workshops
Wireframes, prototypes, testing and interface design
7
Discover & Define Phases
🕵️
Discover
Define
Design
Deliver
Research and understanding, Synthesis and workshops
8
Recipes and Content Hub
When I joined Woolies X, the team was coming out of, what I would consider to be, the initial discover and definition phases of the Food Hub. We were still in the process of finalising team members to assemble our teams. It was my duty to get up to speed.
We analysed Woolworths existing recipes and content hub analytics and conducted competitor research with users, in an attempt to identify gaps and pain points on both web and app platforms.
Once I began onboarding with the previous UX designer, I interviewed various stakeholders to see what was working well and what wasn’t, analysed our comparative “Recipe Hubs” research with users, various analytics to identify gaps/pain points, app store reviews and existing food/recipe content on the web/app platforms.
Objectives, hypothesis and success metrics where then identified for us to move into a definition phase.
9
Recipe page visits
Oct 2019 - July 30 2019
COVID hits Australia
10
Internal Analysis
11
Competitor Analysis
12
Research Takeaways
Future Objectives
Behavioural Observations
Business Opportunities
13
Moving ahead
More than a month into the project (October 2020) our team was still in the process of finalising. We lacked developers which is essential for feature feasibility and great product team collaboration.
We had a looming deadline identified as Christmas 2020 from stakeholders which put pressure to begin the design phase utilising our discovery research to begin testing hypotheses, observing customer behaviours, and aligning business opportunities.
Once I began onboarding with the previous UX designer, I interviewed various stakeholders to see what was working well and what wasn’t, analysed our comparative “Recipe Hubs” research with users, various analytics to identify gaps/pain points, app store reviews and existing food/recipe content on the web/app platforms.
Objectives, hypothesis and success metrics where then identified for us to move into a definition phase.
14
Design Phase 🎨
Discover
Define
Design
Deliver
Wireframes, prototypes, testing and interface design
15
Prototype, test, iterate, repeat
Utilising Woolworths existing Design System, we crafted user flows and prototypes within Figma. These are built to test hypotheses, feature ideas, and general affordance with users.
We started wide, capturing an array of flows from the entry point of the Recipe Hub, to onboarding via personalisation, search, and the recipe page itself. Gathering insights across the flow which help us determine the next steps.
16
Testing
User interviews typically happened on a fortnightly basis. We craft prototypes and user flows to test specific hypotheses and ideas.
Each user testing session was held remote, due to COVID, with multiple note-takers and a host. We rostered between note-taking and hosting. Five users are interviewed per session and we utilise the software “Miro” to track feedback from users in real time.
As a group, we then review user feedback, and collaboratively sort common themes to identify next steps.
17
18
👍 What’s in your kitchen
All users liked the idea of having a way to see recipes based on what they have.
👍 Visual Search Options
People felt that having visual options to choose from within search helped them make a decision. Some people commented on how easy it was to see what an emoji meant.
👍 General Navigation
All users could find and use content carousels of search to look for recipes.
🤔 What’s in your kitchen
Participants mentioned they could expect WIYK to be displayed on the previous page not in search.
19
Interesting User Quotes 💬
“I search for recipes using Google, I wouldn’t think to come to Woolworths to look for them.”
“Fresh ideas for you, sounds more like an idea book or catalogue”
“I hate those big introductions, and those spammy ads on recipe websites”
“I want to know how many calories this recipe is per serving”
"Oh that’s nice, it shows recipes and products when I search for chicken, I’d use that"
“I think what’s in my kitchen is great I would definitely use this!”
“I’m vegetarian so I hate when meat dishes are shown to me”
"This recipe is really nice, very clear and easy to use"
20
Defining an MVP
We forged ahead knowing that the feasibility of our designs would not be assessed until our team had been finalised with additional developers. Once we had a complete team, it was time to identify a minimal viable product (MVP).
The MVP for the web was the Recipe page launched on an all new CMS. This allowed us to narrow in on the Recipe Page and start identifying desirable features we could introduce. The MVP for the apps was to launch these features in parity with the web.
21
22
23
“Easy to follow along.”
“The pictures on each step help me, very nice.”
“Cooking equipment is odd, I won’t always have what they might mention, so I might not bother cooking the recipe”
“Having the ingredients on the step is great!”
24
“I understand calories, not KJ, I use a lot of American apps”
“I’m not sure what these fill up to. Is there a daily cap on sugar? That wouldn’t make sense.”
“I follow KJ not calories”
“I like the energy graph thing, its’ gives me a good idea of how much energy the recipe will be and it looks nice.”
“If I wanted to know more, I’d click the more button”
25
“I love the copy text, I’d use that to paste the list into my notes app”
“I can increase serve sizes, that’s great for my family!”
“Adding the recipe to my cart is great but how do I swap things or choose the brand I want?”
“I assume Woolies will add their home brand ingredients, I don’t want those...”
26
The ‘Copy Text’ feature
Throughout user testing we uncovered an array of ways users save ingredients for shopping. Screengrabs, writing the ingredients down on paper, emailing themselves links, or writing/copying into a notes app. We wanted to provide a useful tool so trialled a “copy text” button which copies the ingredient list to the users clip-board, allowing them to paste it anywhere they preferred.
Feedback within user testing was positive and we advocated to launch this into the platforms. However, stakeholders feared this could lead to loss in conversions with users leaving the ecosystem and not utilising our own “lists” feature and there was a push to strip it out.
I organised a meeting with the various stakeholders, our team. I ran through our various user tests, highlighting how users actually engaged with recipes, outlining the benefits this feature would bring to our existing and potential customers. Running through direct quotes from our qualitative research, the brand lift opportunity and spoke to our new Woolies X ethos of being customer centric. It worked, we got the green light to include it, and the analytics now speak for themselves.
27
User Insights for Digital Recipes
28
Deliver Phase 📫
Discover
Define
Design
Deliver
Wireframes, prototypes, testing and interface design
29
How it played out
Although I framed this presentation in phases, things did not fit a strict timeline or order. We had multiple streams of work in various stages of the design process. Our teams were busy building features of the recipe page as we further tested and finessed others. Eventually though, we launched our finalised MVP Recipe page in March of 2021 on web, and an upgraded recipe hub on both the IOS and Android platforms.
30
31
32
33
Web Results
Since launching the overhauled recipe pages we’ve seen steady growth in organic SEO and visits to our recipe pages, and a reduction in bounce rates.
34
Web Results
There has also been a large trending increase in ingredient cart additions, copy ingredients, and add to Woolworths Shopping list from our recipe pages since launch.
35
App Results
Since its launch, our app has not seen a meaningful increase in user engagement with recipes. One of our assumptions is that this can be attributed to the limited navigation which suppresses discoverability. We have since spearheaded a business case to introduce an additional navigation pattern which could solve this problem, not only for our project, but many others. We have ran 4 user testing sessions to determine discoverability and affordance, and handed our work and research over to the navigation team which will be launching this new pattern.
36
Current state
After launching our MVPs, we have been prioritising features in our backlog as well as work on multiple streams of features in various stages of the design process.
Staying curious and hungry!
37
38
39
40
41
42
Our ways of working
43
Workshops
Examples of some workshops we like to host:
How Might We – Write down opportunities and pain points onto sticky notes, then present them to the group, we then affinity map them into patterns and dot vote.
Lightning Presentations – Present your favourite app relevant to the project and explain why it is good and any limitations.
Experience Mapping – Write down who solves the user needs the best “eg buying shares” explain why the experience is good and any limitations.
Crazy 4’s and 8’s – Draw out 4 or 8 ideas onto a piece of folded paper then present them, the group then dot votes on the best ideas.
Solution Sketch – Draw out ideas onto a piece of folded paper then present them, the group then dot votes on the best ideas.
44
Some examples from various workshops
Icebreakers
Common themes
Opportunities & Challenges
45
46
47
Playbacks
Every sprint we create a design playback deck to run through the work we did. This ensures total visibility of the design team work in flight and process involved. Transparency is essential for building trust with the within our team and wider business.
48
Feature process
Each design epic is treated as its’ own project. We consolidate all research, workshops, prototypes and playbacks into a dedicated confluence page. This project page has a task list to ensure we adhere to the double diamond design approach. ��We find this method of tracking our projects very effective, a great way to onboard new people to the team, and a fantastic way to organise our work for any future requests.
49
What I am most grateful for?
50
Thank you!
🙏
51