Skip to main content

Cooking App
Case Study

It all starts with a concept

The assignment given to us was to design a cooking app based on the cooking book we designed. The challenging part was to figure out how many functions of the app would be freely available before the user would be asked to log in. 

Concept design

A tailor-designed experience

You can enter the app without having to log in right away. This is done on purpose as most people won´t look at the app if they have to log in first. So I designed an experience where the user gets hooked first, before having to commit.

  • log in screen

  • 3 reasons how the app benefits the user

  • clear overview of recipes

  • clear lay-out recipe explanation

Design line

Value

The target group of the app is students, and as it is well known, students often live on a budget. So the design behind this app is budget-based. Bright colors and bold fonts, but more importantly I wanted to show the value of the app right away.

So the app start off with providing the user with 3 reasons why this app is beneficial for the user. Students are not known to cook long recipes, so reason nr 1 is that the recipes involved are made within an hour. Reason nr 2 is that the recipes are simple to make, and the last and maybe most important reason for students, the recipes involved are cheap to make.

Logo

A colorful food app with a modern design

A very specific color palette was chosen for this app. Not only do the colors make the app look fresh, but each color was also handpicked to create a feeling within the user that will benefit the app. Orange and yellow give the user a happy feeling, while red is the call-to-action color, demanding attention. The pictures used throughout the app follow a design trend appealing to the young students.

Font
ForkIt app

A crash course in Adobe Xd

Features:

  • Responsive website

  • Auto-animate interactions

  • Design library

  • Active states

App Design

Tools I have used

InDesign

I have used InDesign to collect all information and turn it into beautiful lay-outs. Here I visualized my brand and displayed It.

PhotoShop

PhotoShop has been used to make mockups after the products were made to create a real life scenario of how the products would look like or could be used.

Adobe Xd

I have used Adobe Xd to design and illustrate my app, and furthermore to design my website before I translated it into HTML & CSS

Tools