- This is a solo project where I assumed the following roles:
- UX Strategist
- UX Designer
- Web Designer
- UX Design & Strategy:
- MVP scope
- User stories and persona
- Competitive analysis
- User research analysis
- Web Design:
- High-fidelity mockups
- Competitive analysis
- 4 weeks
- Iterate HQ for surveys
- Axure RP for user flows
- Google docs
Ingrain is a plant-based, meal-planning app that was conceived as a response to the diabetes epidemic that is presently ravaging North America. Its purpose is to equip people who suffer from diabetes (and other chronic diseases) to reverse their diagnosis with plant-based foods.
A case study in two parts
This is Part 1 of 2 in the Ingrain case study series. This first part covers the research and user insights that led me to redefine the MVP. The same insights became the basis for structuring the content of a product page to maximize user engagement.
See the process of putting usability ahead of expressivity in Part 2: User Interface and Interaction Design
Ingrain Part 1: UX Strategy & Product Page Design
I learned to let go of my notions of what a product should be—and allow research data and user insights to guide me to what the product needs to become.
Why address a diabetes epidemic with a meal planning app?
The problem with a traditional approach to treating diabetes is that it undervalues the role of plant-based foods as natural medicine to heal the body.
Diabetes treatment regiments tend to focus on managing the disease through medication. The goal is to prolong life expectancy with diabetes—rather than eradicating it completely. The design of apps for diabetic persons have mirrored this approach by focusing on providing disease-management tools such as logbook apps that monitor blood sugar levels.
From the start, Ingrain is about healing the body with plant-based foods.
Rather than providing tools to manage a disease, Ingrain provides the tools for anyone to transition into plant-based eating and reverse the progression of chronic diseases like diabetes.
Ingrain’s plant-based approach builds upon the researches done by American physicians Dr. Rip Esselstyn and Dr. Neal Barnard—as featured on the documentary film Forks over Knives.
The first pivot
Although Ingrain grew to become a plant-based meal-planning app, it didn’t start out that way. Originally, I set out to design a gamified nutrition education app for youth with diabetes. However, given the time constraint of the project, going through the process of obtaining permission to interview and conduct user-testings prove too significant of a barrier to overcome. At that juncture, I shifted the project scope to be a gamified nutrition education app targeted towards adults ages 18 to 30.View the full target user group selection analysis
Validating assumptions of the users' mental models
I conducted user research to better understand the mental model of young adults when it comes to healthy-eating. To validate the assumptions of users’ mental models that I gleaned through research, I deployed a survey and conducted interviews to assess young adults' perceptions and attitudes towards the relationship between food and health.
The following are the risky assumptions that need to be validated:
After reviewing 27 survey responses and analyzing 3 interview responses, here are the key discoveries of the users' actual mental model:
When participants were asked to rank 12 foods in the order of most to least healthy, the top 3 spots are taken by plant-based foods. But the belief that fish and chicken are healthier meats compared to beef still persists.
44% indicate eating something they know is unhealthy at least once a day.
78% consider meals containing meat and carbs as foods to reward themselves with.
Several participants believe that exercising regularly cancels out the negative impact of consuming high-fat foods.
Rampant misconception that chronic diseases like diabetes and high cholesterol are hereditary diseases rather than the result of a diet high in animal products and processed foods.View the user survey created on Iterate HQ
The second pivot
After analyzing the results of my user survey and interviews, I realized that no amount of gamified nutrition education will convince people who are apathetic to their health—that their poor dietary choices are on a collision course with their health.
This insight led me to shift ingrain’s target user group. Instead of trying to convince unmotivated adults to eat healthily through a gamified nutrition education app—Ingrain will instead empower people who have made the decision to transition into plant-based, whole foods.View the full user research analysis
Defining the MVP
Product design goals
Based on findings from competitive analysis and user research, I synthesized the following high-level goals that the Ingrain meal-planner seeks to achieve:
With the rising popularity of questionable diets and widespread confusion over what constitutes healthy food, a recipe app from a plant-based perspective will go a long way towards countering the health disinformation.
It is not enough to just provide healthy recipes. Supporting people on their journey towards healthy eating entails removing barriers towards the planning, purchasing, and cooking of healthy foods.
One of the biggest barriers to plant-based eating is the reluctance of foregoing the taste of favorite foods. In the words of my mentor, "You can spend all day talking about how healthy the food is. But if it is not tasty, people won't try it."
Analyzing the competition
I studied several competitors to understand how they position themselves in the marketplace and discern their business models.
Model 1—The vertically-integrated meal-delivery kit providers
ChooseVeg Meal Planner and the Jay-Z & Beyonce-endorsed 22 Days of Nutrition act as extensions of a vertically-integrated meal-delivery service. Consequently, their meal-planning services are geared towards selling their food products.
Model 2—The traffic funnels
The second model is that of meal-planning apps that function as traffic funnels that direct users towards a brand’s website. Their business model is geared towards enticing customers who can afford to buy their services and merchandise—by offering access to a limited version of their services.
Model 3—The community recipe site
A third model focuses on serving as many users as possible by providing them with free access to curated recipe content and monetizing through product-placement. The result is a crisp, user-focused cooking app that is not trying to sell products to users. The best example of this is the Berlin-based cooking app Kitchen Stories.
It became clear that Ingrain should follow the community-recipe-site model and be the “Kitchen Stories from a plant-based perspective.”
I then proceeded to take a closer look at the structure and interface of three recipe apps that best reflect the plant-based ethos in their interface. They are Kitchen Stories, Oh She Glows, and the Forks Over Knives Meal Planner app.
Here is a breakdown of what each app does best:
Kitchen Stories has the cleanest and tightest information architecture that I have ever seen in recipe apps. This is accomplished by limiting user engagement with content (e.g. like, save, share) to the smallest unit of information (a recipe article). A featured kitchen story is never more than two levels deep.
Oh She Glows has the best consistency in art direction. It also has the most comprehensive search filters that take users’ lifestyles into account, such as filtering by dish type, meals, seasons, occasions, time-to-prep, and budget-limit.
Like Kitchen Stories, the Forks meal planning app has a tight user flow where a stand-alone article is never more than two levels deep, which eliminates the need for back-buttons to have labels that indicate its destination. Its tab bar navigation is conducive to the multi-tasking required to meal plan.View the full competitive analysis
Defining the target audience
I distilled the findings from user research into two personas that have similar motivations, but differ in terms of gender, life stage, and level of cooking expertise.
The MVP scope
I defined the final scope of Ingrain’s feature set based on the design principles that emerged from competitive analysis and user research:
Healthy recipes should be available to everyone regardless of income. The tenet of inclusivity also extends to a focus on international cuisines, which reflects the diversity of Ingrain's target audience.
Content should be curated based on users' preferences and past browsing behavior. Avoid making users sift through content to find what they're looking for.
Providing guidance serves as a form of soft accountability to encourage users along the journey.
User stories included in the MVP
Defining the target user group and the MVP feature scope enables me to refine the ways in which to communicate the product's primary differentiators. By identifying the top product features that add the most value to the user, I was able to create a preliminary skeleton of the page's contents.
A user-focused meal-planning app from a plant-based perspective—available to users free of charge.
A meal-planning tool for those who seek to reverse their chronic diseases by eating a plant-based diet, available free of charge to all who need a soft form of accountability into transition to plant-based, whole-foods eating. Like the Berlin-based Kitchen Stories app, Ingrain will monetize through kitchen product placements.
Personalized meal-planning tailored to the user's cuisine preferences and body characteristics.
By answering a few questions to create a dietary profile, Ingrain will create daily serving recommendations of plant food groups for the user and suggest recipes that closely match the user's food preferences.
Decrease the obstacles to meal-planning as much as possible.
Ingrain allows users to adjust serving sizes and quickly add ingredients to a grocery shopping list. It even flags allergens and food dislikes that the user specifies in their dietary profile.
Offer a tool to track one’s progress
An interactive food tracker allow users to track their progress towards their recommended daily food servings, teaching the user to create balanced, plant-based meals appropriate to their body characteristics, so they can stave off hunger during their transition.
Learning from the competition
I examined how the four top players in the meal-planning space structure their product pages, among them are Pinto, Forks Over Knives (FoK), ChooseVeg, and 22 Days of Nutrition. Of the four, Pinto and Forks Over Knives had the most compelling landing pages.
Here is a comparison between Forks Over Knives and Pinto's page structures:
Both FoK and Pinto have an almost 1:1 ratio of feature set to CTAs, both also concentrated the frequency of CTAs towards the beginning of the product page.
In terms of navigation, both opted not to have fixed nav-bars despite the length of the product page.
Structuring the product page
The initial page structure of Ingrain features an almost 1:1 ratio between feature set and CTAs. I opted to remove the recurring CTA of “get our free app” from the page-flow and unto the fixed top navigation bar. This allows me to reduce the number of CTA's throughout the entire product page—giving the featured recipe content all the room to take center stage.
Designing the skeletons of the page layout
Ingrain’s product page comprises of four primary types of layouts: hero, product feature, social proof, and closing hero. Here are the variants considered within each layout type.
The origin of the name
The name ‘ingrain’ is chosen because its multi-layered associations to plant-based eating. The word ingrain can be interpreted as ‘ingraining an eating habit in someone.’ It is also a play on the food group ‘grain,’ one of the four plant-based foods.
Here are a few of the other name alternatives considered:
The symbol of a mortar and pestle was chosen because it connects the idea of food with medicine. As one of the oldest food-preparation instruments used in cultures from around the globe, it is also used by apotecharies to crush medicinal herbs. From a branding standpoint, it stands out nicely against the logos of competitors that usually highlight familiar cooking or eating utensils.
Design iterations and preference tests
“Here are two options of the landing page hero for a meal-planning app. Which one does a better job in conveying what the app is about and encouraging you to engage with the content?”
Here are two options of a carousel showing the content for a meal-planning app. Which one does a better job of encouraging you to explore?
Putting the product page together
For the final high-fidelity mock-up of the responsive product page, I went with the minimized-CTA approach and alternated the product feature layout with social proof layout before closing with a strong combination of a user testimonial and the hero animation.