Leftover Goods
UX/UI Design, Prototype, Branding
The objective of this project was to develop a brand guide and prototype for a new mobile application called Leftover Goods. This app helps reduce leftover waste by providing ideas and recipes that will utilize excess ingredients at home. My role was to create a brand identity and design an interactive prototype for Leftover Goods to represent the visual brand and exhibit a smooth, interactive experience for the user.
the problem
Too often, young adults, college students, and even child-free couples are left with excess perishable ingredients. The amount leftover may not be enough to make a whole new meal, or is a mismatched ingredient, leaving the user uninspired to use it in their next dish. Unfortunately, many leftover items are thrown away, and allowing food to spoil is a waste of resources and money.
the solution
The user-conscious app called Leftover Goods is designed to help individuals reduce leftover waste and get creative in the kitchen. This app allows users to submit leftover ingredients, prompting a variety of recipes to display that include the available ingredients as well as any additional items that may be needed. Not only is it simple to use, but Leftover Goods supports a positive impact by reducing unnecessary waste.
app design
Visually, Leftover Goods provides users with a delightful look and an interface built to support easy, intuitive navigation. As shown in the app mockup, the main welcome screen prompts the user to either log into an existing account or create a new account. New accounts will proceed through a series of questions to help better define their recipe preferences. The home screen introduces new recipes, an option to view other users and their creations, and calls to action that allows the user to immediately begin submitting leftover ingredients or creating their own recipe.
brainstorm & define
To better define the problem Leftover Goods is solving, I needed to find relevance through empathy and explore how this issue truly impacts individuals' daily lives. Understanding what the end-user needs from their perspective adds clarity and direction to the entire design process. In this case, prospective users were looking to create better habits and make a positive impact by reducing leftover waste while getting creative in the kitchen. By providing users with an app that addresses miscellaneous ingredients left in the pantry, the refrigerator or freezer, and in the produce bowl, people can become more mindful when purchasing groceries, or they may find inspiration to cook something new.
When brainstorming for the brand guide, it was important to identify the look and feel of the overall brand image while considering how the brand image would impact the app interface and user experience. The inspiration for the app design and brand identity stemmed from bright, vintage colors and top-down images. Top-down images worked because of how visually captivating it was to have food and ingredients seen from above, allowing collectiveness in the details and display. In order to maintain a cheerful and fun tone, I chose colors for the logos and app features to be bright and vibrant, while elegant and mindfully minimalistic.
ideate
Based on my initial ideas for the brand guide and the overall look of the app, I sketched out a few logos and app concepts. Producing the brand guide happened before any visual drafts of the app because I wanted to solidify the brand identity. As mentioned above, the colors chosen were bright and cheerful. The conception of the logo variations attributes to the name, Leftover Goods, by including an item of food and playing with the letters, specifically the o’s in the word “good.” Leftover Goods is meant to signify positive experiences and outcomes, so the secondary wordmark takes the favicon fruit and has it become a smiley face. The primary wordmark is clean and minimal, setting the tone and making it the main logo. I went with a sans-serif typeface for the logo and app to ensure legibility and because this particular typeface complemented the tone of the overall brand. Simple, minimal line icons were also added to be used as food items and diet preference indicators within the app.
After developing a solid foundation for the brand identity, I began initial drafts and sketches for the app interface and design. I started off by listing the elements and features that would be included in the app. I then conducted an exercise using Post-it notes where I could better determine user flow(s). This helped identify how I would design the placements for each feature and the intended actions. Next, I drafted and sketched a number of storyboards to gather ideas for each screen and the user flow. The final storyboard iteration ultimately became the guide to the finished prototype.
wireframe & design
A crucial piece of this project was creating wireframes and drafting user flows in order to work out any unclear transitions while mapping out the foundation of the overall app design. Using Adobe XD, I created wireframes for each planned screen that would be displayed in the final prototype and in the mockups. It was determined going into the wireframing process, that two user flows needed to be shown. The first flow would demonstrate a new user’s experience and the second flow would be for a returning user.
Having produced the brand guide and the storyboard in earlier stages helped define the design direction for the overall app since I heavily referred to these stages when progressing through to the design phase. The design incorporated key brand colors and included contrasting features so that all elements were legible. Users were able to determine which elements were meant to be buttons and when to take actions based on highlighted questions. The goal was to ensure an intuitive experience and to keep the design looking modern, clean, and nice to view.
test & refine
Before presenting the prototype, I tested my wireframe with drafts of the user flows to a small group that fits the target audience profile. I presented a list of actions I wanted them to take for each screen without giving away exactly where or what to tap. I wanted to determine if the user flows worked, meaning that they were not confusing, hard to navigate, or clunky. The completion rate for each flow fell between 88% and 100%. The new user flow needed more improvements than the returning user flow because it had more actions to follow.
I resumed testing after some changes to the flow and completed the app design within Adobe XD. This time around, it seemed that the users were more engaged because visually, the app had a more finished look which I believe added to the entire user experience. The completion rate for each flow was 100%, given that they were provided semi-vague instructions on how to navigate the prototype.
When it came to designing the app, I included additional screens to enhance the transitions and overall experience. Recording the user flows allowed me to view the prototype from a mobile device which created a more realistic experience. These recordings were also sent to the testing group for viewing and feedback. The importance of trialing prototypes in real-life settings greatly helps build perspective. For example, I hadn’t fully considered how someone may hold their phone which prompted me to change the location of a button.
conclusion
From start to finish, the design process for Leftover Goods relied on how the product would impact the end user. When building this product, I was not only focused on solving the issue of food waste but on how a user would leverage this app to help reduce waste. To be successful at that, I needed to consider the users’ perspectives and accessibility, and design a product that could be introduced into their lives without disruption, and instead help them build better habits while reducing waste.
