Kenny Tran
UX Researcher | UX/UI Designer
Made with

Aromatique:
Grocery & Cooking App

Image alt tag
Process
01. Project Context

Problem

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.

Solution

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.

My Role

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.

02. Research
$400 billion
Lost A Year
219 lbs
Food Waste
Per Person
11%
Of Income
Spent On Food
14%
Food Lost A Year

Secondary Research

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.

Key Insights

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.

Primary Research

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:

  1. Screener Survey - sent to social media networks to recruit potential interviewees and gather quantitative data about their food habits

  2. Interviews -  conducted with 3 key users matching the required demographics to extract qualitative information on food habits

  3. 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.

1
Online Survey
4
Questions
25
Responses
3
Participants

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.

After completing and evaluating each participant interview, a considerable amount of insight was pulled from these discussions.I used Affinity Mapping to construct clusters of common trends, then further assembled similar insights into distinct emerging trends. 

After completing and evaluating each participant interview, a considerable amount of insight was pulled from these discussions.

I used Affinity Mapping to construct clusters of common trends, then further assembled similar insights into distinct emerging trends. 

Research Synthesis

Key Insights

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

Personas

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

1
Emotional
Preparer
2
Busy Bee
3
Mommy Brain
These Empathy Maps outlined my Personas using user demographics, habits, thoughts, and feelings.

These Empathy Maps outlined my Personas using user demographics, habits, thoughts, and feelings.

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?”

03. Design Ideation

User Stories

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.


Using the initial MVP list of epics and sub-stories, the final MVP influenced the design decisions based on the most important goals for our users. The goals were taken from highest to lowest priority and placed into Primary, Secondary, and Tertiary goals. Primary goals were the main focus while the other goals were used as optional features, but are not absolutely necessary to our solution.

Using the initial MVP list of epics and sub-stories, the final MVP influenced the design decisions based on the most important goals for our users. The goals were taken from highest to lowest priority and placed into Primary, Secondary, and Tertiary goals. Primary goals were the main focus while the other goals were used as optional features, but are not absolutely necessary to our solution.

Minimum Viable Product
(MVP)

The objective of the Buzz Session is to allot a short timeframe for brainstorming solutions & ideas that relate to our HMWs from earlier research.The timeframe for this segment was 5 minutes, which allowed for quick-thinking rather than over analyzing of the ideas.Afterward, these ideas were sorted and grouped into overarching themes where I saw similarities and patterns that connected the different categories.

The objective of the Buzz Session is to allot a short timeframe for brainstorming solutions & ideas that relate to our HMWs from earlier research.

The timeframe for this segment was 5 minutes, which allowed for quick-thinking rather than over analyzing of the ideas.

Afterward, these ideas were sorted and grouped into overarching themes where I saw similarities and patterns that connected the different categories.

Buzz Session

Aromatique: Grocery and Cooking App

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.

Initial Concepts:

1. Smart Fridge Inventory Tracker

2. Location Based Price Alerts

3. Savings Activity - Coupon Availability

These ideas will be considered in further design development.

Site Mapping

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.

Already from this site map, a primary goal for future Usability Testing is to ensure the proper organization of the Fridge feature for ease of navigation to users.

Already from this site map, a primary goal for future Usability Testing is to ensure the proper organization of the Fridge feature for ease of navigation to users.

Sketching

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.

Aromatique: Grocery and Cooking App

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.

Wireframes

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.

Middle to High Fidelity Mock-Up

Middle to High Fidelity Mock-Up

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.

Mood Board

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 most influential aspect of the mood board is the Brand Personality, which assisted in forming the color palette. These colors were sampled from various food pictures, demonstrating a balance of vibrant natural colors and cool neutrals. The final colors emulated this palette, except with a brighter tone that allows for a cleaner and more eye-catching look. One of our goals is to attribute happier behaviors toward cooking and food shopping, which is another reason as to why the final colors are more vibrant.

The most influential aspect of the mood board is the Brand Personality, which assisted in forming the color palette. These colors were sampled from various food pictures, demonstrating a balance of vibrant natural colors and cool neutrals. The final colors emulated this palette, except with a brighter tone that allows for a cleaner and more eye-catching look. One of our goals is to attribute happier behaviors toward cooking and food shopping, which is another reason as to why the final colors are more vibrant.

Style Guide

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.

04. Testing and Verification

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.

Usability Findings

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.

Aromatique: Grocery and Cooking App

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.

Recommended Changes:

  • 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. 

Aromatique: Grocery and Cooking App

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.

Recommended Changes:

  • 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.

"I wish there were stacks of categories... if I only want sauces or salads, I would just go directly there."
- Tyler
Aromatique: Grocery and Cooking App

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.

Recommended Changes:

  • 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.

05. UI Design Finalization
32
Screens
3
Iterations
5
Usability Tests
110
Wireframes

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.

Key Screens

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.

Aromatique: Grocery and Cooking App

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.

Aromatique: Grocery and Cooking App

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.

06. Reflection

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.

Future Development

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

Aromatique: Grocery and Cooking App

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.

Closing Thoughts

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.