Okit
Okit is a mobile application that recommends healthy recipes and provides customized meal kits by analyzing the personal profiles of users and tracking their daily intakes.
​
​
Project: Self-initiated
About: UIUX design / Branding / Interaction design
Timeline: Fall 2020 (1 month)
Tools Used: Figma, Miro, PhotoShop, Illustrator
​
Background
Nowadays, people seek more convenience in their lives. Under heavy workload, irregular work schedules, and unhealthy diets, their quality of life is getting worse. Besides, some people choose extreme diets to lose weight, which is harmful and unsustainable. In order to help people adopt healthier diets while saving time, meal kits containing all the ingredients, seasonings, and easy-to-follow recipes are introduced to the market.
Objective
To design a mobile app that helps people keep track of ingredients, calories, and vitamin intake, and provides them with healthy customized recipes and meal kits.
Design Brief
To optimize traditional meal-kit services and improve the customer experience, I designed the process to cover everything from the ordering to the receiving of the kit. In addition to providing detailed recipes, Okit delivers customized meal kits. Based on data related to the user's body weight, age, food preferences, and goals. Okit will calculate the calories and vitamins he or she needs every day, and find the best match. Okit will also adjust the ingredients and nutrition in meals in accordance with health needs, food preferences, and daily intake requirements.
Target Customers
My target customers are college students and white-collar workers. Most of them are not skilled at cooking, and have unhealthy diets and irregular work schedules due to their heavy workloads. However, they do acknowledge that they need to pay more attention to their health, and are therefore actively seeking solutions in terms of nutritious recipes that enable health management.
I conducted the research on 10 people. 60% of them are white-collar workers and 40% of them are students.
Research
Meal kits are becoming more and more popular. For example, Amazon has launched the Amazon meal kit, which provides all the ingredients and seasonings for a meal. The advantage of their service is that it offers fresh and prepared ingredients and same-day delivery; its disadvantage is that the choice of dishes is somewhat limited.
I designed a 5-minute survey to collect data about people's diets. Its results show that most people have not tried meal kits before, and that they manage their health by buying and cooking fresh ingredients.
Ideation
These sketches show my ideas for Okit, with the focus on interactivity and intuitive visual presentation. Users can slide the numbers and pointers on the clock and can also slide to the right to tick off the checklist with their fingers. The user experience is enhanced by interaction. I decided to use the figure of a person to show the intake of calories and vitamins; the dark part of it becomes bright once the user has finished the meal.
​
Users can see their intakes directly this way and manage themselves. The recipe part includes both videos and texts; the users can check the cooking steps in the videos by sliding to the left, while the steps are highlighted to the right following the videos. This is an efficient way to communicate the preparation of a recipe.
Information Architecture
Here is the complete process. Okit provides healthy meal plans. corresponding recipes, and meal kits, and allows users to choose whether they want to subscribe to the kits or not. First, users are signing up to fill out their profile and their personal eating habits. When they start to view the meal recommendation list. they both will know their intakes of calories and vitamins for the day.
​
The users then need to fill in how many people will share the meal and the time available for preparing it. Once Okit has this information, it will generate a customized meal list for every user based on his or her physical condition, nutritional status, and eating habits. After the list has been developed. the user will be able to choose the meal, view the recipe, and place the order. For users who do not intend to order the meal kit. Okit provides checklists that allow them to see whether they have all the ingredients listed for the meal.
For business purposes, short ads are placed on the checklist page to guide this group of users in ordering meal kits which include all fresh ingredients. After users have finished their meals, they can rate them and the Okit app to help Okit improve its services. In the final step, users can view the subscription-plan information. and subscribe for more benefits.
UI / Icon Design
Logo Font
Font Baloo Tamma 2
Weight Regular
Size 200 pt
​
App Font
Font Roboto
Weight Bold, Regular, Thin
Size 18, 16, 14, 13, 12, 9 pt
​
Wireframe
Here is the complete process. Okit provides healthy meal plans, corresponding recipes, and meal kits, and allows users to choose whether they want to subscribe to the kits or not. First, users are signing up to fill out their profile and their personal eating habits. When they start to view the meal recommendation list, they both will know their intakes of calories and vitamins for the day.
​
Users that are only interested in learning recipes can directly go to the recipe page after checking the ingredients inventory. Other users who have missing ingredients can go to the order page and buy a meal kit that contains all the ingredients they need.
Prototype
You may also like
