UX DESIGN CASE STUDY

GREENLY

A minimum viable product connecting restaurant owners with charity organizations to reduce food waste through donation
Duration 5 weeks
Role: UX/UI Designer
Tools Used
Background
Food wastage is a significant issue, particularly in households and restaurants. In 2014, a study revealed that around 85% of surplus food from American restaurants is discarded, with only 1.5% being donated to charity. To address this problem, the Greenly app was developed as a platform to connect restaurants with non-profit organizations, enabling regular food donations to help those in need.

Through Greenly, restaurant owners can easily notify local organizations about surplus food availability for pick-up or delivery at specified times. In addition to reducing food waste, the app fosters connections between restaurant owners and community charity organizations.
Problems
  • Charity organizations have difficulty obtaining food to help the needy
  • Food waste is a huge issue that the world is facing along with not enough food being produced
  • Engaging users and having them to consistently use a food donation app can be challenging without proper incentives or rewards.
Solution
  • Onboarding feature for both parties: the Donor and Recipient
  • Design a system to track and monitor donations
  • Design a quick and effective donating system
Goals
  • Promote the app and create awareness about its food donation program
  • Design a simple and intuitive interface that is accessible to all users, regardless of technical proficiency
  • Infiltrate the market with a streamlined way of connecting restaurant proprietors and charity organizations to help reduce food waste through donations
Design Process
Discovery
User Interviews
Competitive Analysis
Define
Persona
Empathy Map
Ideate
Flow Charts
Design
Lo-fi/Hi-fi Wireframes
Design System
Prototype
Test
Usability Tests
A/B Testing
Empathize
User Interviews

To begin my design thinking I first had to better understand the needs and paint points of the users. I conducted 5 user interviews to collect qualitative data to learn more about the process of what the user looks for in a food donating app.
When seeking individuals to interview, my primary focus was to secure interviews with restaurant owners or managers as they are the current target audience. Due to time constraints I was only able to interview 3 restaurant proprietors and 2 other people. Despite it, I still gained valuable insights about the target audience.

Some questions I took into consideration were:

What is currently limiting you or stopping you from donating your leftover food?
What are some roadblocks between the donor and receiver when donating food?
How can the app encourage users to donate food? What are some incentives?
What is the most important thing for you to see when using an app to donate food. What would take priority over other features?
Main Insights
Needs
  • Communication between both parties
  • Quick and efficient way of making a donation
  • Tracking system to display status of donation
  • Provide the user with the ability to upload a photo
Frustrations
  • Connecting with organizations by a phone call can be tedious and very time consuming
  • Finding appropriate ways to deliver food that is being donated
  • Meeting heath regulations and allergies to food
  • Geographical location of certain charities
Motivations
  • Feeling of satisfaction and accomplishment
  • Use of social media accounts to generate awareness
  • Logistics and possible tax write-offs for the year.
  • Create a friendly competition to encourage donations.
Competitive analysis
Understanding our competitors is critical to help Greenly stand out from other competing apps in the market. By closely studying these competitors, I can look for opportunities to implement new ideas or improve on certain ones in my design.
Karma
Strengths
  • Customizable profile and trophy system
  • Very inviting UI Design
  • discover groups toalmost anything fitness relateI
  • Leftovers are posted on the app for the consumer to pick up
Weaknesses
  • Functions on a B2C basis only
  • Lacks in a potential filter option to choose from a specific niche
  • Overwhelming and certain inconsistencies when navigating from page to page
TooGoodToGo
Strengths
  • Their large interactive map is very user friendly and specifically designed for their brand
  • Provides an easy way for customers reserve the surplus food
  • Providing real-time analytics on how much food they are wasting and how they can reduce it.
Weaknesses
  • Does not always guarantee the quality of food
  • Functions on a B2C only
  • Notifications feature to indicate new items up for pick at desired locations
Careit
Strengths
  • Includes categories with images for each type of food
  • Ability to upload photos of donations
  • Manage all donations under one donor account
Weaknesses
  • UI Design is not very inviting and user interface feels rigid  and inflexible
  • The receiver can only get in contact with the donor if they post a donation
  • Lack of incentives to use the app
Nike Training
Strengths
  • The Information architecture is strutted very well
  • Custom donation requests
  • The ability to track donations is easily accessible and very intuitive
Weaknesses
  • Accessibility is limited due to the lightly colored font
  • Lacks in a loyalty program
  • Limited amount of charities
Define
Persona and Empathy Maps

Based on the information gathered from my research, I generated this persona to represent the specific user group for this project. In doing so I was then able was able to create a realistic representation of the ideal user to create a design that can meet the needs and goals of the users. This helps us build empathy.  

Throughout the UX design process, referring back to the persona allowed me to evaluate design decisions from the user's standpoint. It helped me identify pain points they might encounter, anticipate their expectations, and ensure that the app's interface and functionality catered specifically to their preferences
Through the exploration of their feelings, thoughts, and experiences, I gained profound insights into the user's needs, allowing me to craft a design solution that aligns perfectly with the requirements of the project. The empathy map served as a visual representation, highlighting the emotions and thoughts, that shape thier decision-making process when considering the utilization of a food donation app.
Ideate
User flow

The user flow I created helps outline the steps the user must take to complete a task and allows me to identify any potential areas of confusion or difficulty.
By creating a user flow, I can identify any areas that need improvement and ensure that the user experience is streamlined and intuitive. This is especially important for a food donation app, as the process of donating food can be complex and time-consuming which is something I plan on improving

Design

To begin generating ideas for the layout of the app, I sketched out several low-fidelity wireframes of pages that were identified based on the flows. I then proceeded to add more context to these sketches through mid-fidelity wireframes. Once I had a better idea of how to incorporate my ideas I began high-fidelity wireframes

Login/Sign-up Wireframes

After analyzing my research, it was time to create meaningful wireframes to visualize the potential design of the app.

After successfully downloading and installing the application, the user will be guided through a streamlined onboarding process. They will be prompted to create an account and choose their user type, either as a charitable organization or a donor, while also providing relevant personal details. Once these two simple steps are completed, the user will seamlessly transition to a preview screen that presents concisely crafted descriptions of the application's distinct features.

The goal here is to ensure optimal user comprehension and familiarity with the interface.

Donating Process Wireframes

Incorporating it in 4 easy steps for a streamlined donation process.

Firstly, the user is selects an organization of their choice to make a donation. Upon selection, they are directed to an information page outlining the organization's mission and comprehensive details regarding the specific types of food donations that align with health compliance standards. Then, to facilitate a seamless delivery and pick-up system, user is required to provide a succinct description and photo of the food items they intend to donate. This ensures accurate identification and efficient handling throughout the process. Finally before completing the donations, a box will appear for the user to confirm or cancel the order.

Establishing UI Design System

To evoke feelings of warmth and positivity, the use of the color turquoise with the white background as contrast will help create an inviting and well balanced atmosphere for users. Additionally, these colors can help to create a visual hierarchy and make it easier for users to navigate the app. The balanced proportions of these two fonts make it highly legible across various screen sizes and resolutions, ensuring optimal readability for user interfaces.

Visual Design
Creating an Account

Onboarding for this app is a simple two step process: just sign up for an account and enter whether you are a donor or recipient. Once your account is set up, you can begin browsing through the app without having to spend time on a lengthy onboarding process.

Navigation Bar
The navigation bar will provide the user with all the necessary tools to be able to easily navigate through all the different features the app will provide.
The user's profile page will contain favorited organizations, status of transactions, a gamification feature to create an incentive for the user to continue donating.
The inclusion of a leaderboard feature will enable users to gauge their performance in comparison to other restaurants in the vicinity that also engage in charitable contributions. This functionality is designed to foster a sense of friendly competition among app users.
Donating Process

Before donating for the first time, the user will have to complete a one time step where they have to input some basic information about their business to verify it's legitimacy.

This fast and easy flow for donating surplus food does not leave the user occupied on their phone trying to figure out all the options in the system.

Prototype Here
Let’s talk now!
Test
Usability Test

To further validate my design flow for the app i conducted a usability test with 6 participants. The usability test will provide valuable insights into how users will interact with the app, allowing me to identify any areas of confusion or difficulty that can be improved upon

The main tasks included:

My usability test had a 100% success rate for each task, however certain pain points and areas of confusion did come. 4 out of the 6 users expect the history tab to be found in the top left menu. On area of confusion was the idea of leaderboards to suggest that that is where one would find other restaurant businesses to compete with. Users found it confusing the first time finding other restaurants.

To facilitate the understanding of the leaderboards and eliminate any confusion, additional screens were added to the preview section including one about the leaderboards.

Other Iterations
By incorporating numerical location indicators that display the donations received to each organization each month enabling the user to gain a clear understanding of the impact their contributions make

This added functionality aims to enable users to make more informed donation decisions and promote a more equitable distribution of donations across multiple charities.
By implementing a checklist feature in lieu of the conventional description text box, I aim to optimize the donation experience, reinforcing efficiency and streamlining the overall process for both parties.

The checklist function will serve as a communication tool between donors and recipients, helping to clarify what items are being donated eliminating any confusion.
Conclusion
Takeaways
The importance of iterative development

The MVP serves as a starting point for continuous improvement and iteration. After completing and running a few usability tests I realized how much the product still needed to be refined. By analyzing user engagement patterns, and transactional data, I was able to identify areas of the platform that required optimization and enhancements.

Conducting thorough user research

Understanding the needs of the restaurant owner where a challenge. After conducting my user research analysis I realized how far off my initial insights about the user's was.

Next Step

When looking forward, there are a few things I am considering.

  • If I were to continue this project in the future, I would look to create a design from the recipients perspective. Create a design for the recipient accept donations.
  • I would look to expand the app to make it accessible beyond business clients
  • To optimize the user experience, I would consider the inclusion of a delivery system in collaboration with established transportation companies like Uber, Lyft, and Revel. This would facilitate the transportation of donations to designated locations when restaurants or charities are unable to provide drivers at a given time. This solution enhances convenience and usability for all parties involved.
Thank You!