Grocery & Cooking App
Food waste is a global activity that affects everyone. Each year, rising amounts of food waste costs the average household $1,500 per year. In America, families spend 11% of their income on food and with weekly groceries adding up, ingredients you forget about tend to spoil from not being used.
Food waste is a three-part problem: lack of awareness about waste, inadequate information and skill sets around home cooking, and consumer behavior.
As households vary, other factors such as: recipe formats, inconsistent food labeling, lack of storage solutions create obstacles that exacerbate this problem. However, skills and knowledge in the kitchen passed down from generations to generations shows the influence of food’s ability to bring people of all walks of life together. It is paramount to understand the behaviors of a diverse set of users and implement them into an executable solution during this project.
In addressing the needs of the household meal preparer, I adopted a human-centered design method. After understanding and defining the needs of this group, I followed up with usability testing to fortify design decisions that increased the success of our users.
As the sole designer and researcher for this project, I actively performed User Research and Analysis, which was used to characterize the MVP’s and build strategic solutions based on the user's needs. Leading the project through the Visual UI Design process, I ensured the application of qualitative and quantitative data obtained through User Secondary Research within the Prototyping and Usability Testing stages to allow insightful and visually appealing user-centered design.
Spent On Food
As grocery store wait times increased during the COVID-19 pandemic, I wanted to ensure I got ingredients that lasted longer to decrease my shopping trips. Growing my knowledge base on better shopping and cooking habits, I realized the degree of issues that were taking effect globally. To better comprehend the issues users experience, this project focused on research that highlights a solutions based approach to address this problem.
Initially, I conducted Secondary Research, sourcing information on food waste from the Food and Drug Administration and popular organizations such as: Unenvironment and Foodprint.
This data further highlighted that budget and location were other factors that correlate to the behaviors of our initial food waste problem.
1. Food waste is due to the users habits; 219 lbs of food waste per person per year
2. 11% of their income on food - 6% groceries, 5% eating out
3. Location matters: Northeasterner spent $8,059 on food, Midwest spent $7,249, Southerners spent $7,117 and West spent $8,982
The breakdown of spending was essential in defining the demographic needed to be surveyed and interviewed in the following research. Initially I expected families or couples to spend more money on food, but further breakdown of individual spending in age range shows that could be incorrect when factoring in eating out. This additional information allowed me to incorporate a wider range of younger participants, which allowed for a broader scope to incorporate more modern and tech-savvy solutions.
As the primary research determined the ideal demographic to talk to, their thoughts and behaviors were what I wanted to better understand.
The research tactics I implemented included:
Screener Survey - sent to social media networks to recruit potential interviewees and gather quantitative data about their food habits
Interviews - conducted with 3 key users matching the required demographics to extract qualitative information on food habits
Synthesis Methods - categorized and catalogued research insights using Affinity and Empathy mapping to highlight key findings
The initial online survey asked 4 questions focusing on self-identification and food & shopping habits to determine potential interviewees for further research.
Participants were identified based on their age, role in household shopping and meal preparation, willingness to expand their skills, and willingness to be contacted for further information.
The final 3 participants were all female, ranging from ages 20 to 30, who either shopped for the household, prepared food for the household, or both.
This allowed interviewees to give more detailed responses from first hand experience and be able to express issues based on further research questions.
1. The biggest issue was using the produce / groceries on time before they spoiled; namely fruits and vegetables
2. The second mentioned issue was finding quality produce for the right price
3. Cooking and baking are cathartic for the participants
4. Mood is a big factor on how shopping is done and how food is prepared
5. Recipes came from another person, whether it be from close friends or social media personnel
6. All participants mentioned time as a restraining factor
After organizing the insights into prominent trends, I utilized Empathy Mapping to pinpoint unique types of users, distinguishing them by how they Think, Say, Feel, & Do to further digest the user demographic.
I was able to identify three unique types of users from Empathy Mapping:
1. Cook that bases shopping and meals off their mood and the seasons
2. Cook that shops and prepares meals on a structured and tight schedule
3. Cook that is a busy mom with no set schedule / prep
How Might We... (HMWs)
Compiling our research, I better understood what users I am ultimately designing for, ensuring the final design solution is successful in meeting the user’s needs. The next step is establishing the HMWs, concentrating on making a better, more specialized experience for the end user.
“HOW MIGHT WE HELP HOME COOKS...
...cut down cooking time?”
…connect to new recipes?”
...extend the life of their produce: vegetables, fruits, herbs, etc.?”
...make shopping easier and more tailored?”
...improve behaviors toward cooking and shopping?”
These user stories were populated employing information from HMWs, interview quotes, and personas.
Each user story addresses specific design features by defining an end goal for the user, which includes what they want to achieve and why.
After creating user stories, an organizational exercise was implemented in order to prioritize them by importance and impact on the users experience. This process included a level of tiering and further affinity mapping to identify similarities to help determine priority of overarching goals to smaller goals.
Minimum Viable Product
The Quick Sketch method was applied where 5 minutes were allotted to see what design ideas came about from the Buzz Session.
User Research highlighted that a simple design with expanded features is what was preferred. However, the simple sketches were a starting point to explore concepts that could work with smartwatch capabilities and smart home technology.
1. Smart Fridge Inventory Tracker
2. Location Based Price Alerts
3. Savings Activity - Coupon Availability
These ideas will be considered in further design development.
The site map exhibits the ideation of the user navigation and steps to find information, such as ingredient information or recipes.
Processing the potential features and concepts based on the user's needs led to formulating a sitemap that allowed me to understand how the information will be used.
This site map revealed that the majority of useful information would be found in the “Fridge” feature, where users determine what to shop for next, have recipe suggestions, and explore the timeframe of their ingredients.
Putting together the organization and structure of the app, sketching was the next goal. Taking into consideration the feedback and responses in our earlier research, these early iterations of the app allowed me to explore layouts and content placement for each stage of the user’s experience.
These early iterations tested varying icons and their layout for displaying ingredients, layout of the homescreen, and layout of ingredient information. These screens were part of the high priority MVPs, which made it an essential aspect to refine.
Further development in the designing process uncovered difficulties in the navigation of the “Add” feature, pivoting the sketch to another arrangement that made more sense for the user. Finally, fine-tuning the sketches allowed for the addition for sub-menus in the ingredient details, which also allows the user to see price comparison points for their groceries. I believe this refinement enables the user with useful information that could give more value for their time and wallet.
Digitizing these sketches through wireframing allowed me to modify and arrange content based on actual screen size and ensure elements were properly sized. The goal of this step is to ensure ease of use for the users, which produced potential final screens.
After completing the wireframes, this provided a base for the creation of wireflows. Utilizing Red Routes, I mapped out the steps users would take to complete essential tasks, allowing me to see if the design and functionality made sense and were mostly seamless.
To examine the user’s experience further, I chose to create wireflows for filtering through user’s favorites and adding inventory as these targeted more MVPs.
Following the organization and flow of the app, a mood board was created to inspire the style & UI design. Typography, Color Swatches, and UI of different apps exhibit the style I am aiming for.
This mood board is the guide that the final UI decisions are based on.
The combination of bright natural colors, simple lined icons, and clean text keep the appearance simple & light.
Inspired by my mood board, creating a style guide for the UI allows me to define elements of the app, keeping consistency and cohesion of the components between myself and future designers. This guide continues to go through revisions as the designing process allows me to refine the style during testing phases.
Applying the typography and iconography from my mood board into app components complemented the simple and familiar feel of the iOS interface. As well, creating softer tones within the app allows me to employ rounded corners within the design elements such as the buttons and product placards.
UI Design Iterations
Using the style guide and mood board to direct this process, the initial UI design was brought to life with colors and graphics.
The first iterations of the app were used to finalize the different combinations of layouts, button sizes, and styles of the screens. The sample variations examined elements in the calendar screen used to address the concerns of readability, color contrast, and overall emotion when viewing the design.
The main goal is to make the design easily digestible while visually appealing to our users.
The results of first UI testing phase allowed me to determine the pop-up menu should not take up the whole screen. Allowing users to still see the date and calendar menu in the background gives them confirmation without overloading the screen with extra notifications or overcrowding the new menu. Additionally, I anticipated users will want to quickly create grocery lists when booking shopping trips so expanding the pop-up menu to include this feature was a MUST.
After adjusting the main features of the calendar app, colors were our next goal. Sampling the red and green from the mood board gave a darker feel to the app and with lighter hues, blended with our call to action colors. However, the golden yellow tone was inspired from the beige & yellow tones and has a connotation of brightness, friendliness, and happiness - matching our goal for the app's overall feeling.
The final UI design iterations from this round were enough to continue developing a prototype with high fidelity mockups. Utilizing these, I will test app features and how successful the design concepts are with Usability Testing.
Applying Usability Testing is a crucial step in establishing strong design decision-making. Applying moderated remote interviews, participants are asked to complete specific primary tasks using our developed prototype.
As a foundation for this usability test, the goals of this activity are:
1. Identify any accessibility concerns, challenges, or problems with the design’s interface
2. Assess ease of use of app’s core functions among first time users - length of time or number of clicks to complete primary tasks
3. Establish a benchmark for user performance
4. Identify initial impressions of specific screens
I hope to gain insight of user satisfaction, design functionality, and app strengths & weaknesses.
Conducting five moderated usability tests...
focused on a set of given tasks based on our Red Routes. I collected data that identifies performance time and determined what areas I can improve to reduce time for users and limit errors.
1. Adding new items to the list - testing the flow of this process
2. Removing items from their inventory - testing how easy it is for users to correct mistakes
3. Adding events to their calendar - testing the "Add Event" flow that users will utilize to create shopping trips
4. Navigate Filter Screen for a recipe - testing the participants ability to interpret and understand sub-menus within the app
5. Remove an item from their favorite - testing if simple icons make sense within screen
Anticipating these tasks, I also set out to understand user's responses to the organization of the various screens.
Users enjoyed operating the prototype and the functionality of the app was mostly natural to the user. However, there were some minor issues that almost all of the participants either experienced or questioned during this phase. Observing and listening to their interactions with the UI interface guided us in identifying a list of priorities ranging from Critical to Normal, which served as a key component in deciding which improvements needed immediate attention for the final iteration.
Synthesizing Usability Data
Following the guidelines for Empathy Mapping, user insight was synthesized onto sticky notes and then grouped together according to common themes and similarities.
Following this trend, I was able to place emphasis on common design flaws that appeared in our earlier iterations and understand how or why the users felt during their initial interactions. After exploring the correlation to one another, I proceeded to create the usability error priority list.
Issue 01: Navigation Problems
Users could not locate home button or knew how to return to home page & lingered on navigation menu.
Priority Level: Critical & Major
When asked to return to the home screen or when users felt like they made a mistake and wanted to start over, participants could not figure out how to return "home".
Majority of users debated what the navigation bar icons truly meant and would second guess themselves before clicking on the correct icon.
Once on the chosen screen, users confirmed their assumptions were correct, but I would like to ensure they do not have to think twice about simple actions.
Revealed that iOS users also were not use to the back-swipe interface to return "home" and needed a clear icon or indicator.
I recommend adding a distinct home button to bottom navigation.
Clearly label bottom navigation icons to take away user's having to think twice.
Rearranging the social media feature to remove from bottom navigation as to not clutter the screens.
Issue 02: User Confirmation
Users could not clearly tell what they were looking at on the screens & when they completed certain tasks.
Priority Level: Critical & Major
After following the red routes to "create a shopping list" and "add items to that list", participants fumbled around on the screens.
Most users questioned whether they successfully created a shopping list & event on the calendar.
The capability to take a picture was a useful tool that every participant complimented, but were confused on the camera button and UPC button.
User flow did not make sense to the participants because it brought them back to the "adding an item" screen, but they had no indication if their item was already added or if they made a mistake.
I recommend adding a distinct label for each section and showing a timeframe to ensure another form of confirmation that they are adding items to the right date.
Having a notification system when users complete tasks to ensure users understand they can move onto the next step.
Issue 03: General Design
While using the prototype, users would express certain features they wish they could see, such as categories in the favorites.
Priority Level: Minor & Normal
As users worked through red routes, I intentionally asked for their opinions or feelings toward the screens they were on.
All users commented on how the pictures made them hungry, but would be distracted by minor design details such as "what is this button in the corner?"
Location icons on the placards confused users, but were told their purpose if the app were fully functional - the design made them curious to know more.
Participants were within the targeted age-group, but all had different preferences when it came to placard size, text size, and information they wanted provided.
I recommend that with the fully functioning app, there be a preference pane that allows users to adapt text and picture sizes to a user's liking.
Placing categories within the favorites menu, especially recipes to make it easier for users to narrow down their search and obtain cleaner organization within the screen.
Make sure that all icons are labeled to rid users of any type of confusion.
Final UI Design Iteration
Taking into consideration all recommendations, the rounds of usability testing brought about smaller issues once the major and critical issues were addressed.
Identifying and refining the minor and normal issues are just as important in ensuring smooth navigation of each screen and that information is simple and minimized cognitive overload to our users. Implementing categories, ensuring information accuracy, and updating manual entry flows are a few effective additions that brought a more streamlined experience.
Throughout this process, I did not want to lose the ability to connect to the user through the bright, vibrant, food pictures. To captivate our target audience, I decided to not revise the size as suggested by some of the users, but instead to implement horizontal scrolling under the "Must Buy" category to fit more items in the grocery list.
The additional time spent on elevating our UI design proved to be effective in creating a strong correlation in user interest towards our app.
These screens are anticipated to be the most representative of the app's core usage.
Users will be able to:
1. Maintain a schedule for their trips
2. Keep track of how many days are left for their produce
3. Be alerted when they have to add items to their grocery list from the suggested recipes
Utilizing the app correctly, users will easily be able to keep on top of their groceries and lower their impact of food waste and spoilage at home.
Accurate Food Tracking Flow
The main purpose of the app is to make tracking the user's groceries & using leftover ingredients before they spoil more streamlined into their daily lives. I made this a 6 "tap" process and less if using the camera feature. This flow highlights each step to optimize the app's intention.
UI Design Conclusion
Usability testing is a pivotal point in this process that made any errors in functionality and flow apparent; improving the app's overall appearance and securing user interest.
Facing multiple rounds of design iterations, the design outputs were critical in influencing the design outcomes in each revision. Each participant gave different insights, teaching me a lot about what different users in our target audience truly wanted in a grocery & cooking app. Although my initial design outputs captivated user interest, some design decisions failed to have as much success. However, I believe the final actualized product provides the perfect solution and learning tool for users to learn about their food behaviors and progress in reducing their contribution to food waste.
Outcomes & Lessons
Lesson: Users like to be notified and have confirmation in their actions.
Outcome: Integrating a notification system into the prototype, participants were happier and at ease knowing they successfully completed a task. User engagement and curiosity increased.
Lesson: User-friendly doesn't have one right answer.
Outcome: Keeping users involved in the designing phases and implementing their ideas allowed for a better experience, look, and feel in the final product.
More Than A Feeling
While designing for the user, it is imperative to see why their behavior came about. It was crucial for me to understand the reasons behind some of their reactions. During the moderated interviews, I allocated time to ensure I grasped a deeper understanding of my users' thoughts and emotions. In the final deliverable, positive feedback has shown the value of applying intuitive design methods. It means a lot to me that people become happier and healthier through the use of this app.
Looking Past The Design
While designing for a variety of users within our target audience, I'm asking myself what value does the app and design bring to them?
A good design focuses on what the users need, but is that enough? The intention behind the design is what matters. I understand that people struggle to balance every day life and fueling themselves with happy, healthy meals. I decided not to settle with just bringing healthier alternatives to our users.
I wanted my "good design" to go beyond an emotion-centric model, I want to improve their attitudes and behaviors surrounding food in general so that they create a more balanced lifestyle.
This project addresses the main components needed for the home cook or meal preparer, taking away some of the thought process involved with meal planning. There is an additional segment that would be an excellent project for future iterations of this app design.
Expanding on the social media factor for this app, I integrated a component in the design that would allow future exploration
INTEGRATION WITH USERS' FAVORITE INFLUENCERS
Allowing users to connect to media channels such as YouTube, Instagram, Pinterest, etc. gives them more opportunities to not only try other suggested recipes, but stay connected to their favorite blogs and easily integrate this into a daily routine within the app.
LOCAL COMMUNITY BOARDS :
Users get the opportunity to share savings, announcements, coupons, or finds from their local grocers for other shoppers.
I enjoyed this project a lot because I was able to study how others have been navigating food while the work environment has been affected by COVID-19. I would hope if this were to be produced into a fully functioning app, that it include functionality for online shopping or for people who want to go to the store, queuing up from home. I would love to hear further thoughts that others have and hope to connect! Lastly, I would like to thank my community and stakeholders for their input throughout this project.