top of page
Next Kopie.png
hoch.png
FoodApp_04_02.jpg

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

ScopeofWork Kopie.jpg

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.

​

UserPersona_01 Kopie_small.jpg

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:

User Flow_red_01.jpeg

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.

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. 

Colours_03 Kopie.jpg

Logo

Bildschirmfoto 2021-09-08 um 17.01.25.png
Bildschirmfoto 2021-09-08 um 17.09.38.png
Bildschirmfoto 2021-09-08 um 17.01.14.png

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.

Fideliy_01 Kopie.jpg

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. 

Unbenannt-5.jpg

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

FoodApp_03_small.jpg
FoodApp_01_small.jpg
FoodApp_03_0_medium.jpg

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

Bildschirmfoto 2021-09-08 um 16.44.27.png
FoodApp_04_02.jpg

Responsive Design

Website_06.jpg

UI Case Study

FINDLY
CLASSIFIEDS APP

bottom of page