The Problem
Since the pandemic, home cooking has become a lot more popular, partly due to necessity, but also because many people have finally had the time to discover and hone their love of cooking.
Similarly, the number of people who are seeking to update their diet to be mostly plant-based is increasing. Many people however struggle to find recipes that meet their own needs and personal dietary restrictions.
The Solution
Carrotivity is a responsive web app that aims to help users find plant-based recipes that meet their requirements by offering a broad range of recipes that can be filtered by various criteria.

Time: 8 weeks 
Role: UX/UI Designer 
Tools: Adobe XD, Figma
Competitor Analysis
In order to understand key objectives, strategy, marketing profile and usability of similar products, I analyzed two competitor products, Forks Over Knives and Whisk.
Forks Over Knives
💪 Strengths
- Unique brand with clear vision
- Multimedia and multi-platform approach
- Lots of great reviews, has won awards
- Well-known from documentary and large social media presence

👎 Weaknesses
- Not amongst top search results for “vegan recipes”
- Recipes do not include serving sizes or nutritional information
- Recipes not available in metric measurements
- Web app does not include shopping list feature

☠️ Threats
- Other web apps that offer vegan recipes and resources about a plant-based lifestyle, such as Veganuary
- Growing popularity of vegan food in general: vegan recipes in many regular food apps
- Free resources on b logs, Pinterest, YouTube or Instagram
💪 Strengths
- Unique product that fills a specific niche
- Appeals to both consumers and businesses on multiple levels
- Clean UI, simple and easy to use
- Smart AI that is unique to the brand

👎 Weaknesses
- No recipes are included in the product, users must have external sources
- Some of the features tend to be buggy
- Ads are perceived as very distracting
- Social-media style dashboard is considered unnecessary and annoying

☠️ Threats
- Competitor apps that provide similar features, such as Yummly
- All-in-one meal planning and food delivery services such as Hello Fresh or Blue Apron
User Research
I conducted a series of one-on-one user interviews in order to Identify users’ main goals and pain points in regards to recipe apps and websites.
Users are looking for a simple recipe app that allows them to easily search for recipes and save those that appeal to them to a list of favorites or a weekly meal plan.
Users want to find recipes that meet their nutritional needs, are healthy and plant-based.
Users want to be able to search by ingredient as well as by name or category.
Users are interested in being able to directly export ingredients from a recipe into a dynamic and editable shopping list.
1. How often and in what context do you like to cook at home? Do you enjoy it?
2. Do you have any food intolerances or dietary preferences? How does that affect or limit your cooking behavior?
3. While planning what to cook, where do you usually look for inspiration? Do you like to follow recipes step by step or do you use them as inspiration?
4. What are some frustrations you have encountered when planning, shopping for and preparing meals? What do you wish was easier?
5. Do you usually grocery shop with specific meals in mind or do you just see what is available at the store?
6. Have you ever used any recipe apps or shopping list apps? What features did they include?
7. What is a feature that you would be likely to use if it was included in a recipe and meal planning app?
🤌 Needs
- Search by exclusion and search by ingredient functionalities
- Simple and easy-to-prepare recipes (filter by amount of ingredients/prep time)
- Low carbon-footprint recipes and help in meal planning to reduce waste
- Recommendations for substitutions when an ingredient is not available (or for an allergen)
- Shopping list feature

😞 Pain Points
- Not being able to find required specialty ingredients
- Recipes are too complex and take too long to prepare
- Having to scroll through blog posts to reach the instructions of a recipe
- Not knowing how to scale down a recipe for fewer people

Gathering Requirements
In the next step, I began to narrow down goals, devices and target audience of this product.
WHO is the user?
Adults of any age who primarily consume a plant-based diet and are seeking help finding recipes that meet their specific needs
Major GOALS and tasks
- Search for recipes with specific filters
- Save recipes to favorites
- Edit recipes
- Create and edit shopping lists
- Get recipe recommendations
WHAT will the product do?
- Large database of vegan recipes: filter according to different criteria 
- Allow users to create a profile and save recipes
- Learn from a user’s preferences
- Extract ingredients and add them to an editable shopping list
For the MVP, I needed to distill all my ideas down to the bare minimum for a functioning product. I did so by first formulating all possible user stories, then stripping them down to the most important and defining the required features for the MVP.
Allow users to search for plant-based recipes according to their personal current requirements and available ingredients, as well as to create a shopping list for their choice of recipes.
More people nowadays are trying to eat a mostly plant-based diet. They still have busy lives and need help finding recipes that work for them. Therefore, users are looking for a product that will help them find healthy, vegan recipes according to their current needs and available ingredients. Users want to be able to save and edit recipes to a personal page and then create a shopping list based on their selected recipes.
User flow diagram
In order to have a clear picture of how users will navigate through the app, I sketched out user flows for each of the user stories in the MVP, then connected all flows into a comprehensive user flow diagram.
Crazy Eights sketching
To begin the brainstorming process, I started by getting all my ideas on paper, as demonstrated in these two example pages from my “crazy 8s” sketching session.
Paper Prototype
I then evaluated all my sketches and used a dot-voting system to choose my favorites for each flow. These are the final sketches that I then linked up as a preliminary prototype using InVision.
Digital Wireframes
In the next step, I started to transfer my sketches to the digital realm, building my first set of digital wireframes in Adobe XD and making small changes along the way. I then linked these up to a prototype in XD as well.

Some adaptations that I made in this iteration:
- Navigation bar moved to the bottom for better usability
- Added profile page to allow users to personalize
- Search bar at the top, filter cards below
Usability Testing
In order to identify and solve design issues, I began to test by testing the first iteration of mid-fidelity wireframes by asking users to complete a series of tasks on my adobe XD prototype while I observed their behavior and asked them to describe what was different from what they had expected.
The goal of this usability test is to uncover usability issues that first-time users might encounter when interacting with my responsive recipe web app. Specifically, I want to understand if my layout is clear, understandable and easy to navigate.
1. Create new account
2. Log in to existing account
3. Use search function and apply filters
4. Navigate to favorites page
5. Add recipe to favorites
6. Add recipe to shopping list
7. Add and remove items from shopping list
🚩 Issue 
- Account required to even place a search
- Filters section confusing/ misleading
- Search results expected to appear below search bar, not on a new page
- Home button not clearly labeled
- “Keep browsing button” in overlay mislabeled
✔️ Solution
- Only require users to create an account or log in once they desire to save a recipe
- Clearly label each filter and add “apply filter” button to each filter
- Integrate results below search bar and filters sections of Browse page
- Add clearly labeled home button to navigation bar
- Rename this button “go back” or “exit”
- Option to browse recipes without signing up
- Logo in Navigation Bar labeled “Back to Home”
- Filter section updated to be more comprehensive
- Results integrated below search button
- Back button relabeled
Finding Inspiration
In order to narrow down a visual direction for my designs, I began searching for inspiration for color, typography, illustrations, imagery, iconography and wording. I created two separate moodboards with different visions and ended up choosing the following one as it is clean and simple and keeps the imagery and content as the main focus.
Style Guide
After determining the visual direction of the product, it was time make decisions about all visual elements of the design such as defining a color palette, the typographic styles, UI elements and iconography.
The logo is composed of four separate vector shapes and three small dashes to make up the carrot.
I then placed it on the accent color orange background and made the outline white.
Input Fields
Button States
Responsive Design
As this is a responsive web application, it should be functional and beautiful on all screen sizes. Going by the “mobile first” principle, I started by designing all my mobile screens, then gradually increasing screen width to determine breakpoints. In total, I designed for four different screen sizes, using a responsive layout grid as a basis.
Design Feedback
As the penultimate step in my design process, I sent my size M flow to several of my peers and asked for detailed feedback to determine what could still be improved. Following is a distilled version of the results of this feedback session.
In order to demonstrate the development of my designs throughout the iterative process, here are two example screens throughout the different design stages.
Final Screens

You may also like

Back to Top