Illustration is more friendly than other graphic elements.
→ Photograph, video and texts seem conventional, sometimes it feels very professional and uncanny to recreate.
→ Hand-drawn illustrations feel warmer, approachable and authenticity.
umami
Reimagining cooking recipes with visual language
Role
- Designer
Advisors
- Brockett Horne
Skills
- Semi-structured interview
- Expert interview
- Prototyping
Tools
- Figma
- Adobe Illustrator
- Adobe InDesign
TL;DR
What is umami?
- Written recipes are long and not tailored to young adults who are recently interested in cooking at home.
- Video-based platforms like Taste or NYTimes Cooking are paid subscription, which is not friendly-budget for college students.
→ Umami is a mobile app that reimagines how people learn to cook, turning traditional recipes into intuitive and visual-first cooking guides.
The Problem
Beginners weren’t struggling with cooking itself; they were struggling with how instructions were presented
Through contextual inquiry and semi-structured interviews, I identified three recurring pain points with beginner chefs:
- Difficulty tracking steps while multitasking in the kitchen.
- Unclear terminology, required for continuous touch-screen that disrupts the pace of preparation.
- Short-form videos on social media requires the users to rewatch multiple times and recreate written recipes on notes.
- College students often learn over the convenience of take-out orders.
During early interviews and observations, I found that many beginner cooks weren’t struggling with cooking itself; they were struggling with how instructions were presented. They often paused, re-read, or scrolled backward multiple times. Recipes assumed a level of experience users didn’t have.
Current apps are paid subscription model and not customized to the beginners.
Written digital recipes are not delightful to absorb information and requires constantly touching screen.
Short videos requires user to rewatch and jot down notes to keep up with the recipes.
College students often learn over the convenience of take-out orders.
Research Question
Make cooking delightful again
The research phrase started with the observation of the people I’m closed with experience and approach cooking at home. As a college students who are busy with study and exams, and conscious about what we eat, we constantly debate the benefits of meal prep vs. take-out.
How might we transform dense recipe content into an intuitive, visualization-first experience that empowers young adults to enjoy cooking at home?
Design Guidelines
Approach the problem with visual elements
Mobile-first approach.
→ Mobile is always available on hand, despite having a smaller screen.
→ Using camera available, users can share photos of the food to the community.
Design Process
It started with a sketchbook
It started with a sketchbook. I hand-drew a Tiramisù recipe from The New York Times Cooking to test a simple question: Can a fun hand-drawn illustration support text in helping someone cook?
Having made the dessert before, I didn’t need to think much — I followed my own visuals, and surprisingly, it worked. It made the cooking feel lighter, more enjoyable. That became the inspiration behind umami: not just to digitize a recipe, but to redesign the way we consume information.
Personas
Design for young adults who are teaching themselves to cook
College Beginner Cook
Adapting to a massive lifestyle shift and learning adulthood.
Pain points:
- Rely on dining hall food and take-out meal box.
- They usually cook in cramped shared kitchens or dorms with minimal equipment.
- Time constraints with other priorities (ex. lectures, exams, networking, hangout).
Goals
- Easy-to-make meals that beat the cost of takeout.
- To find recipes dynamically tailored to the basic equipment and ingredients they actually have on hand.
- To build confidence in basic foundational techniques.
Self-directed Teen
Motivated by curiosity, identity, and personal autonomy.
Pain points:
- Want to recreate food on social media but lack of basic skills.
- Lose interest in traditional recipe blogs, rely on short-form videos for instructions and inspiration.
- Culinary jargon (e.g., “julienne,” “deglaze”) can be a blocker.
Goals
- Cooking is a new hobby and low-stake games, rather than a mundane chore.
- To have autonomy with their creative process, with limited guidance and instructions from parents.
Design Guidances
Focus on small feasible design opportunities
Micro-visual instructions to explain terminology.
Micro-animations or simple illustrations for specific techniques so they can see exactly how a technique looks without reading a definition.
Customized features like Dynamic Scale can impact the experience.
Some recipes are not designed to edit the serving sizes. Thus, a dynamic scale feature that recalculates text and visual proportions for a single serving a great design feature to try out.
Churn the step through breadcrumbs UI.
One biggest challenge in the observations is that users felt disrupted in the flow stage after getting paused multiple times to find the step they were at in the long list of bullet points.
Create a safe community to share the progress of learning.
Videos from influencers are professionally staged and it creates pressure for the beginners to comfortable share their progress. A small community on the app can be delightful to connect to others.
Exploration
From sketch to UI and illustrations
Output
umami
User Testing
Feedback from different angles
20 College Students
What worked well
+ Unique illustrations made the app feel personal.
+ Interface was clean and approachable.
+ The accent color and type scale improved visual hierarchy.
+ Value-adds like measurements and history were well received.
Area of improvement
– Buttons were too small or out of thumb reach.
– Fonts needed to be more legible.
– Direction steps weren’t always easy to follow or visually separated.
– Unclear affordances (e.g., ingredient cards confused for checklists).
3 Expert Interviews
I also consulted with UX/UI designers from NYT Cooking and a design director from Wellesley College.
Their guidance helped shape core improvements:
→ Use breadcrumb navigation or step indicators for better orientation
→ Consider the accessibility of text and visuals
→ Think about gesture patterns (vertical vs. horizontal scroll)
→ Clarify system feedback and visual affordances for actions like “check off” or “save”
Reflection
Plan the process, not just the product
Initially, I set out to design and build a full app by semester’s end. That goal quickly became unrealistic. It caused burnout and stalled progress. Eventually, I reframed the scope, and the expectation, down to what I actually wanted to come away with:
- Design is a continuous process: creating a minimal working prototype is the first step in testing whether an idea actually meets users’ needs.
- Learning to use the tools proficiently (Figma and Illustrator): this project expanded my skills in using them to communicate my ideas.
Branding
Branding guideline
