04 – COOKLIST

Creating an iOS app that shows you the recipes based on what you have in the pantry

04 – COOKLIST

Creating an iOS app that shows you the recipes based on what you have in the pantry

04 – COOKLIST

Creating an iOS app that shows you the recipes based on what you have in the pantry

Cooklist is an iOS meal planning app that suggests the meals you can cook with the ingredients you have in the pantry.

Cooklist is an iOS meal planning app that suggests the meals you can cook with the ingredients you have in the pantry.

Cooklist is an iOS meal planning app that suggests the meals you can cook with the ingredients you have in the pantry.
Cooklist is an iOS meal planning app that suggests the meals you can cook with the ingredients you have in the pantry.
Cooklist is an iOS meal planning app that suggests the meals you can cook with the ingredients you have in the pantry.
Artboard Copy2

Design proposal for Cooklist, 2017

Design proposal for Cooklist, 2017

Design proposal for Cooklist, 2017

Design proposal for Cooklist, 2017

Design proposal for Cooklist, 2017

Framing the problem

Disclaimer: I had 4 working days to create the design proposal, and the icons used are from the Flaticon website.

This project was created as a part of the design proposal for the Cooklist iOS application.  The project included creating the design for four screens (Recipe feed, Recipe detail, Pantry, and Product detail) with a brief explanation of what each should contain.

Being a meal planning app with the goal of making healthier food choices I wanted to keep the focus on recipes, not the design itself. To that extent, I created a color palette with shades of grey and a shade of green for the accent color. Furthermore, San Francisco was used as the main font.

The client provided the images that were supposed to be used and a couple of wireframes to give an idea of what they would like.

Framing the problem

The problem with the former website was an outdated and non-responsive design. Before the project kickoff, the client conducted small-scale research where they found that the target audience perceives the website as “cold” and “hard to navigate”.

My role was to redesign the website from the ground up, in a collaboration with the stakeholders and developers at Enterwell.

With the new website, the goal was to make the user feel like the Hrabri telephone's website is a safe space where they can ask for help, learn how to deal with different situations and emotions.

Due to the client's budget constraints, no further research was conducted, and instead, I relied on best practices for great user experience and desk research. 

Framing the problem

The problem with the former website was an outdated and non-responsive design. Before the project kickoff, the client conducted small-scale research where they found that the target audience perceives the website as “cold” and “hard to navigate”.

My role was to redesign the website from the ground up, in a collaboration with the stakeholders and developers at Enterwell.

With the new website, the goal was to make the user feel like the Hrabri telephone's website is a safe space where they can ask for help, learn how to deal with different situations and emotions.

Due to the client's budget constraints, no further research was conducted, and instead, I relied on best practices for great user experience and desk research. 

Cooklist - Design brief

Wireframes provided by the client as a reference to what they like.

Old Hrabri telefon website

Old Hrabri telefon website

Old Hrabri telefon website

Recipe feed page

In the recipe feed, all available recipes based on what you have in the pantry are displayed. But having a lot of choices can sometimes become a burden rather than a blessing so I created a “Ideas” section to help quickly filter the meals by their type.

Cooklist - Recipe feed screen

Recipe feed screens

An example post with Alegreya Sans and Alegreya Sans SC fonts used for this project

An example post with Alegreya Sans and Alegreya Sans SC fonts used for this project

Pantry screen

A pantry is a place where all your added products are displayed. I created a simple yet effective list design with the option to swipe to quickly add the current product to the shopping list or to remove it from the pantry. Additionally, new products can be added by selecting the plus icon in the upper-right corner.

Cooklist - Pantry and Add new product screens

Pantry screen (left) and Add new product screens (right)

"How do you feel today" questionnaire 

"How do you feel today" questionnaire 

Recipe and the Product detail screens

On the Recipe detail, page details such as nutritional facts, cook time, and ingredients needed are listed. If there is a missing ingredient the user can quickly add it to the shopping cart.

Many people have some kind of dietary restrictions, so on the Product detail page, they can see the ingredient list, if the product is vegan and such. Additionally, You might like the section suggests recipes with the current product.

Cooklist - Recipe and product detail screens

Recipe (left) and Product details (right) screens

Recipe (left) and Product details (right) screens

Video of children web page showing various animations I created

Video of children web page showing various animations I created

Final design

Although the design proposal was rejected I find this project valuable because I have learned about creating an MVP, and about design principles for the iOS platform.

Check out the final prototype below:
Alternatively, click here to start. 

© 2020 Denis Maček

© 2020 Denis Maček

© 2020 Denis Maček