jason-briscoe-n4ymhyyFY7A-unsplash 2.jpg

Design kitchen

UI Design

UI Designer  |  7 weeks (2020)  |  iOS

Design kitchen is a recipe application that is designed to simplify cooking routine for people who prefer eating at home. Its simple and clean UI creates a seamless experience for everyone who doesn't know what to make for a dinner.

Tools: Figma, Sketch, InVision

brooke-lark-gWM8XSSefrw-unsplash.jpg
jeff-sheldon-6MT4_Ut8a3Y-unsplash.jpg
Home W.png

Discover

Sharing the passion.

Being an avid cook, I wanted to share that passion with others by creating a beautiful app where people could find inspiration, learn more about cooking and explore new recipes and cuisines. I believe that eating at home helps people unite, brings them closer to each other and helps share their warmth nurturing meaningful connections.

jason-briscoe-7MAjXGUmaPw-unsplash.jpg

Setting objectives.

For this project, I wanted to develop a useful tool for people who love to cook and need help and inspiration during this process. Sometimes cooking can be difficult, especially for those who are just starting their gourmet journey so I decided that my recipe app needs to have features that support new cooks such as a step-by-step mode, option to save recipes in different folders, video recipes, option to add ingredients to a shopping list, etc. I also wanted to create clean UI that would guide and support people, so they can easily cook using the app.

jimmy-dean-my1mDMraGf0-unsplash.jpg

Brand

Creating a visual identity.

When thinking about what emotions and feelings I wanted the app to evoke in the user, I thought of specific words like light, sweet, warm, tasty, inspiring, juicy and fresh. With these words in mind, I created a mood board to guide me through the design process.

Mood2.jpg

Seeking inspiration.

Then, I did a competitor analysis to understand existing cooking applications, the features they offer and the overall usability of it. I analyzed what was missing and what could be improved to increase the user experience. I also used their UI design as inspiration for my application.

UI Inspiration.jpg

Colours.

For the next step, I chose the colours for the app. I went with a vibrant pink for the primary colour and a fresh green for CTA. I think these colours elicited the mood I wanted to evoke. By combining them with white, I developed both a clean and juicy look in the UI.

Colours3.jpg

Typography.

For the primary typeface I decided to use SF Pro Text for a few reasons:

  • It is a standard iOS typeface that is recommended by Apple Human Interface Guidelines;

  • It is optimized for iOS devices and looks familiar to the users;

  • It creates a modern minimalist look.

Text DK.jpg

Branding.

Creating a logo was one of the most exciting parts of the branding process. That is why I took the time to craft multiple versions. In my vision, the app's name needed to evoke feelings of home with beautiful cooking space, clean and inspiring. It is not only about food but also about a delightful kitchen that can foster creativity in cooking.

Logo and Wordmark2.jpg

Creating a UI library.

I then translated the branding into the visual design of the app's interface and created a UI library with all the components, fonts and colours used in it.

Components DK.jpg

Implement

Final UI.

As a result of all the work, I created a high fidelity mockups that have a clean and juicy vibe.

Splash W.png
Log In W.png
Home W.png

Reflect

Future thinking.

There are plenty of features I would like to develop further when I have more time. For example, I want to create a cooking community by adding an option to post recipes so that all people could share their favourite meals with others. Adding an option to comment would also help people see where potential pain points are in the recipe. The application already has labels such as gluten free, vegan, vegetarian, lactose free, etc. and I want to develop it more by showing all the possible allergens right away, so the user doesn't waste their time. Eventually, I would develop a paid subscription with additional features for pro users.

food-packaging-mockup-scene@2x.jpeg