Kitch
A meal-planning app for iOS featuring recipes, food scanning, and grocery e-shopping.
What
Why
Category
Role
UX Researcher
Timeline
Tools
Introduction
The Problem
Most people want to improve their diets and eating experience but they don’t have extra time to dedicate to the meal process. Despite food’s central importance to their daily lives, many routinely fall short of their food goals. Given that people's time and energy is at such a premium, I wanted to explore how a meal planning app could help simplify the process.
The Solution
I designed the Kitch app to be an all-in-one solution, addressing each step of the meal process to reduce stress and save time:
Thousands of recipes with clear information up front for making choices that are straightforward and informed.
Simple shopping list creation, grocery ordering, and record-keeping.
Multiple data entry options for easy goal tracking, including barcode and object scanning.
Design Process
My overall approach was rooted in Design Thinking - focusing first on studying the user and empathizing with their needs and desires. From there, rounds of ideation led to rounds of prototyping, and back again. At all stages continuing to test concepts and designs against real-world users was critical to developing a product with real-world utility and appeal.
.png)
Secondary Research
I conducted open-source research to develop background knowledge and to identify some of the key challenges in addressing the subject. I also reviewed the different categories of solutions currently offered in the market in order to gauge the competitive landscape and learn from it.
97% of Americans say they have active weight-management goals.
Promoting (and tracking) progress towards these goals are critical functions to serve this population.
The average American spends 30 minutes cooking per day.
Despite a strong desire to eat better, Americans dedicate the least time to cooking among industrialized nations.
80% of survey respondents said they lacked confidence in in the healthiness of their food choices.
Conflicting information and opinions on diet choices also caused 50% to second-guess the choices they make.
Research consistently showed that the American population suffers from a high amount of diet-related health issues and has little extra time to dedicate to resolving them. Also of interest was the finding that weight management applications have consistently high attrition rates due to the constant effort required to make them useful.
Competitive Analysis
I analyzed three of the most popular apps in the meal planning space. Each features the ability to determine meal parameters (due to dietary restrictions, preferences, health goals, etc.), to select or add recipes, and to order groceries. I evaluated each on their performance in three core design categories:
Key Takeaways
Navigation and design similarities in existing apps likely reflect user expectations.
Text-heavy recipes slow the user’s review process.
Primary Research
After getting a general sense of the market space through secondary research I engaged potential users directly to gain insight on several key topics:
Pain points and priorities around meal planning and shopping
Current processes used (and the steps involved)
Food goals and obstacles to achieving them
Preferred amount of weekly cooking
Surveys
In order to screen potential interview candidates and gain some initial insights into the users I created an online screener survey. The criteria for the user base was broad; they needed to:
Own a smartphone.
Be a grocery purchaser for their household or themselves.
Live in an area with access to multiple grocery purchasing options.
I received 32 completed surveys, from which I derived the following key insights:
The clear majority expressed experiencing difficulty in the process of grocery shopping and meal preparation.
There is a broad market for services that reduce difficulty in this process.
The time users dedicated to meal preparation varied significantly.
Different user types will need cooking options that match with their availability and interest.
Regarding user priorities when making buying decisions, the cost of food was less of a factor than originally assumed. By contrast, the perceived healthiness and ease of preparation of food were shown to be driving motivations.
User Interviews
Of the 32 respondents from the screener surveys I arranged to conduct interviews with five of them. Two of the interviews were conducted in-person and the other three remotely. The interaction with real-world users challenged my baseline assumptions in multiple ways and served to better orient the development process towards real-world needs. Below are several key insights:
Despite the users expressing a surprising broad range of opinions and preferences, three overall deficits were consistently voiced in all interviews:
Affinity Maps
I began by taking key points from the interview transcripts and writing them on Post-It notes. I then conducted several rounds of organizing the notes into progressively more distinct and meaningful areas of opinion.
Empathy Maps and User Personas
I then created Empathy Maps and User Personas in order to focus the findings into accessible reference tools. This helped me throughout the project to design around a conceptual user.
User Stories
I listed out User Stories in order to from general user wants and needs to more specific requirements. These started with the core things the users wanted to accomplish, then I translated them into specific tasks. These I prioritized to determine if they were necessary, helpful, or just nice to have.
Early Concept Development
Initial Ideation
In the early ideation stage I sat down for an extended brainstorming session, writing and sketching out thoughts and ideas on Post-It notes. At this stage all ideas were valid and I challenged myself not to evaluate in real-time.
Later on in the process I reviewed, discarded, and explored ideas further. I did some initial sketches to represent potential screen configurations. My focus was on quickly moving those early ideas out of the conceptual realm into some basic visuals, after which I was able to evaluate from a new perspective and then ideate further.
Site Map
Through organizing the User Stories I developed a sense of an initial information hierarchy for the app. This was a rough concept at this stage, a starting point from which to develop the organization further.
User Flows
Using the Site Map as a conceptual base, I began to build out the structures of the core functionalities of the app. In this phase I identified screen functions, decision points, and data-entry points. One of three primary Red Routes is shown below - the user’s path for recording meal information and ordering groceries:
Ideation, Prototyping, and Testing
Paper Sketches
I created the first complete set of screens in sketch format, focusing on the general layout. At this point my focus was on giving form to the initial user flows to make them testable against real users.
Guerrilla Usability Testing and Iteration
Using the paper sketches I created a low-fidelity prototype (using POP Marvel) which could be accessed online or via mobile. I conducted a series of 4 user tests to assess design performance, both remotely and in-person.
The Top-2 findings are below:
1. Grocery Ordering Screen
Issue: The original checkout process took users to a confirmation screen with the total number of items and the cost of the order. The second screen showed the items being ordered but didn’t allow them to be changed. Users perceived this as frustrating and redundant.
Solution: I condensed the functions into a single screen, with the total number of items and the total cost updated in real-time as the user adjusts the list. I replaced the full-screen confirmation process with a simple modal.
2. Recipe Scheduling Screen:
Issue: The level of granularity offered when scheduling a recipe/meal proved to be overwhelming to the user.
Solution: I created a ‘schedule now’ option as the default setting, allowing users to opt for specific times only when desired.
Low-Fidelity Wireframes
At this point I began transferring the sketch concepts into Figma. This was both a mechanical process (the recreation of existing ideas in a new format) as well as an iterative one. In addition to implementing the solutions identified in the Guerilla Testing phase, I also began to evolve the design within the context of actual screen dimensions.
Wireflows
Using the Low-Fidelity Wireframes I designed Wireflows, visually depicting the navigational structure of the app and the relationships between screens. This helped me to identify shortcomings in the design of the initial structure.
.png)
Visual Design Development: Mood Board
In order to move beyond the structure and develop the aesthetics of the app I needed to begin with a felt sense of the user base; to do this I created a mood board. It centers conceptually on the ‘go-getter’: someone living life with plenty of responsibilities but who also prioritizes taking care of themselves. They have limited time in their schedule and seek to make the most of it.
Imagery Inspiration
These images are intended to convey themes of engagement and empowerment, doing so in bright tones and with a sense of there being room to breathe.
Concept: “There's much to do, but you have the time and ability to do it.”
UI Inspiration
In these examples bright colors and rounded edges convey a soft, approachable feel. Key information is being presented in formats that are easy to digest, and close-up food photos generate and hold user interest.
Visual Design Development: Style Guide
Based on the initial concept and Mood Board and I developed a Style Guide to ensure consistency in the design process. While the imagery concept remained unchanged during the iterative process, all other elements of the guide were modified multiple times in response to how well they performed during prototype testing.
Typeface
For the typeface I was primarily concerned with ease-of-use and readability. The focus of the app is large-scale rich images with information that is easy to consume. I decided to use SF Pro - a standard iOS sans-serif typeface. The design of the letters is round and open, in keeping with the accessible and welcoming character of the app.
Icons
My initial icon set was from Flaticon. I was aiming for a rounded style of medium weight that would convey the meanings succinctly. However, once I incorporated them into the prototype I realized that the designs were overly detailed at small scale, and that their weights were slightly inconsistent. I then migrated to an icon set from Google Material Symbols which featured simpler designs of uniform weight.
Component Guide
I used core components and variants to build the prototype. Given the degree of iterating that went into the project it was critical to be able to effect changes across all instances of a component at the same time to avoid inconsistencies.
Color Palette
I selected a warm and understated orange for the primary brand color to evoke a sense of energy, ambition, and vitality. The secondary green is rich and light, and relates to a sense of growing things, health, and balance.
The grays are derived from darker shades of the primary orange to create a subtle consistency throughout the palette.
WCAG Compliance
Once I began creating the low-fidelity prototype I discovered that the initial color palette fell short of contrast requirements. At that point I modified the palette, keeping true to the core concept while ensuring sufficient contrast across the design.
Imagery Guide
By using photos angled from slightly above the dish, the app preserves the perspective of the user as they sit down to eat, creating a warm and familiar presentation. Food colors and textures are highlighted through the use of a high-definition close-up format.
Alignment and Grid
I used an 8px grid as the basis for the app. 4px deviations were used for the upper and lower margins as well as well as the bounding boxes.
High-Fidelity Prototype Development
Search Results Screen
In its early forms the Search Results Screen consisted of mostly text, and the Search function remained accessible at the top of the screen. For the final version I added a color wheel to visually represent macronutrients, a smaller preview of which I added to each initial search result. I removed the Search function from the Selected Result Screen and increased the negative space to simplify the presentation
Individual Recipe Screen
While the general layout of the Individual Recipe Screen remained consistent through the design process, there were several significant changes made.
I separated the ingredients and recipe information into distinct tabs based on user feedback and relocated the tabs to center-screen. I added the ability to review the recipe, access existing reviews, and share the recipe with friends. I also added icons to the at-a-glance information below the recipe name to increase visual appeal.
Usability Testing: Round 1
I conducted the first round of moderated Usability Testing with 5 users, observing their actions and recording their verbal feedback as they engaged multiple tasks. The first round revealed a number of mechanical issues, further highlighting the criticality of testing at all stages of development. A number of substantive issues were identified and addressed.
The Top-2 takeaways are below:
1. Store Selection Screen
Issue: The toggle function was causing confusion by seeming to indicate that multiple store selections could be selected at the same time, as each toggle could be switched on its own.
Solution: I replaced the toggles with radio buttons to convey that only a single store can be selected at a given time. After making this change there were no repeats of this issue in subsequent user tests.
2. Recording Options Screen:
Issue: The original screen featured multiple options for data entry, not all of which were clear to the user. The ‘Add Manually’ section was the only one with a clear label and it occupied the majority of the screen, monopolizing user attention.
Solution: I modified the primary screen to contain only buttons leading to the distinct data entry functions, each of which was relocated to its own dedicated screen. While this did increase the overall number of screens in these processes, the number of distinct taps remained the same.
3. Recipe Screen
Issue: Multiple users reported a desire to see the ingredients before the recipe steps. The ability to access the ingredients and recipe via the upper tabs was not always apparent.
Solution: I recognized that the large-scale image was creating too much distance between the tab options and the primary screen information, with the user’s eyes being drawn downward. I relocated the tabs to the middle of the screen, directly above the section they impact. I also reordered the tabs to bring the Ingredients Tab to the front position.
Usability Testing: Round 2
The second round of testing was conducted in the same manner as the first with a new group of users. This time only 2 minor mechanical issues were identified.
The 3 primary takeaways are shown below:
1. Scan Screen
Issue: Users consistently assumed that the Scan Object and Scan Barcode functions would be accessed on the same screen, not separately as designed.
Solution: I combined the functionalities to match user expectations and created icon buttons to indicate the active function. Further testing revealed the icons to still be non-intuitive to some users, so I added annotation to the secondary button. This was later demonstrated to resolve the confusion.
2. Meal Schedule Screen:
Issue: After adding a new item or recipe to the Meal Schedule the user was unclear that it had been added successfully (or where it was located on the screen).
Solution: I added a limited-duration highlight animation to the new item to provide clarity and positive feedback to the user.
3. Individual Recipe Screen
Issue: While users universally understood the star rating display, they were frustrated by being unable to access the reviews themselves. This was shown to be a key metric for decision-making for several users.
Solution: I modified all instances of the star ratings to be tappable, leading to a dedicated Recipe Ratings screen where users can access existing reviews and ‘Like’ those that they find most helpful.
.png)
.png)
.png)
