Objective Food Lovers tries to take the food blog feeling and translate it into a contemporary format.
It’s a user-optimized cooking app with a high-quality design that focuses on the basics. This is where Food Lovers stands out from other, overloaded apps.
​
UX / UI Case Study
Designing a
Recipes App.
​
​
Steps of Work
Discover
Competitive Analysis
User Research
User Interviews
Define
User Personas
User Stories
User Flow Diagram
MVP (Minimum Viable Product)
Ideate
Sketching
Prototyping
Grid System
Low-/Mid-High-Fidelity Wireframes
Testing
Preference-
and Usability-Tests
Design
Brand Elements
UI-Elements
Final Design
Responsive Design
Mockups
Competitive
Analysis
​
​
The competitive analysis is part of the design thinking process. It helped me to validate my assumptions about the user's needs. It allowed me to incorporate positive and useful features into my own designs and avoid negative features and those that don’t work for users. I defined the main objectives of the competitors, their overall strategy, and their market advantage. Some applications I referred to were: Chefkoch, Kitchen Stories and Captain Cook.
Example Chefkoch:
Chefkoch offers dishes for every day and a lot of inspiration. The app offers around 330,000 recipes with ratings for every taste. Whether cooking or baking - users will find something for every occasion and every level of difficulty. Especially exotic and foreign recipes play a role, for example, a „bratwurst tart with mustard crust“ or a special curry from Thailand. Chefkoch stands out from the competition because of its extremely huge database and its abundance of inspiration and information.
​
Key Objectives
​
• a lot of inspiration
• a huge range of recipes (also exotic ones)
• for beginners and pros
• huge database
​
​
Overall Strategy
• Social media focused
(Reels and IGTV focused)
• Many followers - especially youtube
• High ratings on Apple Store
• Their iTunes rating is much higher
than their Google Play rating. This could
mean that the app has not been
optimized for it.
​
Market Advantage
• a huge community
• It seems it’s their abundance of recipes,
large database and video content that
sets them apart from others
• available across a huge range of devices
• interesting for beginners and pros
​
Marketing Profile
​
• big funding in the background
• they make use of their community to
market the app by adding and rating
• cooperation with TV stations, magazines,
and large food chains
​
SWOT Analysis
S
Strengths
Available across different devices
Abundance of recipes
Very inspiring
Huge community
Good funding
​
​
W
Weaknesses
No strong brand image
Weak and cluttered design
Information overload
Realistic pictures look unsavory
Disturbing, advertising
Confusing search options
Long loading times
​
O
Opportunities
Better user interface
Stronger brand design
Better search options/categories
Cleaner and less cluttered
Less advertising
More aesthetic images
​
​
T
Threats
More intuitive Apps
Specialized Apps
Cleaner and clearer Apps
Apps without or more appetizing ads
Apps with more lifestyle-character
​
UX Analysis
Usability
The Application is (in my opinion) not so easy to use when you search for something specific (and use only the categories). Also, there’s an information overload and the App is super slow.
Layout
The layout is relatively cluttered. The design is not very cohesive, and I doesn't show much of a brand.
Navigation structure
The main menu is located at the bottom and in this
way it is easy to navigate. lt uses relevant icons,
easy to identify. Just the search option is not
perfect in my opinion.
​
App Store Reviews
To complement the user interviews, I wanted to look through some of the App’s most critical App Store reviews in the past year. Many users noted that they were frustrated with all the advertising and complained about imperfect search options and long loading times.
​
Summary
Even though Chefkoch has a lot of advantages, there are still many things missing and the potential to improve especially when it comes to branding, design and structure.
​
User Research
I conducted user research to focus on understanding user behaviors, their needs, and wants. I have interviewed 5 users in person who have already recipe app experience. I chose this category of people to understand the pain points of other applications and their day-to-day challenges. After analyzing the data I got a good overview of problems and frustrations users face, what their basic requirements are and what wishful features, to be able to design a tailored solution. To find out what questions I could ask potential users, I answered the following for myself:
Whom am I designing for?
What kinds of tasks and goals will the audience be
accomplishing as they use my app?
When will the audience be engaging with the product?
Where will the audience use the app?
Why is the audience choosing to use what I
designed and what drives this behavior?
Hypothesis
In general, people are very interested in healthy and high-quality food, but are always short on time
and therefore discouraged by the research and meal prep time. They want customized recipes and ideas quickly, without detours and distractions, to help them to live better organized and save valuable time for other things. Long, complicated instructions are daunting. It has to be simple, structured, and
target-oriented. They use the app as a handy to-go cookbook for anywhere, anytime. They are
already used to a variety of apps, so the application has to be unique, personalized, and a high-quality
experience.
​
User Interviews
Here are my asked questions:
• How often and when do you search for
cooking inspiration?
• Is time an important factor while cooking?
Why / why not?
• Is environmental protection important in this?
Why / why not?
• What is more likely: that you look for inspiration
or that you search for something specific?
• Where do you search for cooking inspiration?
Why there?
• What would be your search key points?
• Do finances play a big role in your cooking
and grocery decision? Why?
​
• Are high-quality ingredients important for you?
Should they be local?
• Would you be interested in getting
your groceries delivered? Why/why not?
• Do brand-name articles play a role for you
when buying groceries? And why/not?
• What would describe your recipe and inspiration
preferences better: „less is more“ or „the more,
the better“? And why?
• Frustrations with any other cooking apps?
Insightful patterns that emerged from the answers
By conducting these interviews I compiled meaningful insights and described the significance and
how it might impact my app. I found interesting details, patterns, or comments that I wanted to keep
in mind in my later design.
3/3 were looking for specific things - for example, what to do with a certain ingredient.
3/3 Inspiration is good, but not too much. Less is more.
3/3 Healthy cooking was important
3/3 No one was interested in a delivery option for groceries
3/3 Environment and regional products are important to all of them
3/3 Branded products play a role, but they should not be mentioned in the recipes.
This was regarded rather untrustworthy.
3/3 No one really liked cooking in the kitchen with a mobile phone.
Rather good print versions or a read-out function.
3/3 Were always short on time.
Mentioned frustrations
• too much swiping or zooming to be able to read accurately (The legibility needs to be better)
• too complicated search options
• crashes, apps are slow
​
User Personas
I set the three User Personas based on the research I found in the discovery period of the project. They are a good representation of my target group and designing for them helped in making informed design decisions as I had the end-user always in mind.
​
Based on the results of my research, the personas were a photographer, It-specialist, and a mother working part-time.
​
The main characters to whom I am creating the recipe app could be described as:
​
1. Health-conscious - People who pay attention to healthy food and search for high-quality recipes.
2. Timesavers - people who are very busy and who use the app to help them to live better organized
and to search for what they want without detours.​
3. Demanding design enthusiasts - App experienced fans of good-looking, modern solutions,
who prefer quality to quantity.
​
After discovering these values in our customers, I realized that to create a successful recipe
app my design had to be:
​
clean and modern,
emotionally engaging,
easy to use,
innovative.
Gathering
Requirements
Before moving on to the further design process, I gathered all my findings from the discovery phase that would help me identify
requirements, needs, and goals for my design. With that in hand
I wrote 6 user stories.
From the most important user story, which includes just the essential feature of my app design, I defined the Minimum viable Product (MVP) and the MVP objective. After that, I defined iterations out of the two most important user stories.
MVP Objective
An app that is helping health-conscious people finding high-quality recipes easily and quickly to improve their cooking experience.
The objective of the MVP is to full fill the user's basic needs. It focuses on high-quality recipes in a structured and well-designed app environment and supports features to facilitate their cooking experience.
User Stories
01 As a health-aware person, I want an app
that is providing me with proven high-quality
recipes to stay healthy and fit. (Need)
02 As a person who is often times very busy,
I want search options, that help me find
recipes that I can prepare quickly so that
I don’t waste time unnecessarily. (Want)
03 As a health-aware user I think it’s important
to cook seasonal and fresh dishes, so I want
suggestions to help me find local shops and
markets in order to cook with fresh
ingredients and to support local businesses.
(Want)
Requirements:
• recipes with health and fitness factors and
good, fresh ingredients
• search function based on the option „fast“
• cooking times visible in the search results
and within the recipes
• feature that shows local shops and markets
in the vicinity
• directions, maps and time
User Flow Diagram
​
I created 6 single user flows based on the user stories and put them together into one single diagram:
Usability Test
For testing my application the first time on real users, I build a simple
sketched prototype in InVision. The goal of this test was to assess if my first version of the app is user-friendly and the navigation structure clear. While observing their interaction on Skype I saw if users were able to perform the main objectives, based on the tasks from my MVP without difficulties.
Objective: Users had to search for a recipe based on the search option „quickly“, put it to a shopping list and from there search for shops to be prepared for grocery shopping in the vicinity.
Link to prototype:
Testing Results
​
Issue
All users headed to „Quick“ in the main categories instead of using the search field as
an option and adding „Quick“ with an extra filter later on.
​
The user got the categories wrong at the beginning, thinking that he could combine the fields and topics with each other. Which is not the case.
​
All users were confused in the beginning to find
the shopping list under the category „Cookbook“.
​
​
​
​
​
Solution
I think this is a problem now, but mostly depending on the very low fidelity of the wireframes. The categories look more concise in my drawings - so users tented to take this way (which is not a wrong one).
I think it’s the same as the last issue and depending on the very low fidelity of the wireframes. As soon as it would be higher fidelity, the problem would be solved.
​
I was assuming that but decided on that option because no single app solves this problem well. After figuring that out, every user found that a very good idea and asked me to keep it that way. I think it has to be tested later on more users. At the moment it’s a little risky but also an opportunity to stand out from other Apps.
User Interface Design
For my design, it was clear, that my recipe app should appeal to the emotional and aesthetic
side of user perception. It must captivate the user from the first seconds. A reduced and light layout focuses on intuitive navigation and high readability. Eye-catching, high-quality photos attract maximum attention.
Logo
Wireframing
Wireframes serve as fidelity steps between the first pen-and-paper sketches and the final design. They help me to plan the layout and interaction patterns of your users without details. The user's task should be clear without needing color.
Low Fidelity
Mid Fidelity
High Fidelity
Preference
Test
With my two first Home-screen layouts in hand, I conducted a preference test using UsabilityHub. With the help of potential users, I evaluated which design would be more successful. Afterward, I had a clear winner, and I was good to go and able to refine my work.
01
02
Please choose between two different ways of
presenting 3 daily recipes on my home screen
(01 „swipe down to see the next one“ or 02 „carousel“)
28 total participants
Some comments:
„ It is teasing that there are more images on
either the side makes me want to check them“
„I like just being able to see 1 dish at a time“
„I think it looks cleaner. It embraces the white
space, giving it a more modern look and feel“
„First of all, this is some of the nicest work I have seen so far! Second, even though I love this big image on the first screen this one is a bit more intuitive as it is clear that there is more to see.
Many people won‘t read, so a visual is key :-)“
​
„purely intuitive“
My recipe app is aimed at a very heterogeneous target group and at users with different levels of technical knowledge. The user interface must therefore be very intuitive and easy to use so that everyone can interact according to their personal preferences.
Final Design
Fluid Grid
System
To make sure that my layout will display optimally across all screen sizes I worked with a 12-column fluid grid system that is defined using percentages to ensure that all elements will scale proportionally and will remain in the same order on different screen sizes.
iPhone
Tablet
Desktop