Skill-it is a concept design exploring a full service recipe app combined with progressive cooking lessons.
LEARN
Beginner lessons
to advanced skills to level up your abilities in the kitchen
COOK
Recipes from all over the world with easy to follow step-by-step instructions for home chefs
PLAN
Add recipes to a weekly calendar & ingredients to a handy grocery list for quick cooking prep
UI/UX DESIGN FOR MOBILE
USER RESEARCH
Research participants were asked about personal habits in using recipe websites, needs in their cooking routines, and what turns them off a website.
​
Common Comments
-
Dietary needs and nutrition are important.
-
Recipe websites are most often used to look up how to cook something new.
-
Most want to cook more than they currently do, but need some help.
-
Desire to personalize searches for diet, number of servings, or difficulty level.
Common Frustrations
-
When recipes are hard to find
-
When recipes too long or complicated
-
Unclear navigation
“It’d be great if you had new chef recipes and then recipes for when you want to show-off.”
“I’m always looking online trying to quickly find meat temperatures or measurement conversions at the last minute”
USER PERSONA 01
Maria, 34
High School Teacher
“I want to make sure my son grows up eating, and seeing his parents eating, a balanced, healthy diet.”
A mom to a rambunctous toddler, Maria is looking to feed her growing family healthy meals. She cooks at least once everyday for her family of three and seeks help finding new meal ideas and meal planning to fit her busy life.
USER PERSONA 02
Ashley, 45
Copywriter
“I’ve got to be able to quickly convert a recipe from 2 to 4 or however much I need.”
Ashley switchs off cooking duties with her partner throughout the week and loves trying new dishes and ingredients. An active lifestyle and busy schedule keep her on the go. Even working with a small budget, she looks for inspiration to keep the food she eats interesting and exciting.
USER PERSONA 03
Chuck, 23
Quality Assurance Engineer
“It’d be great if there were super simple recipes and recipes for when you want to try and show-off.”
Chuck lives alone with his dog, Bruce, and cooks simple meals for himself regularly, but also enjoys cooking potluck meals for his friends and family. He is interested in learning more cooking techniques, but doesn’t want to spend lots of time searching for recipes or meal planning.
WIREFRAME FLOW
KEY FEATURES
Find Recipes
Meal Planning
Grocery List
Cooking Lessons
HOME
EXPLORE RECIPES
GROCERY LIST
COOKING SKILLS
SKILL LESSON
ACHIEVEMENTS
MEAL PLANNING
USER TESTING
Objectives
-
How confident are users in their ability to use the product?
-
How much time does navigation take?
-
How many errors do users make while navigating the product?
Goal
This testing is to assess the navigability of the site and understanding of the product by observing users finding and saving recipes, accessing lessons and logging progress, and adding recipes to the meal planner.
Tasks
-
Search for a recipe and save the recipe for future use.
-
Find a lesson and log a made recipe.
-
Make a meal plan and add ingredients to the grocery list.
Observations
-
Most users utilized the search bar and had no trouble navigating.
-
The task of finding a lesson took participants longer to complete and logging a recipe wasn’t understood clearly.
-
All users found meal planning tool to be easy to follow. Too many icons confused users when adding ingredients to the grocery list.
Identified Issues
-
Skills button on homepage is buried on mobile.
-
Ingredient suggestion feature was not clearly understood.
-
Can’t add individual ingredients directly from a recipe.
Solutions
-
Switch priority of meal planning and skills to emphasize the latter more.
-
Replace buttons next to ingredients with a new drop down featuring optional additional ingredients.
-
Addition of add icons next to each ingredient.
BRAND DEVELOPMENT
Using gathered research, two brand identity concepts were developed. Both appeal to the target audience, but take different approaches using color, typography, and imagery to create separate feelings.
CONCEPT A
Cooking is a set of skills anyone can learn and should be presented as easy and approachable. This design reflects this idea through a cozy, country cottage aesthetic celebrating organics, naturals, and an easy breezy lifestyle. This design swaps out the floral patterns of a classic country style with herbs, fruits, and vegetables. Bold, contrasting colors and simple graphic shapes give a contemporary flare.
Contemporary
Cozy at Home
Easy Breezy
CONCEPT B
Food and cooking can be a little imperfect; a dash of this and a pinch of that, especially when at home making an everyday meal. This design embraces that fun wobbliness with vibrant colors and organic patterns. The rough brush stroke typography also reflects this theme; like whipping up a meal it only takes a few skillful strokes to make something simple and beautiful.
Colorfully Bold
Homemade
Imperfect
APP DESIGN
General search is first priority to get users started fast. Next, the homepage introduces and links to the major functions available on the app. Since cooking lessons are unique to this app it's important that users are aware of this major feature.
LEARN
Learning starts with the simplest of skills; knife work and progressing to complex cookery. Skills build on each other, so users can practice previous skills in following lessons. As they progress users see themselves leveling up in app and in real life cooking.
​
Each skill features simple video demonstrations and step-by-step written instructions.
Each skill features a recipe section for practicing that skill. Recipes start simple and build in complexity with each skill. To record progress, users log a recipe they've made that uses that skill. The log records user ratings of the recipe and cooking notes.
COOK
Each recipe has a similar recipes section recommending new dishes with similar flavors, origins, or ingredients.
Recipes are optimized to search, save, and rate recipes. Images for each ingredient allow for quick visual reference and a plus sign, for adds it to the grocery list. Directions are shown in video, written out in steps, and in a step-by-step mode for users to choose how they want to learn.
PLAN
A grocery list and weekly meal planner round out the app, helping users plan weekly meals and shop for ingredients.
​
The weekly meal plan acts as an accordion allowing users to view each days recipes easily and then hide previous weekdays.
