PROOFSCORE
Empowering Consumers to Make Informed Grocery Purchases
The Deliverable
Hi-Fidelity Prototype of the ProofScore Website
The Duration
3.5 Weeks
The Tools
Figma, Google Suite, Zoom, Maze.co
The Client
Transparent Path is a Seattle-based tech startup that uses sensors to provide supply chain visibility for the shipment of perishable goods, such as food and pharmaceuticals.
The Team
Rachel Cohen
Product Designer
Strategy Lead
Sayre Tripp
Product Designer
Interaction Design Lead
Brianna Tran
Product Designer
Visual Design Lead
Jenny Pham
Product Designer
User Research Lead
The Challenge
Transparent Path wants to develop ProofScore, a product that will leverage its extensive supply chain data to empower consumers and reduce food waste.
The Goal
Utilize Transparent Path’s consumer research to conceptualize and design a mobile platform for ProofScore.
The Result
A website that allows users to view how their grocery items score on a scale of sustainability and supply chain transparency so that they can make informed purchases.
After two rounds of usability testing, the team achieved a 17% increase in the prototype's ease of use.
The Client Testimonial
"I was impressed by the smoothness of Rachel's ability to dive in, get up to speed, and collaborate on a solid prototype design which she took through successful usability testing — all within 3 weeks! Her communication skills are excellent; as the Director of User Experience, I trusted Rachel right out of the gate to do the work to make the project a success." - Paule Wood, Dir. User Experience, Transparent Path
Pinpointing the Problem
Transparent Path believes having complete transparency with consumers and providing information about the supply chain will reduce food waste, risk and distrust.
Consumers need a way to easily learn about the safety, sourcing, and sustainability of their groceries while shopping to make informed purchases that align with their principles.
How can we solve it?
How might we create an accessible platform for all grocery shoppers to learn more about how the food they consume has been sourced?
How might we empower consumers to make purchases based on the ethics and values that are most important to them?
How might we display the ProofScore rating in an accessible and easy-to-understand way?
The Existing User Research
At the outset of the project, Transparent Path was able to provide our team with previously conducted user research. Here are the relevant takeaways:
What do Consumers Believe?
75%
of consumers rate food certifications as extremely important or important
50%
of consumers rated knowing where their food is sourced from as extremely important or important
74%
of consumers don’t trust the validity of organic certifications
What do Consumers Value?
Shoppers seek information that they deem as important and aligns with their values to influence purchasing decisions like their interpretation of “Quality”.
In a survey of 139 participants from ages 18-75, the following factors were rated, in order, as the most important in grocery purchasing decisions:
1
Food Safety
Dates of Harvest or Slaughter
2
3
Food Origin
4
Tamper Alerts
5
Certifications
6
Storage Information
Expanding our Understanding
Expert Interview with Lily from ReFED
Transparent Path connected us with ReFED–a national nonprofit working to reduce food waste and loss–to gain a better understanding of the industry.
I spoke with Lily Herd, the Capital, Innovation, and Engagement Manager at ReFED. She gave insight into consumer values, pain points, trends, and areas of opportunity:
-
Environmental, financial, and social factors sway purchasing decisions the most
-
Geographic location and socioeconomic status make a big difference in one’s ability to shop sustainably
-
Operationalize data to increase the transparency and accuracy of expiration dates
-
Show greenhouse gas and water consumption estimates for each product
-
Meal-planning assistance for soon-to-expire items
The Optimum Use Case
Some of the factors we kept in mind throughout the project were:
Reachability of Universal Navigation
Universal navigation was placed at the base of the site to account for the thumb radius on mobile devices and improve the reachability of key site functions.
Responsive Website Over Native Application
We chose to design a mobile website as opposed to a native application, with equity and inclusivity in mind. Launching ProofScore as a mobile website will ensure that anyone can access the platform and make informed decisions, no matter the operating system.
Conceptualizing the Score
Common UI Patterns in Credit and Sustainability Scores
Our team examined Experian, Good On You, Impakter, WalkScore, GreenChoice, Finch, and LeafScore.
4/7
Use numerical ratings rather than emojis, symbols, or letter grades
6/7
explain how they score in a break down section
4/7
use a green, yellow, and red scale to indicate good, moderate, and bad scores
Uncommon, but Effective Features
While the following features aren't industry standard, our team felt that they would significantly improve ProofScore's user experience:
-
allow users to save items for later
-
let users weigh scores based on personal values
-
take an educational approach to empower users' decision makeing
Defining the ProofScore
Based on our research we determined that the best approach for defining ProofScore was to break it down into four core factors:
Safety
The item’s temperature during transport and a lack of recalls or outbreaks along the supply chain
Shelf Life
How long the item will last
Sustainability
The practices employed by farmers and transportation companies along the supply chain
Sourcing
Where the food comes from and how it gets to you
Moderated Usability Study
We conducted usability tests on the mid-fidelity ProofScore prototype with 9 participants.
Create an Account
-
78% task completion rate
-
"Login" and "create an account" calls to action were glossed over
Adjust the Settings to Reflect Which Values are Most Important to You
-
78% task completion rate
-
The universal navigation UI led to confusion
-
The difference between the profile and settings icons was not clear
Scan an Item’s ProofScore and Find Out Whether or Not It’s from a Local Farm
-
89% task completion rate
-
The plus signs on the score breakdown were not clear calls to action
High-Fidelity Updates
Updated login CTA from a text link to a button to make it more eye-catching.
Added a second CTA to scan in the hero image.
Switched to a standard UI pattern for universal navigation because the original design wasn't intuitive.
Home Page
Created a "settings" page with "notifications" and "profile" sub-pages, since the hierarchy was unclear.
Settings Page
Added "highlights" to improve skimmability, since shoppers don't often have time to dig into the details
Swapped plus signs for "Learn More" CTA because users did not know that the plus signs expanded the cards
Score Page
Unmoderated Usability Study
We conducted unmoderated usability tests on the high-fidelity ProofScore prototype with 41 participants.
Create an Account
-
91% task completion rate–a 17% improvement
-
Users suggested adding a “sign up” button to the homepage in addition to “log in”
Adjust the Settings to Reflect Which Values are Most Important to You
-
88% task completion rate–a 13% improvement
-
Users suggested changing the page title to “My Values” to make it clearer that they’re reflected in a custom score
Scan an Item’s ProofScore
-
100% task completion rate
Find Out Whether or Not It’s from a Local Farm
-
70% task completion rate
-
Expanding and swiping through the score breakdown was not clear to some users
The Final Designs
Home Page
With quick links to the QR scanner.
Values Page
Included the values page in the minimum viable product because users want to prioritize the values that are most important to them and customize how their score is weighted.
Score Page
Semi-circle score with green, yellow, red scale in addition to the numerical score.
Score Breakdown
Score Breakdown cards allow users to access all of the relevant score factors in detail when desired.
Next Steps to Launch the Minimum Viable Product
-
Prototype the desktop version of the ProofScore website
-
Prototype and test the remaining site sections like "favorites" and "notifications"
Opportunities for Future Iterations
Compare and Contrast
Users expressed an interest in comparing ProofScores of multiple items or brands at a glance, so they can quickly decide which brand of cereal or piece of fish is the best choice for them.
Accurate Expiration Dates
Transparent Path can partner with ReFED to share data and improve the accuracy of expiration dates, in turn reducing food waste.
An Educational Approach
Add a tips & tricks section to the site with educational articles like how to pickle, can, or freeze an item to extend its shelf life and reduce food waste.
Accessible Pricing
Partner with ReFED on securing government grants and working with programs like SNAP to improve the ability of low-income consumers to make the sustainable, informed, and healthy purchases that they are often priced out of. Normally expensive grocery items with high ProofScores could be discounted for SNAP members, improving accessibility and equity in the food system.
The Final Result
In the end, we conceptualized and designed the ProofScore prototype, conducted usability tests, and iterated on designs, leading to a 17% increase in ease of use and an extremely positive review from our clients.
