Reduce Waste
By: Raquel Gonzalez
What is Reduce Waste?
Reduce waste is a mobile app the tracks down food that went into the trash. Not only that, it allows the user know when the food that they have at home will expire so from there they can either make food out of it or donate it to local food banks. It will reduce waste that goes into our landfill.
Design Process
UX Persona
In order to start articulating ideas, I based my thinking on a persona, Roxanne, who wanted an app that will help her reduce waste as she is a full-time head cook with 3 children. Not only will this help her at home but also her business since wasting food is very common for her.
User Journey Map
Roxanne wanted something that was organized and has many visuals since she is a busy woman, and needs to glance quickly. She did not like using paper so knew that looking for an app the fulfills her needs is the way to go.
Information Architecture Document
Reduce Waste has four pages that will allow the user to look when food is about to expire, waste tracker, have recipes, and a place to donate food that is about to expire.
Flow Chart
This flow chart shows the user the different pages and the interaction that they will expect for each page.
Initial Annotated Sketches
During the first steps, I went with the flow and just sketched whatever came to mind. I started with the log in page, homepage, and recipe page.
Sketch Iterations
After my initial sketches, I started to sketch more ideas and look at different placements. It was a little hard to come up with unique ideas but again I sketched and made sure to include everything that I wanted during this process.
Log In Page
Homepage
Recipe Page
Low Fidelity Wireframes
After sketching a couple iterations, I used Figma to help me develop my low-fi wireframe to get a rough idea of what the app will look like. I wanted these to be bold and big to grab the user's attention at first glance. As well as keeping it simple and organized to fulfill Roxanne's needs.
Low Fidelity Prototype
From my low-fi iterations, I chose the more simple and straight-to-the-point wireframes. Circle and rectangles are easy shapes to navigate through since many people are familiar with them. I wanted the user to type in their responses which then would give the results.
User Think Aloud
After my first prototype iteration, two classmates looked over at my prototype and gave me valuable feedback.
Classmate A:
• Make the font size more larger
• Have a drop down menu instead of having the user to type in their response
• Add a favorite button
Classmate B
• Drop down menu and add a scroll.
• Larger search button
Iterations Based on User think Aloud
I made sure to have the drop down effect when the user had to choose their options, as well as changing the font size to 16pt instead of 12pt, added less options, made the search button larger, and added the option to save a recipe. The new iterations looked more simple and organized which reflected on what my persona wanted.
Final Touches
After asking for feedback one last time from the Professor, I needed a little more work. When I wanted the user to search for what kind of recipe they wanted, it did not make sense for them to click on the 'search' that would take them to another page and asking more questions. Instead, it made more sense that when the search button is clicked to have a drop down of the different recommendations as well as having a qwerty keyboard for the user to type. I changed the results to a list because when there are results there should be more than one option. Also, I added a scrolling effect and allowed the user to change the number of servings after the recipe is chosen. It really started to come together.
Final
