Recipe Jar

01_ Introduction


This is a UI design project where I explored a variety of possible visual designs and screens, and ways to incorporate the idea of gamification into a recipe mobile application.


Fastfood negatively affect our overall health. They are convenient - quick to grab and delicious. However, they are usually high in fat, calories, cholesterol, sodium, and a lot of bad things that we may not be aware of - compared to homemade meals.

So why do people still grab fast food? Just because it's convenient and delicious?

Many people perceive cooking as a burdensome or a difficult work to do.

Is there a way we could possibly change that perception and help them to enjoy cooking?
How can we encourage millenials to have home cooked meals more often?

my solution

Recipe Jar is a start up company that specializes in sharing easy recipes with illustrations for those who are not familiar with cooking or do not find cooking fun. Recipe Jar wishes to change the way millenials and young professionals perceive and think about cooking.

Everyone loves games.
Everyone seeks out some kind of entertainment to relieve stress or simply have fun.
So I thought, what if cooking can be fun like playing a game? Why not combine games and daily activities together?


  • User Interface design

02_ features

To generate the list of recipes, add the ingredients you have.

Add any items that you want to avoid and filter.

Browse recipes that are easy to cook, delicious, and healthy.

Voice recognition built in for comfort.

03_ Process

  • mobile game

'Chefwars' is a mobile game that has over 100,000 users. It allows you to create dishes, serve food, and invent new dishes. Many users spend a lot of hours on cooking dishes in this game.

So how is cooking different in real life vs in games?
Many people do not like cooking in real life, thinking that it's difficult and burdensome. Could we change their expectation and perception by providing them a gamified service?

  • wikihow

wikiHow is a website that has over 190,000 how-to articles and 1.6 million registered users.

Why do many people use it and find it useful?

This website shows illustrations about how to complete a specific task, create crafts, grow houseplants, prepare for interviews, and fix tools - anything that you can imagine of.

Advantage of illustrations

Instead of providing long descriptions and information, WikiHow service helps users to fulfill their needs with illustrations that are clear to understand and follow.

Illustrations make difficult tasks less complicated and encouraging.

  • wireframing

I went through 5 iterations and I used a design thinking approach for all of the iterations.
I explored different ways to implement the recipe feature (the way recipes are generated from the available ingredients).

04_ Screens

  • a variety of possible logo and interface designs