Plated
Case Study
.png)
Background
Plated is a fictional start-up dedicated to ending world hunger once and for all, through the power of community and by leveraging the sharing economy. So far, the team has been gathering food from a limited donor base, and distributing it to a small number of shelters. They have a system that utilizes part time delivery drivers. However, the Plated team is looking to grow. In order to that, they must automate their processes.
Challenge:
Design an end-to-end application for Plated that allows donors to easily communicate with team members throughout the donation process. Make sure to create a Plated brand consistent with their message.
Role:
UX Researcher and Designer
Tools:
Figma, Illustrator
Duration:
2 weeks, 80 hours
DESIGN PROCESS
RESEARCH
Market Research
Competitive Analysis
User Interviews
synthesize
User Persona
Empathy Map
define
​
Sitemap
User Flow
Create and ideate
Sketches
Wireframes
UI Design
Responsive Design
prototype and test
Prototype
Usability Findings
Affinity Map
Iterations
01: Research
This is the stage where we try to understand our user on a deeply human level. The high-level goals of this research were to learn about how donors currently donate their excess food and to uncover their needs and frustrations with that experience. It is also important to take into account the receiving shelter's needs and pains in order to create an experience that works for all users.
market research
Through market research I discovered
-
About 1/3 of all food, around one trillion dollars, is lost in food waste.
-
Food is wasted for a variety of reasons, such as: cosmetically imperfect fruit and the overstocking of grocery shelves.
-
There are civil and criminal liability protections for both food donors and non-profits.
competitive analysis
While some competitors have clean and modern UI, many have cluttered information and fail to provide an efficient and engaging donation process or information about different shelters.
.png)
USER INTERVIEWS
I wanted to discover the food donors' needs when donating food and what would motivate or frustrate them about that process. Although the MVP is focused on the donor, I felt it crucial to interview the recipient side as well to create an app with all users in mind. I interviewed one participant in the restaurant business and another who works in a food bank.
key findings
Donor Needs
-
Communication through every step of the donation process
-
Information about who they are donating to
-
Easy to cancel or update donations
-
Fast automated donation process to prevent food from getting wasted
Donor Pains
-
Hard to communicate through the process
-
Donation process is long and time consuming
-
Doesn't know how to deal with leftover meals or food without a barcode
Recipient Needs
Recipient Pains
-
Canned food and non-perishables are most useful but meals can also be used
-
Understanding of the specifics of what is being donated
-
Receive food that is past expiration, open, or prepared awhile ago
-
Receive packages on doorstep without knowing the contents
-
Hard to communicate what they need
02: Synthesize
After doing the research, I wanted to dig deeper and understand about the user through creating a User Persona and Empathy Map. I decided to focus on the donor as my persona because the MVP is targeting the donor.
USER PERSONA
.png)
Empathy map
.png)
03: Define
Once I identified the main needs and frustrations that donors were facing with their current donating processes, I started to put together the information architecture of the site. Based on my research, I found it important to make sure the process is quick, easy, and interactive, yet still contains all the details necessary for the recipient. I also felt it important to include information about the shelter for the donor and a chat feature (with the drivers) to provide for a more efficient and transparent process. I created a site map to show the structure of the app and a user flow to show how the website will flow.
site map and user flow
Site Map
.png)
User Flow
.png)
04: Create and Iterate
To start off the visual part of the design, I created sketches and then high-fidelity wireframes based on the research I had conducted. I then continued to create colorful UI screens. I tried to create a design that was intuitive and would benefit both the donor and recipient.
wireframes
Food Donation Flow
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
ui design
I wanted the Plated brand to feel very fresh and modern so I went with bold tones of green, orange, and blue for the color palette. The green symbolizes the fresh food aspect, the orange serves as a contrasting call-to-action color, and the blue as a complementary highlight. Since a trending theme is to use gradients with bright colors, I used these bright tones as a starting point for my gradients and went brighter. I used these colors in the logo- combining an orange and a plate to communicate the message of plating excess food.
​
UI Kit
.png)
UI Screens
Login/Sign up
.png)
Sign up form 2
.png)
Request matched
.png)
Login info
.png)
Sign up questions
.png)
Sign up complete
Sign up form 1
.png)
.png)
Donation details
.png)
Find Shelters
.png)
Chats
.png)
Alerts
.png)
05: Prototype and Test
prototype
Using the Figma handoff tool I created a prototype for the website. Having both the design and prototype in figma allows for a more cohesive system, especially when handing off the design to the developer. By linking different pages together, the user was able to navigate through the site and experience what it would be like to perform different tasks. I wanted to understand user pain points, hesitations, confusion, opportunities to improve, and overall experience. I conducted the testing on three individuals, all via screen-sharing. I focused on the tasks of signing up, making a donation, and cancelling a previous donation.
usability test findings
Summary of Findings:
-
100% completion rate
-
100% of users enjoyed the aesthetic and appreciated how easy it is to fill out the form and track existing donations
-
100% of users appreciated the driver chat feature
-
100% of users felt it would be beneficial to add words under the navigation icons
-
2/3 of users were confused about the "Add Member" option in the sign up flow
-
2/3 of users had a hard time finding the meal option
-
1 user didn't understand if the bar code was required or an option
affinity map
After user testing I created an affinity map to organize the feedback into actionable iterations and figure out my next steps.
.png)
Iterations post usability Testing
To make the bottom navigation clearer, I added words under the icons
Before
.png)
After
.png)
I placed the meals option in the beginning of the food category list so it wouldn't get lost with the other categories
Before
.png)
After
.png)
I designed the barcode and food category section in the same format as the other categories to make it clear the user should choose one of the options, not both
Before
.png)
After
.png)
Next steps and project reflections
The next steps in this project would be to conduct more usability testing and make more improvements to the existing screens. Given a true organization with more time and budget, I would then create an app experience for the recipient and drivers of Plated. I learned a lot in this project about researching a field that I knew very little about. I also learned about balancing different user needs within one product. For example. in the donation form it was important to keep all necessary information for the recipient; yet also important to condense that information to provide an efficient and positive experience for the donor.
See more of my work
.png)