Helping the Hungry by Rescuing &
Donating Leftover Food to Homeless Shelters
UX / UI DESIGNER
FEB 2018 -
UX / UI
RESCUING LEFTOVER CUISINE
I created user flows, and work in a team of UX, Visual design and engineering in creating the low fidelity and high fidelity prototypes and style guide for web & mobile click-throughs for use during tests. Also participate in stakeholders interviews and usability testing and will conduct user interviews .
Millions of people around the globe are unable to get access to food, while countless meals are thrown away each day. Rescuing Leftover Cuisine is Helping the hungry by rescuing and donating leftover food to homeless shelters.
How can we create social interactions around creative ways of cooking leftover food?
Starting with this question helped the team determine how to the best reach the global goal. All members agreed that it will be best accomplished thought a Recipes App that has as main objectives :
Provide a tool for the public to reduce food waste at home in their own kitchens, allowing for recipes that target commonly wasted food to be shared and built upon. Tool must be able to track user interaction, food waste reduction, and number of shares.
Help the organizations (soup kitchens, shelters, etc) that receive leftover cuisine (cooked or raw) cook complete meals or brainstorm meal ideas. Cooking is a cornerstone of every human’s life and RLC wants to continue to foster that growth and development.
Spark creativity in the minds of not only the consumers of the product but also with anyone who is about to throw away any food. This app can act as a reinforcement to think twice before throwing away any food and help start a larger trend outside of our regular customer base.
Identifying an opportunity area
We started by researching the most used web responsive food recipes sites:
First meeting with initial Q & A's:
After the first stakeholders meeting and research, we had some questions (answers in bold italics):
What are the most commonly wasted foods? Not relevant to the design
User = the public or only shelters? Everyone
Design for iOS/Android or both? Responsive website
How would tags work? ( tag specific food item, tag food item that is most commonly wasted? Or tag by categories? Everyone that creates a recipe can create a tag *
Why would RLC want to create a recipe app? Because it Will help keep a track of how the food is being cooked and used, also create consciousness with creative ways of cooking and preventing food waste by giving people different ideas.
How to assign points to items? Points to the most creative recipe that uses some of the most difficult to cook items (Functionality not available for the MVP)
Web, IOS, or android? Should it be mobile or desk? Responsive website
Can you give us an example of food waste categories? And how can we create tags of food waste? Vegan, dinner (category) , celery (ingredient being wasted)
How important is to add video in the MVP comments? Not for the MVP
“Can add suggested modifications from other users but recipe should not dynamically change?” Can you clarify this? This is the comment section, where other people can publish images and different ways to create the recipe, adding ingredients or a different preparation method
Answering these questions with the stakeholders gave us a better picture of the jobs they wanted to get done with the recipes responsive web app.
* The tagging functionality is still being revised and analyzed by the UX and engineering team
We were requested to create the front & back end design. To get clarification of functions, I created a user flow:
ADMIN - within RLC
VISITORS - everyone
USERS -Shelters/ Signed up users
Functions of Each Person
Admin: Block users and accounts that go against the Ethics & Moral codes of the company, create new recipes, Tags Admin.
Visitor: Able to view recipes.
User: Person that signs up. Able to create recipes and make comments on others recipes, also can add tags to the recipe created.
After this initial meeting we created first hand sketches starting on mobile:
Then we continued with the initial low fidelity prototype:
The first iteration with stakeholders and the UX design team helped everyone be in the same page and quickly adjust functionality elements accordingly to the company goals and the user needs, we created a second low fidelity wireframe with adjustments discussed, that included:
Make the Create Recipe & Donate Button, much more easily accessible, adjust items in the Navigation bar for the signed in users and rethink back end tabs.
Then with the LF prototype approved we proceeded to create a first high fidelity prototype for A/B Testing:
We wanted to figure if the user would prefer categories or if a search by keyword would be enough:
First Option "A" - Categories circles of types of food, and list of ingredients
Second Option "B" - Direct search by keyword
We tested 10 people, 8 of whom agreed that the best option was the "B" - Direct search by keyword.
Mobile responsive site:
& The Back end Design:
We are currently waiting on stakeholders to approve final designs and begin developing the site with the engeneering team.