UX RESEARCH • VISUAL DESIGN • PROTOTYPE
Offering healthy recipes for people using ingredients in their fridge to reduce food waste. YOUR INGREDIENTS, YOUR WAY.
CLIENT: Reciply (Capstone Project)
ROLE: UX Designer, Visual Designer, UX Researcher
TOOLS USED: Adobe XD, Google Forms, Whimsical
TIMELINE: 4 weeks
PROBLEMS
People are spending unnecessary money on groceries due to a lack of systematic way to track their groceries. There is a lack of grocery management system to track expiration date, along with no current integrated tool to manage food flow. Often times, people are throwing away unused items that they have purchased because they don't know what to do with them.
PROJECT GOALS
Create an accessible and easy way for people to track their grocery purchases with expiration dates that allows a meal planning service for busy people. With a new display different curated recipes using their own ingredients to reduce food waste that allow people to search recipes by ingredients and provide explanation and visual for unfamiliar, missing ingredients.
MY APPROACH
A mobile application that provide tailored recipes based on ingredients in their kitchen so people can utilize ingredients that they already have. This app also track expiration dates on groceries by offering two modals of grocery management with an integrated camera scanner to quickly manage groceries by date of purchase and estimated expiration date. It includes a full explanation of unknown ingredients so people can see unfamilar ingredients to learn about them.
01 - Research & Discovery
USER SURVEYS & INTERVIEWS
I wanted to understand the main problems with food applications that people use to find their recipes on the regular. I provided a Google Survey to a Slack group of healthy eaters, a Facebook Group of home chefs, and directly to family and friends.
After reviewing over 30 survey responses, I was able to gather some key insights that defined the scope of my project:
IDENTIFYING PAIN POINTS & NEEDS
After interviewing 5 people on their perspective on food wastage and their own grocery management system, I highlighted the following paint points and needs for users:
- Unable to find healthy recipes that fit their lifestyle with using their current ingredients.
- Struggle with understanding unfamiliar ingredient items
- Uncertainty of knowing what to cook for the week
- Lack of way to track what's in their kitchen and have full transparency of expiration dates
COMPETITIVE ANALYSIS
There are many existing food recipe applications that offer an easy systematic way for people to search for recipes. I compared three applications that I normally use to find recipes: Yummly and Sidechef. Through my analysis, I needed answers to questions such as are they providing people with what they need? How easily understandable is the user flow when discovering new recipes? Do they have in-place help for the app so people are able to use it with minimal technical support?
KEY INSIGHTS FROM COMPETITITORS
Most of food recipe applications do not offer recipes based on ingredients that people may already have. Therefore, people are spending more unnecessary money.
- There is an opportunity to provide users with an simple way to track groceries and expiration dates to reduce food wastage
- There is a need to visualize the personalization questions by asking two key questions to help users remember their information
- Competitors seem to have a confusing user flow which can cause users to get frustrated with the app.
02 - Define
USER PERSONAS
By studying my user personas, I was able to draw out some motivations and frustrations that they had with going through food recipe applications. It helped define a process of how to begin the design process. Below are three personas that I created to define my target user.
How might we help the user find a systematic way to manage groceries and create an easy cooking experience using their own ingredients?
INFORMATION ARCHITECTURE
My user flows helped me paint a picture on how this user will interact with this mobile application with discovering a recipe using their ingredients, adding their groceries information, and viewing a list of recommended recipes.
SITE MAP
I decided to distill my user flow into a sitemap of this application on Whimsical. Even though this is still in the define process, I wanted to catch any gaps or holes that I felt the project might have. The site map is still broad in terms of accounting for my user flows and this supports in creating my content strategy. Using this map as a starting point, it aided me in the future process of ideation.
03 - Ideate
First draft of sketches laying out several screens before the actual recipe. The onboarding process felt long.
Second draft of sketches felt more user friendly and there were only two screens before the home screen. Users are able to select recipes based from different categories.
I wonder if there was an easier way to track recipes besides having to manually enter the information.
INITIAL SKETCHES
As I was mocking up these sketches, I wanted to revisit some questions I still had from my user interviews. Referring back to my user flows helped tremendously in this process. Below are some key points that I had to think through before the next step:
- How will users manually enter their own grocery information? What if they didn't know how to track their expiration date?
- What is the simplest and easy UI I can use in this interface?
- How can I make the onboarding process easy and painless so users do not have to see multiple screens just to sign up?
- After they have found a recipe, what will happen after they were done with it?
WIREFRAMES
I created this lo-fi wireframes after my sketches. Using this interactive wireframe, I made the following changes from my sketches:
- Shortened the length of the onboarding process to answering key questions. If users forgot their dietary preferences or food allergies, they can edit in settings.
- I prioritize the kitchen items in by adding a row of expired items at the top to remind users to use those ingredients before expiration date.
- I offered users a quick search by ingredients to better find recipes that is suited for them based on what they have in the kitchen, which was found to be the highest priority in creating a food app.
BRANDING
I chose Reciply as the name for the application to simply demonstrate "recipes". There were a few final contenders that almost made the brand identity name such as "Simply Recipes" and "Raw Recipes" to show users that cooking doesn't have to be hard! It can be enjoyable, fun and we can reduce food wastage by utilizing our own ingredients. In the end, I decided to combine Simply Recipes into "Reciply". This sets a tone for the users that this app is simple and easy to use.
The name "reciply" was also inspired by my mom who loves to cook and often seeks to me for new recipes! Every time she finds a new recipe, she chants "Let's try the new reciply!" or "What's the reciply, Ana?" Because she is one of my favorite cooks, she is the reason why behind the branding name.
This color palette was inspired by the warm tones of the sunset. When I think about cooking dinner, I didn't want to be overwhelming for the user. By choosing a warm color palette, it feels inviting.
LOGO DESIGNS
I asked a group of 20 participants to take part in my logo preference test. As I was first playing around with brand colors, I knew I wanted to incorporate some kind of imagery on the logo as well.
Out of the 20 participants,
- 90% reported they loved the chef hat! Two people thought it was toast, but it was associated with a cooking app.
- The most popular color scheme was notably the orange on yellow background. They liked the position of the hat as if it is slightly on someone's head ( on the R in Reciply )
My final choice was using the same type face that was selected as most popular, with a white background. This was easy to read at first glance and there were no kerning issues with the letters. The happy chef hat continues to live!
04 - Prototype
For my final visual design, I used my brand colors and style guide to bring my wireframes to life. In this first draft of the prototype, my mockups looked pretty darn good for a food recipe application. I knew there were still testing and validation work that has to be completed.
ONBOARDING SCREENS / EDIT PREFERENCES
SEARCHING FOR A RECIPE BY AN (ALMOST) EXPIRED INGREDIENT
ADDING A NEW ITEM IN THE KITCHEN TO TRACK EXPIRATION DATES
05 - Iterations & Usability Testing
FINISHED COOKING, NOW WHAT?
In my first round of usability testing, users didn't know what to do after they were done cooking. So I added a Recipe Tracker that will track their recipes after they are completed with cooking. Using this method, users are able to look at their recipe tracker in their settings and find their favorite recipes with ease.
HEAT MAPS
In my usability testing, I was able to gather some heat maps to see what users were drawing their attention to. It seems as if the camera function is highly captivating so I needed to design a screen for that. In my first set of mockups, I didn't design that user flow. I wanted to simplify the grocery tracking service even more so!
ITEM SCANNER FEATURE
Some users pointed out that if they were in a rush, it would be troublesome to type out all the information in an application. I decided to implement a camera feature in here to speed up the process of tracking groceries and expiration dates. Users are able to take photos of their grocery item and the app will automatically scan PKU codes to find the matching ingredient. With an estimated expiration date, users no longer have to remember when an item expires!
I provided an option to edit this if they have purchased this grocery item days ago. That way, they can enter the correct purchase date and set an expiration date. If they don't know, the app will automatically recommend best expiration date based on purchase date.
PROVIDING USERS WITH OPTIONS
As great as this camera feature is, sometimes users would prefer just manually entering their information. I created a new screen that offers users two choices when recording their grocery items: to scan for a grocery item or to enter information manually. By providing this option, user can choose the route they prefer at their convenience!
Learning and Next Steps
RESPECT USABILITY TEST RESULTS
I was very glad that I did a lot of usability testing after my prototype. I wouldn't have caught all the gaps in my application until I have these great insights. Sometimes, it takes a fresh pair of eyes to see what you have missed.
THINK ABOUT YOUR USERS
If I were to go back, I would like to spend more time conducting more research on other problems that users were finding. I felt like I unraveled a lot of problems, but I know there is more work that I can do to support users even better and easier! There may be an underlying feature here that I could've implemented.
EXPANDING MY USER RESEARCH PARTICIPANTS
I interviewed people from the United States. However, I wonder what would happen if I interviewed people from outside of the country. There are many different cultural eating habits and routines I have yet to uncover and I would love to broaden my participant pool to better understand their culture with respect to their differences.
© 2020 ANA LIU