Tesco Foodbank Feature

Background

Tesco is the largest UK supermarket, bringing in £52.9 billion in 2020/21. The app has over 5 million downloads and with more people relying on grocery store deliveries year on year, this number will only increase.

Foodbank donations can only currently be made in store. Allowing users to donate groceries to the foodbank through the Tesco app would increase donations from Tesco shoppers.

Challenge

Foodbanks are increasingly in demand but there are limited ways in which people can make grocery donations online. There is no clear guidance as to what items need to be donated, and so for fear of donating the wrong item, people don’t donate at all.

 

Role

UX researcher / UX / UI designer

Responsibilites

Competitor analysis / user interviews / empathy mapping / site map development / user journey mapping / wireflows / prototyping / user testing

Duration

8 weeks

Note: This is a project part of DesignLab’s UX program and has not been commissioned by Tesco. The research is organic and the design is based on real user voices, in combination with mentor and peer feedback.

Let’s tuck in


 

Opportunity

The Covid pandemic had a huge impact on people’s everyday interactions and activities. Online grocery shopping increased during the pandemic with many consumers even today still preferring to buy groceries online rather than in store.

Coupled with this, the pandemic has had a huge economic impact on many members of society with over 2.5 million people receiving 3 day emergency food packages through the Trussell Trust 2020-21. Food produce has increased in price in recent months due to rising global food prices, as well as energy prices rising approximately 50%.

Solution

We needed to add a feature which would allow users to donate items to the foodbank as they shopped for their own groceries. This would bridge the disconnect between the two, increasing efficiency and preventing donations to slip people’s mind. The solution would also allow people to donate financially if they felt this would be beneficial to the foodbank.

The feature needed to be a seamless integration into the already exisiting Tesco app, but bold enough that users were aware of it and encouraged to use it as part of their shop.

 

Chewing on research


Competitor analysis / provisional personas / user interviews / contextual inquiry / empathy map

 

Research Goals

There were a few things I needed to know in order to solve the problem of there being limited ways in which people can donate to a foodbank.

  1. Understand why people buy groceries through an app

  2. Determine how people currently donate to a foodbank

  3. Understand what holds people back from donating to a foodbank

Competitor Analysis

In order to help me get there, I started off with a competitor analysis. Who are Tesco’s comptitors? Let’s take a look at some similar products on the market. I analysed their websites and apps for functionality as well as design.

Ocado High-end priced supermarket, online only

Asda Mid-priced supermarket, stores and online

Morrisons Mid-low priced supermarket, stores and online

Food Bank CMS platform for foodbanks and donors

Spareable CMS platform for users to donate directly for a chosen foodbank

Provisional Personas

I carried out secondary research, examining both direct and indirect competitors, as well as the other foodbank providers, NGOs and food security thinktank studies. As a result I was able to create 3 provisional personas which helped summarise some of my findings.

User Interviews

I interviewed 3 key users, all of whom shopped at Tesco to some degree of regularity. They all bought groceries online on a weekly basis and felt a strong need to donate to Foodbanks.

  • woman with bun and glasses

    Interviewee 1

    Age: 42

    Rabbi

    Married, 2 children

  • Smiling blond woman

    Interviewee 2

    Age 39

    Executive Assistant

    Married, 2 children

  • Unsure-looking curly-haired woman

    Interviewee 3

    Age 42

    Physiotherapist

    Single

 
 

Interview Findings

  • All interviewees relied on a weekly online delivery and went to a physical shop to top up and for extras throughout the week.

  • All interviewees felt an ethical obligation to donate to foodbanks, but there was a range in how often they gave.

  • Two respondents felt more comfortable donating food as it was something tangible that they knew how would be used. One person used to give food but was never sure if what she was buying was appropriate and so now only donates financially.

  • One respondent would like to donate food more frequently, but with a busy homelife often forgets.

  • Those that give financially, want to know exactly where their money is going and how it will be spent.

  • Respondents who donate food want to know that they are buying what is needed not what they are choosing to buy because it is on offer.

“If, when i was doing an online shop, there was a button that enabled me to do something good, I would probably do it”

“From reading [the list of foodbank items to buy]... to physically doing it, it goes out of my head”

“I want to help, but I want it to be convenient”

“Show me where my money is going”

Some key quotes

“[Not knowing what foodbank products to buy]…was making me feel either guilty or hesitant”

“My intention is always there to do more for the foodbanks”

“If someone said to me there is an option on the tesco app to donate to a foodbank, I definitely would. That’s like the easiest way to possibly do it.”

So, what’s the crux of the problem?

Convenience! Our users what to be able to donate, but they want it to be at a time and place that works for them and when they are likely to remember. There is currently a disconnect between donating food items to a foodbank and buying your own groceries. The solution? To combine these into one seamless process.

Contextual Inquiry

Since I wanted to observe people donating, I visited a Tesco branch midweek during lunchtime to observe shoppers and ask questions to better understand their motivations and mindsets.

Standing next to the donation box by the self-checkouts, most people ignored the box. I did however observe 2 people donate items, and a third look at the donation box without dropping anything in.

Donor 1 avatar

Donor 1

Age 55; male

 

Donor 2

Age 31; female

 
Donor 3 avatar

Non-donor

Age 62; male

Summary of Findings

  • 2 of the 3 interviewees would appreciate some guidance in store regarding the produce that the foodbank needs

  • Those that donated items to the foodbank were donating items they had brought from home which were surplus to requirements

  • All those interviewed were very conscious givers: donating food items is an integral part of their charity giving and they don’t rely on signage in store to donate.

Empathy Map

What did we understand about our shopper? Well, a lot actually! How they thought and felt, what they saw, heard, said and did, as well as their frustrations and appreciations of shopping and their feelings towards donating food.

The shoppers


Persona development / user journey / site map development

 

Meet our two personas, Richard and Mandy

Based on the interviews and contextual inquiry, I found that there were two main types of shopper. Richard is a 55 year old engineer, who is very politically-aware and with strong liberal values feels strongly about social issues. Mandy is 43 year old dental nurse whose primary concern is convenience and if she is able to donate when she shops she tries to. These personas serve as a continuous reminder throughout the design process as to who our primary users are.

 

User Journey

Having spoken to users, I felt I had a good idea as their current journey state including their mindset, frustrations and goals. What would be their ideal journey map? What are we hoping to achieve through this process? I looked at both Richard and Mandy and thought cafefully about their how their ideal journeys may pan and differ from one another.

Richard’s primary concern is the cost of living crisis and how this effects those who struggle to make ends meet anyway. He wants to be able to support a foodbank, but is overwhelmed with the options how can he do it? where should he donate? what food should he donate? Using the Tesco app, he realises he can donate at the same time as he shops, and all his questions are answered. He doesn’t need to worry about what to donate or how to arrange it. After he has shopped, he has a strong sense of fulfillment knowing he killed two birds with one stone.

Mandy’s idea state journey map differs slightly in that her focus is the groceries. She is delighted to see that there is an option to donate items as she shops. Donating items to the foodbank doesn’t interfere in her primary goal of food shopping, and therefore focus on the food donation is towards the end of her shopping experience. Like Richard, there is strong sense of fulfilment at the end of her online Tesco shop.

Sitemap

With the users in mind, I needed to establish how the features could be seamlessly integrated into the Tesco Groceries app. Would the users appreciate being confgronted with information about the foodbank as they start their shopping or should it all be part of the checkout process? I thought back to my interviews and remembered a key quote from one of the users “I want to help, but I want it to be convenient”. How could I make the integration as convenient as possible for our users whilst ensuring it was prominent enough to be noticed?

The sitemap below is what I came up with…

Cooking up a storm


Wireframe sketches / Wireflows

 

Wireframe sketches

With the sitemap and information architecture charted out, I was able to begin to ideate potential layouts and build out content sections for the feature. I spent time experimenting with varying content arrangements and research-based features until I found a layout that made sense within the scope of user needs, wants, and the existing structure and visual guidelines of the existing app.

The sketches below focus on the order details screen in which the food donations are clearly indicated and the ability to donate financially as well. Utilitised a similar structure currently used on the app for finding a store, the user is also able to search for a local foodbank to which to donate. i also sketched out screens that outline the items that the foodbank currently needs. This would include high priority items, as well as those that are always needed. This takes the guesswork from the user, so they know exactly what is needed.

Wireflows

Using my sketches as a frame of reference, I designed mid-fidlity wireframes in Figma, creating both new screens as well as adding small changing to other already existing screen. I integrated these to create some handy task wireflows which shows how a user would log on to the Tesco app, buy groceries as well as donate items and money to the local foodbank.

Prototype


 

It was at this point I was able to fully integrate all the elements of the user flow, wireframes using Tesco’s successful UI kit to create a prototype which allows users to add food items and/or donate financially to their foodbank.

Testing menu


User testing / Affinity map / Iterations

 

With a workable flow and prototype I was able to start testing the prototype and gauge whether I was heading in the right direction.

I carried out moderated user testing over Zoom in order to determine the successes and frustrations of the prototype.

Overall impressions: a well-integrated feature that highlights the idea of donating to a foodbak giving users a focused way of giving both food and financially.

I analysed and synethised the data to produce an empathy map which focused on 3 main screens: home; basket and checkout.

Iterations

As a result of the user testing, it was clear that a few minor tweaks needed to be in order to ensure that users were aware of the added feature and used it to its full potential.

  • Making the foodbank feature more prominent on the home screen. This could either be done by making the section higher up on the screen and/or adding a banner at the top.

  • To clarify on the basket screens which items are for the foodbank and which are for personal use.

  • Create a clearer financial breakdown on the checkout screen of groceries that were being bought for the shopper, and those that were being bought for the foodbank.

Summary


Next steps / Reflections

 

This was a project I feel very passionately about, the rising cost of living is having an impact on everyone and maybe this can help those in need a bit more readily.

What was most fascinating, was that for a large proportion of those interviewed, the subject matter was very politically-motivated. This was reflected in Richard’s persona in his strong need to donate.

I feel I gained a lot from the contextual inquiry, which allowed me to engage with Tesco shoppers directly and understand their motivations as well as reservations. Going in at lunchtime meant that although there was a high footfall, most people were picking up a quick lunch before they headed back to work. As such this did mean there was a lower donation rate than perhaps at another time of day.

Since I was adding a feature, I focused primarily on integrating the addition seamlessly into the app. However, in doing so, the feature got lost and users felt it went unnoticed. I came realise that is a fine balance which needed to be reached.

If given the chance, I would love to delve deeper into the research aspect for this project since there are so many stakeholders involved in the various stages of this donation process. I would interview Tesco community enagagement employees, Tesco delivery drivers, local foodbanks organisers and larger national foodbank charities.


Check out another project ⬇️

Shelfie

An end-to-end app which syncs books to the user’s emotional state gently encouraging them to integrate reading into their routines.