WhatMeal App

UI / UX & app design

This features the old version of the website
Back to Home Page

WhatMeal App

Rethinking the recipe app model

KEY CHALLENGE
Design a product that helps users finding meal ideas in more efficient way
MY ROLE
I was the only designer responsible for the UX/UI
TOOLS
Adobe XD, Photoshop
PROJECT BACKGROUND
"What can I cook with this?". I'm sure we've all asked ourselves that question. The reasons are different, but the action is the same.
Research showed that the food apps available on the market don't respond to this need in an efficient way. I tried to design a product, which offers personalized and highly specific meal recommendations. This would allow users to save the time they now sacrifice for browsing recipes that don't match their needs.
Competitive Analysis

I'm hungry and I'm in a hurry. To make it worse I have only 4-5 fresh products in the fridge. How would I search for the recipe containing ONLY these ingredients?

Almost all popular food recipe apps present the category-based search. While this is a good solution for users looking for inspirations, it doesn't respond to the problem mentioned above. To solve this problem you'd have to manually write those 4-5 ingredients in a search box, which is certainly unintuitive.

I've searched the ingredients and I got the results with recipes containing way more ingredients. I could quickly buy one or two. Can I specify this to save me the time?

Exiting apps don't have the option of specifying how many other products users can add/is willing to buy. Recipes aren't specific enough as they often require many additional ingredients. Users spend too much time browsing recipes they can't even prepare at the time they need to.

KEY TAKEAWAY
None of the apps provide the feature guiding the user to check currently available products, type them and receive meal recommendations based on this list.
Survey Research

The data gathered from 20 participants gave me a great insight into the problems and expectations and helped with identifying the most crucial pain points of existing apps. The research led to creation of 2 user personas.

- Over 70% find meal planning problematic
- 60% check food recipes at least 2 times a month
- 40% are frustrated if meal preparation lasts over an hour

KEY TAKEAWAY
Existing apps don't satisfy the users who want to get quick and matching meal recommendations without having to buy additional products.
Business Potential

According to the research, many people are willing to use recipe app for quick and ready meal recommendations.

These people are the target audience, which is bypassed by many current apps on the market. They don't have time for difficulties in finding their desired functionality. They also don't want to browse through unmatching recipes that require some additional work or groceries. This is a hole in the market that a product like WhatMeal App could fill.

Wireframing
KEY TAKEAWAY
To satisfy the needs of defined user personas, the app has to offer meal recommendations as well as the traditional search. They should be treated as equally important.
Main Flow Visual Design

Start The Journey

Apart from the traditional account creation, WhatMeal would collect the important info regarding food preferences such as diet, intolerances etc.

Food Preferences Selection

Many of us have some sort of food intolerance. It would make sense if we could define upfront which ingredients we would like to avoid. The app would respect this information until we choose otherwise.

Choose Your Products

This is the main screen for product selection. Users can choose the products in many different ways (using traditional search, categories, dragging images, scanning barcode or even by photo analysis of their kitchen).

Choose Your Products

All products belong to one of the food categories and are sorted by their popularity within each category. Users can easily switch between categories without jumping from one screen to another.

Food Preferences

The app algorithm would exclude the recipes containing deselected products. In case of any changes user is allowed to change it here or disable such modal in the future and change those settings in the profile section.

Recommendations

Search results appear from the most matched results. Here, the avocado pasta recipe has 88% accuracy with products chosen by the user.

Recipe Page

This page contains various useful info to help users decide whether they would like to cook this particular meal or not. These include accuracy matching, ratings, difficulty level, time to prepare, list of ingredients and detailed recipe description. At this point users can quickly judge if the recipe is suitable for their needs.

Other Sections - Visual Design

Recipe Inspirations

This page allows users to manually browse through many recipes. Top categories bar and filters enable very specific, multi-level searching. The solution directly responds to all Emilys out there!

Recipe Inspirations

As we consume also with our eyes, this design ensures that users have plenty of food photos to look at. Social aspects of the app get users involved in the process.

Save For Future

WhatMeal enables to like and save your favourite recipes for quick future reference. Top bar enables to narrow the search for active users who have bookmarked many recipes before.

Ranks

Users can get involved in the cooking community by voting on the best meals in their respective ranks and taking part in cooking contests.

Ranks

Users can get involved in the cooking community by voting on the best meals in their respective ranks and taking part in cooking contests.

SUMMARY
The design process of WhatMeal App has taught me a lot. The vague idea of an app providing users with meal recommendations has evolved into a specific solution after many hours of sketching, researching and validating the ideas. Information gathered from user research were essential to identify the core structure and main functionalities of the app.
do you need a designer?

Let's get in touch!

Email me at celinskiben@gmail.com