Heart & Bowl
Heart & Bowl is a non-profit food pantry that ensures that people who are not able to afford fresh food are able to have access to it all times despite their financial situation. Heart & Bowl’s target audience includes homeless people as well as families who struggle to put healthy food on the table.
Project Overview
CHALLENGE
Over 20% of the global population does not have access to healthy food. Through a great deal of research and testing, the Heart & Bowl team have identified key ways to make fresh food accessible to all at the press of a button.
ROLE
UX Designer leading the app and responsive website design process from start to finish.
RESPONSIBILITIES
GOAL
Design an app and responsive website that will allow users in implement fresh food into their diets by simply placing an order for pick up from their mobile phones.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
PROJECT DURATION
October 2021 - December 2021
TOOLS
Adobe XD
Research
I used Heart & Bowl’s data on access to fresh food to develop a series of questions, which were then used to conduct user interviews. All interview participants expressed that everyone, regardless of financial status, should have access to fresh food. The feedback received through research made it clear that having access to fresh food should be an easy task, also driving home the point that it is a basic human right and necessity. So, an easy to use tool to help people get their hands on fresh food items would be benefit so many.
PERSONAS
Problem Statement: Anne is a busy start up business owner who needs a dedicated mobile app to help users get fresh food because she feels everyone should have access to it.
Problem Statement: Jamie is a part time health insurance agent who needs a responsive website designed for her non-profit because she wants all eligible individuals to be able to implement fresh food into their diets.
COMPETETIVE AUDIT
An audit of a few competitor’s products provided direction on opportunities and gaps to address with the Heart & Bowl app and responsive website.
.png)
IDEATION
I did a quick ideation exercise to come up with ideas on how to address concerns found from usability studies and gaps identified in the competitive audit. My focus was primarily on developing a potential flow within the app which included some of the main screens that users would interact with.
.png)
Wireframing & Prototyping
DIGITAL WIREFRAME
After ideating and drafting paper wireframes, I created the initial designs for the Heart & Bowl app. These designs focused on helping users select food food items from the digital refrigerator.
.png)
LOW-FIDELITY PROTOTYPE
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow for selecting an item to the checkout process in the Heart & Bowl app.
.png)
USABILITY STUDY PARAMETERS
The low-fidelity prototype connected the primary user flow of logging in or creating an account to selecting items from a digital refrigerator and ultimately placing an order.
​
Study Type: Moderated
Location: Remote
Participants: 4
Length: 5 minutes
USABILITY STUDY FINDINGS
-
Users want to effortlessly navigate their way through the app without any confusion along the way.
-
Simplicity is key in the design of the app because it made it easier for users to understand the tasks they were asked to complete during testing.
Mockups & High Fidelity Prototype
MOCKUPS
Based on the insights from the usability studies, I applied changes to the design, such as corresponding imagery and buttons on the “Refrigerator” page for users to move forward in the design flow.
​
Additional design changes included clarifying the different types of donations that a user could make in the Heart & Bowl app.
.png)
-2.png)
-3.png)
HIGH-FIDELITY PROTOTYPE
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, but also included changes made from the usability study.
.png)
ACCESSIBILITY CONSIDERATIONS
-
Images of food expand in the “Refrigerator” page once clicked.
-
The “Donate” page allows users to select the amount they would like to donate. The text on each icon is larger for easier viewing.
Information Architecture & Responsive Design
SITEMAP
Once the app designs were completed, I moved onto designing the responsive website. I used the Heart & Bowl sitemap to ensure a cohesive and consistent user experience across devices.
RESPONSIVE DESIGN
The designs for screen size variation included a mobile screen, an iPad screen, and a desktop screen. The designs were optimized to fit user needs for each device and screen size.
.png)
Reflection & Next Steps
IMPACT
Users expressed that they appreciated the simplicity of the app and that it was quick and easy to navigate. One user expressed that an app such as Heart & Bowl would be a great way for users people to have healthier options available to them, especially if they can not afford it.
1. Conduct additional research on how the app and website are reaching the goal of making healthy foods accessible to everyone.
WHAT I LEARNED
The greatest takeaway from this project was that although the issue of food insecurity is bigger than all of us, it is incredibly fulfilling to have a small part in making a change. It is rewarding to know that I am able to make a difference as a UX designer and not only help people have a positive user experience through my work, but also that I can have a part in making a greater impact.