Assorted canned foods

Service design for a food bank charity

Client: The Trussell Trust
Date: April 2018
Product: Web app

Challenge

Offer food bank clients improved and ongoing support, especially for support services beyond food.

Solution

Improve the usability of the web based client record system, extend the support options, and add follow up reminders.

Services

  • User research
  • Web app design
  • Sketching / Wireframes
  • Service blueprint
  • Leading workshops
  • User story writing
  • UX design
  • UI design

Background

The Trussell Trust is a charity that runs a network of over 400 foodbanks giving emergency food and support to people in crisis across the UK. You may have noticed their food collection baskets at the exit of Waitrose stores.

The charity began widening its support through its More Than Food (MTF) programme. The programme is made up of number of initiatives, including money management and tackling fuel poverty. The charity kept digital records of the food support provided, but their data record system could not be simply extended to record the MTF support.

The Trussell Trust wanted to capture MTF support records for reporting purposes. Foodbanks were already implementing their own way of recording MTF support. Centralising information captured would be essential to ensure consistent data quality across the network – improving reporting accuracy and speed.

Approach

Discovery

I lead research to understand the needs and challenges of foodbank workers. I wrote scripts for and conducted ethnographic research at two foodbanks. This included observing support being provided to a client and interviews with foodbank workers.

Ethnographic research at a foodbank

I learnt that volunteers were sceptical about the initiatives and didn’t feel qualified to provide MTF support. It was also very important to them that they provided support in an informal manner and built rapport with clients. Volunteers needed guidance on how to provide MTF support to build confidence, without it being too prescriptive and impacting natural conversation. Furthermore, most information was captured by hand during a support session and added to the system later. The duplicated effort cost foodbanks precious time.

Service blueprint

This project was the perfect candidate for a service blueprint, because of the interactions between clients and multiple layers in the foodbank network. In a single workshop with the charity, I helped produce a low-fidelity future state service blueprint. The post-it approach made it easy to re-organise ideas and collaborate.

Using the service blueprint as a starting point, I formalised the ideas into features and submitted my estimate for sketching and UI design.

Low fidelity service blueprint

Sketching and UI Design

I began by sketching on paper and bouncing ideas off of colleagues with quick and informal internal reviews. The new features would add to the existing system, so I ensured I was mindful of existing UI patterns to minimise development effort and build on established user habits and expectations.

The benefit of sketching ideas on paper was that it quickly revealed wider implications than recognised in the high level blueprint. I lead a remote and in-person design review with stakeholders and they agreed to extend the original scope.

Early stage sketches

With the sketches finalised, I moved on to creating high fidelity UI mockups in Sketch. By creating symbols (reusable components), I was able to rapidly mock up pages. I worked with the existing UI patterns as guidelines to maintain consistency, but made some adaptations to improve UX.

User testing and refinement

Using the InVision plugin for Sketch, I quickly stitched together the UI designs to create a highly realistic prototype. The prototype included the intricacies of the interactions required for data entry.

Prototype built using InVision plugin for Sketch

I ran remote and in-person, moderated user testing. As soon as a pattern emerged, I made quick improvements and tested them with the next user. This highly iterative approach allowed me to refine designs and achieve a final version with a validated high level of usability across just 7 user tests.

User testing with a foodbank worker

User stories and developer handover

Beyond the UX and UI design, I converted the functional and design requirements into user stories in the format:

As a… I want… so that…

I added detail with acceptance criteria, inclusions, and exclusions. Next, I ran the development team through the designs and then user stories – refining them if necessary. This proved to be an effective handover – the developers were able to make accurate estimations and had very few additional queries.

Deliverables

I designed a system that mirrored how support was delivered: capturing high level details at the start, working through initiatives and only capturing client contact information when then understood the benefit of providing it. The system had the flexibility to be used during a support session or retrospectively for data entry.

To ensure that clients were receiving effective support, foodbanks would need to follow up with them. I designed features which allowed users to add follow up reminders, record consent for contact, and add follow up notes. The information is presented in the client record – helping foodbanks get a full view of a client’s needs and offer the right support.

The Trussell Trust would also be able to run centralised reports to see how foodbanks are performing and analyse the needs of foodbank clients. This information will help them improve how they offer support, raise awareness to lobby the government, and ultimately help the 13 million people in the UK living below the poverty line.