UX/UI Project
Client Project
Mobile App
2 Week Sprint
Group Project
FreshScore utilises machine-learning to measure the freshness of food as it moves through the supply chain.

As part of a UX/UI course with General Assembly, we were tasked by clients Transparent Path to research, design and integrate their new algorithmic feature - FreshScore - which utilised machine-learning to measure the freshness of food as it moves through the supply chain.

My Role: Working in a team of 5, we shared responsibility for initial research, before I led the strategy, visual design, and final wireframes/prototype.

The Challenge

Around 15% of food waste occurs during storage and distribution, prior to reaching the supermarkets and end-consumers. We were tasked with exploring how FreshScore can be used to aid supply-chain stakeholders minimize food waste and financial loss, whilst also exploring any further utility on the consumer side.

The Solution
Redirection of goods. Allow food producers to redirect goods to alternative routes/destinations when the freshness of their produce is low.
Predictive FreshScore on delivery. This will allow producers to react in advance.
Aligning measures of freshness to stakeholders. Feedback on qualitative characteristics of produce upon delivery, aligning the producer and receiver’s measures of ‘freshness’ to streamline future logistical processes.

The Brief

Food Waste & Supply Chain

When we think of ‘food waste’, many of us may conjure an image of throwing away our spoiling chicken or less-than-fresh spinach from our fridges. Yet, 15% of food waste occurs during the distribution process before it even reaches supermarkets and us consumers. Food supply chains still use out-dated paper systems whereby only after food has arrived does one find out the status of its quality.

The Client

Transparent Path, a Seattle-based tech start-up, provides supply chain visibility for the shipment of perishable goods. Their hardware and software-based platform provides supply chain stakeholders with continuous, real-time information about products as they move from producer to buyer, using sensors in each shipment to measure temperature, humidity, and light.

The Product: FreshScore

We have been tasked by Transparent Path to research, design, and integrate their new algorithmic feature - FreshScore - which uses the aforementioned sensor readings and machine learning to generate a predicted ‘freshness’ rating for food. Additionally, various stretch goals were talked about, such as exploring the utility of FreshScore for the end-consumer.

15%
of all food waste (370 million tons) occurs during the distribution process before it reaches supermarkets and end-consumers.

1

Initial Research

User Interviews
Competitive Analysis
Affinity Mapping
Review of Existing Research

To understand the industry, company, and product offerings further, we first reviewed all provided client material, including the Transparent Path core messaging document, existing user personas, end-consumer shopping habits whitepaper, and the latest competitor analysis. The review streamlined what we would prioritise and how we would proceed next:

Focus on the producer and the receiver as the key users within the supply chain. They have the most to lose from food waste.
Separate FreshScore as two products. Design and market FreshScore for the end-consumer as a separate product to FreshScore for the producer/receiver.
Utilise existing end-consumer research. No further research was needed to begin ideating for the end-consumer targeted FreshScore product as the existing consumer shopping habits whitepaper was sufficiently recent and thorough for proposals.
Leverage the uniqueness of FreshScore's machine learning component. Competitor analysis showed Transparent Path remained the only company utilizing AI and sensors in food supply chain.
Interviewing Potential Users

FreshScore is a new and potentially disruptive concept for the supply chain, who’s target customer operates on a large enough scale to warrant widespread sensor tracking of valuable batches prone to spoilage. As such, we wanted to understand its overall viability from a mix large food producers/suppliers, receiver (supermarkets, large restaurant chains), and industry experts.

We recruited some users on userinterview.com, and others from Transparent Path’s professional network. The user profiles below were interviewed for 45 minutes each, over Zoom. Many of the interviewees had played different roles in the food industry and thus had overarching insights that divulged from their current roles.

Terry
Producer
Supermarket/Retail
CEO/COO
Maria
‍Receiver
Supermarket/Retail
VP of Retail & Groceries
Nyle
Receiver
Restaurants
Culinary Director
Preston
Producer & Receiver
Retail/Restaurants
Chief Chocolate Officer
Joann
Receiver
Retail/Restaurants
Chief Marketing Officer
Richard
Producer
Supermarket/Retail
Technical Director
Lily
Industry Expert
Food Waste
Innovation Manager
Kamilla
Producer
Supermarket/Retail
Production Manager
Freshness is Subjective

After synthesizing all user research through affinity mapping, several significant insights came to the fore. Most significantly, users did not have a standard measure for freshness; some users (mainly producers) tended to measure freshness quantitatively i.e. using statistics and scientific data, whilst another group of users (mainly receivers and consumer-facing roles) measured freshness qualitatively i.e. how it looks and tastes.

“Mostly quality assurance is done visually. It needs to look, smell and feel a certain way for us to serve it”

There was also a general demand to find purpose for less fresh but still consumable products, for example, coffee beans that do not quite match a specific taste profile. Finally, vendor selection proved pivotal in produce freshness, availability, and transportation  specification.

2

Defining the Problem

Problem Statement
JTBD
User Journeys
Problem Statements

Research synthesis further emphasised the producer and the receiver roles as the most to gain from the concept of a FreshScore, but their precise pain points with the current supply chain and underlying goals differed slightly.

This is captured in the two problem statements adjacent, which will act as semantic frameworks that clearly conceptualise the problem, why its important, and who it impacts.

The producer needs to ensure their produce reaches the receiver in a level of freshness satisfactory to the receiver, and therefore has an interest in its freshness in transit, whilst the receiver is more concerned with the status of produce as they receive it, in order to know what actions to take next. Thus, the producer wants to play an active role, whilst the receiver a more reactive role.

'Producers need a way to ensure their produce reaches the receiver in a level of freshness that is satisfactory to the receiver, in order to minimise food waste and the resulting reputational and financial risk'
‘Receivers need a way to know how fresh the incoming produce will be in order to manage, price and market the produce accordingly’
User Journeys: Uncertainty leads to  Dissatisfaction

To visualise more clearly where the pain points were occurring over a typical delivery of perishable goods, we mapped out user journeys for both the producer and receiver in the unwanted scenario of a batch having turned bad in transit.

One can see that both user groups experience a lack of certainty during the ‘goods in transit’ phase, leading to dissatisfaction at the revelation of a bad batch. Ultimately, it is the producer who shoulders the financial and reputational burden in the reconciliation phase.

Jobs-To-Be-Done: More Data, More Agency

To define our research into a succinct framework from which to ideate from, we decided to focus on Jobs-To-Be-Done over user personas, as this was a particularly process-driven and business orientated problem, somewhat detached from personal identity.

Under the umbrella of the aforementioned problem statements, we listed several JTBD, finally reducing it down to two per user group (adjacent). These statements centre on the need for data (in-transit/real-time for the producer, at delivery for the receiver), and the alignment/understanding of one another’s standards of freshness.

These JTBD can also be converted into How Might We statements, which would be used to frame our design studio in the following stage of ideation.

The Producer
  1. When my produce is being transported to the receiver, I want up-to-date information about its freshness so I can take measures to prevent the loss of the produce.
  2. When I have a contract with a buyer/receiver, I want to understand what their standards and values for freshness are of my produce so that I can try to accommodate for these standards.
The Receiver
  1. When I receive produce, I want to have data on freshness of the produce so I can market the produce accordingly.
  2. When I am choosing a new vendor, I want to know the freshness of their produce so I can maintain my quality benchmark.

3

Ideation

Design Studio
Sketching
Wireframing
Design Studio

To begin the ideation phase, we held a design studio, including key members from Transparent Path, aiming to quickly generate multiple ideas together and streamline key concepts.

With the timeframe we had, we also took the decision to focus on the more financially burdened producer user group, however it was important to keep the JTBD statement for the receiver in mind as both roles were highly integrated and dependent on one another.

  1. HMW provide information for producers so they can take measures to prevent the loss of their produce?
  2. HMW help the producer to understand the receivers freshness benchmark?

Using the two HMW producer statements as an initial framework to ideate from, we asked each person to sketch 4 solutions in 4 minutes, before each sketch was presented to the group and discussed. Finally, we each voted for 3 ideas we felt more strongly about.

With the head developer, CEO, and head UX designer from the client side, this discursive ideation process allowed us to understand the more technical and business-sided constraints, but also break perhaps more expected lines of thinking the client harboured and evolve one-another's ideas to more unexpected grounds.

Key Ideas

Four key ideas were brought forward:

  1. The ability for the user to react to a low FreshScore of their produce in transit and redirect it to alternative routes or closer destinations, allowing the producer to save their produce from spoilage and avoid the financial loss this would incur.
  2. A predictive FreshScore on delivery (alongside a real-time FreshScore in transit) would allow producers to make reactive decisions based off of the future freshness of produce as the receiver would secure it in.
  3. Feedback from the receiver on qualitative characteristics of each batch of produce upon delivery, helping the producer understand the receiver’s standards of freshness so that these standards can be accommodated for.
  4. Producer profiles displaying average FreshScore ratings, aiding receivers select viable vendors and encouraging/rewarding higher standards of freshness across the supply chain.

4

Testing & Iterating

Usability Testing
Wireframing
Prototyping
Initial Wireframing

The concepts that came through from the design studio were captured in a series of low-fidelity wireframes illustrated below.

Onboarding: the sequence introduces the user to both the concept of FreshScore and the functionality of the app.

FreshScore Profile: Displays a current and predicted FreshScore for each batch in real-time, accompanied by  key metrics that make up the score and suggested optimum ranges to stay within.

Map view: This view displays FreshScore snapshots along the journey. Alternative route or destination options are also presented here should the FreshScore drop below a set minimum.

FreshScore History: a log of data tracking each metric over the course of the journey (temp, humidity, light); users can see exactly where problems arise.

Customer Rating: a scorecard showing how receivers have rated the producer’s delivered batch on qualitative measures of freshness. The ability to capture a photo of the batch in question is included to have something to visually associate the ratings to.

Testing the idea

6 x unmonitored usability tests were conducted remotely on a low-fidelity prototype through Maze.com (a usability testing platform). Users were all food producers. We were interested in testing the viability and usability of our core proposals: rerouting goods, customer feedback, and the FreshScore history log. Alongside follow-up questions, we therefore tasked users the following:

  1. Find the temperature reading for the shipping container with your produce on the 2nd day at 3pm.
  2. There is a problem with an in transit batch. Find a way to reroute your produce to a closer store branch.
  3. Check the rating given by your customer for the delivered batch.
Users liked the idea, not the navigation

Overall, users showed enthusiasm for the concept of the reactive nature of the app, particularly the idea of re-routing goods, with one user saying “this is like the Uber of produce chain”.

Analysing the heat maps revealed users generally struggled with navigation however; it was not intuitive or apparent where to find information:

  • Users attempted to click in many places outside of the correct path, including the drop-down menu.
  • Users lingered on the FreshScore page to find the FreshScore history, suggesting they expected to find these sets of data together.
  • Some users seemed to be missing the correct clickable call-to-action buttons on the map view.
Recommendations for the next iteration
  • Restructure the navigation bar. Eliminate the burger menu entirely and positioning all primary navigation links across the top of the screen with more universally recognisable icons.
  • Familiarise users with less universally known icons. Visual familiarisation can begin during the onboarding sequence.
  • Combine the score history page with the FreshScore batch page. This would be a more intuitive information architecture for users.
  • Further pronounce the call-to-action buttons. On the map screen, make these buttons and warning alerts larger and higher contrast to its surroundings, utilising the space below the map as the primary space for user interaction.

5

Visual Design

Components

This app wants to convey a high level of information and data to its users at any one time. As such, I have promoted a clean aesthetic prioritising legibility of key pieces of data.

Hierarchy of information is significant in this case; a language of self-contained components, each representing a ‘package of information’, was developed in making the information-dense interfaces more digestible.

Subtle shadows and small filleted corners give each package enough animation to contrast against the background, whilst still conveying a sense of reliability in its restraint, saying, this information is accurate and can be trusted.

The FreshScore representation itself builds off of previous usability testing research. Participants reacted most positively towards a score expressed as a percentage, with a visual element.

Colour

Transparent Path employs a brand identity colour palette of ‘Maize’ and ‘Citrus’, with a signature gradient of the two colours in their logo. They state these are ‘the colours of sunlight’ and are ‘bright and energetic without being artificial’. I would concur with this; the selected shades feel earthy and connotate a sense of virtuosity and optimism in its warmer tonality.

We therefore decided to utilise this gradient as a background for the onboarding sequence, and slightly more restrained/desaturated for the main frames so as to keep to a reliable and objective voice.

Apart from this gradient, colour is used sparingly and only key pieces of information employ bright shades not in a neutral palette. These colours have a sharper tonality in evoking a sense of certainty with the information it is communicating.

Specific shades have been assigned to different FreshScore gradings; a green for 90+, an orange for 80-90..etc. These carry through in its map view iconography.

All main call-to-action buttons employ a light citrus shade, apart from the warning alerts, which use a dark grey to stand out amongst all information as the only dark block of colour.

6

Latest Prototype

Cover
Onboarding
Dashboard
FreshScore Profile
Map View
Customer Score

7

FreshScore for the
End-Consumer?

Usability Testing
Wireframing
Prototyping
What is FreshScore for the end-consumer?

Alongside the supply-chain facing FreshScore app, we also explored the viability of an end-consumer facing FreshScore platform; is there demand from supermarket shoppers for a freshness ranking of their groceries?

Using previous research on consumer shopping habits supplied by the client, I mocked up a wireframe to test with end-consumers. Research indicated apathy for yet another app for shoppers to use; a scannable QR code on food packaging was therefore suggested in this case.

Research also suggested food safety and food origins were the top metrics consumers cared about, whilst certification was still highly trusted. As such, key information for all these metrics have also been provided, with food safety being encapsulated within the FreshScore itself.

Testing

5 users were asked to scan the QR code and were interviewed in the supermarket about the FreshScore concept. All users expressed it was too much effort scanning a QR code and a visual inspection of products would suffice in assessing its freshness.

Next Steps

The results indicate that there is potentially more utility for a consumer-targeted FreshScore when they cannot see the product physically i.e. online shopping.

8

Critical Review

Overview

On a personal level, this was a highly enjoyable project on the cutting edge of technology and with the potential to make a huge difference to food waste and sustainability. Working at the forefront of innovation was incredibly rewarding.

As an early stage start-up with a new disruptive product to test, few parameters were set; what the product is and who it was for was all open for debate. Thus, the project was somewhat front-loaded, requiring more input and time in understanding the context, researching, and defining the problem for the users. The brief reflected this fluidity in that it was rather open-ended and many stretch goals were talked about.

We approached this with ambition and drive, attempting to cover as many areas as possible. In the time we had, however, we would have benefited from a more methodical approach to defining our scope of work more clearly, talking through with the client each package of information we were given, and defining and focusing on the MVP. This could have resulted in a more streamlined, time-efficient workflow.

Did our work answer the brief?

The brief asked us to research, design, and integrate FreshScore. We delivered this, as well as the stretch-goal of exploring FreshScore for the consumer. The client reacted particularly positively to the research findings of the latter, as it opened up conversation and a new direction for FreshScore; online grocery shopping.

Key learnings
  • For a new product under an early stage start-up, research was highly influential in defining the direction of the business. In this context, one must straddle the line between open-ended exploration and more constrained inquiry for the most constructive development of the product.
  • As a new innovation to a highly integrated supply chain network, we needed to understand the other user groups our primary user would interact with better - more user interviews for more user groups, and more research into supply chain operations would have benefitted the viability of our solution.
  • Usability testing is particularly significant for data-heavy user interfaces and data visualisation; small details can make a big difference in the way one perceives a piece of information.
  • Regular communication with the client at key stages, particularly during research, ensured they were invested in our design solutions from the outset.