WorkAboutLinkedInContact
← All projects

Case study · Mobile App · UX/UI

YAAA COMI

A cooking app for young people who want to save time and money: easy meals at the lowest possible cost, with smart suggestions on how to save on ingredients.

My role

UX Designer

Team

Team of 6

Users

Students aged 18 to 23 in Mexico City

Responsibilities

Research, data analysis, information architecture, prototyping, user testing, interface design

YAAA COMI app screens cover

In short

Problem

Students with little time and money eat cheap instead of well, and recipes feel complicated.

What I did

12 interviews, persona, user flow, How-Might-We, wireframes, hi-fi prototype and thinking-aloud usability tests with 6 participants.

Outcome

A tested app prototype: cook with what you have, fewer choices and a guided step-by-step mode, improved in 3 key iterations.

My role in this project

What I did

  • Conducted interviews and synthesized the research findings
  • Designed wireframes and screens based on the findings and agreed requirements
  • Worked on the iterations after usability testing

As a team

  • 12 interviews and 6 thinking-aloud usability tests
  • Team of 6: Senior UX Designer, Product Owner, UX front end, UX back end, engineer and me

Decided by others

  • Final design decisions were made by the Senior UX Designer, who also reviewed my work

01 · Problem

Hungry, short on time and short on money.

Young people who want to save time and money need an easy way to prepare food at the lowest possible cost, while also receiving suggestions on how to save on ingredients.

Our users: students aged 18 to 23, Mexican and international, living independently without family support. Like Juan, 20, who moved from Veracruz to Mexico City to study: “I try to eat as cheaply as possible, even if it’s not that tasty.”

YAAA COMI persona Juan Suarez, 20, student
Persona: Juan, 20, studies in Mexico City on a very limited budget.

02 · Research

From desk research to 21 sharp interview questions.

We clustered desk research into categories like time optimization, pain points and technology in the kitchen, and benchmarked similar apps and websites for structure, categories and user flows.

For the interviews we drafted 38 questions across six core topics, removed overlaps and ended with a focused list of 21. With these we interviewed 12 students about daily meal planning and the real balance between student budgets and time.

What we heard

Cooking is about money and about home.

The interviews confirmed the two core needs: saving time and saving money. But they also revealed behaviors we hadn't expected:

1

Screenshots as offline backup

Users screenshot recipes in advance to prepare for unstable internet and power outages at home.

2

Nostalgia for home food

Hometown dishes create a strong sense of comfort and connection to family and culture.

3

Sharing privately, not publicly

Users send their results to mom or grandma on WhatsApp instead of posting on social media.

4

Mom is the real recipe app

When stuck, users call or text their mom for ideas and patient step-by-step instructions.

Risks & certainty

Making visible what we didn't know yet.

Before designing, we sorted our open questions on a risk / certainty axis. Four risks stood out, and the connection risk directly shaped the design.

1

Monetization risk

Can the app be monetized, or is it better to keep it free?

2

Technical risk

What infrastructure does a complex recipe system need?

3

Growth risk

How does the app scale with a growing database and many users?

4

Connection risk

How do we handle bad internet connections in the target region?

03 · Define

Pain points became “How might we” questions.

1

Make cooking easier

Clear step-by-step instructions with photos and simple vocabulary.

2

Reduce decision time

Show only 3 or 4 recipe options at a time.

3

Available anytime

Download recipes as a PDF to cook offline.

4

Cook with what you have

Ingredient-based search adapts recipes to what’s already at home.

YAAA COMI user flow as is with pain points
As-is user journey from hunger to eating: what Juan does, thinks and feels, and where it hurts.
YAAA COMI How might we statements
From pain points to How-Might-We statements.

04 · Design

Designed for fast, confident decisions.

  • Recommended recipes, leveraging the default effect.
  • Recipe cards show photo, time, rating and difficulty, so users decide without opening every recipe.
  • Recipe detail with tabs for ingredients, preparation and nutrition, a unit switcher and a portion adjuster.
  • Guided cooking mode with photos per step, checkboxes and a progress bar so nobody gets lost.
Wireframe home screen
Home: ingredient search first, 3 recommended recipes per category, cards with time, rating and difficulty.
Wireframe recipe screen
Recipe: offline download, tabs, unit switcher, portion adjuster, cooking and storage tips.
Wireframe guided cooking
Guided cooking: progress bar, a photo per step, checkboxes that turn green when done.

05 · Usability testing

6 thinking-aloud tests led to three key iterations.

  • Moved the main button down: users skipped entering ingredients and jumped to recommendations.
  • Clear categories: mixed recipe lists caused high cognitive load, so we split them into targeted groups.
  • Freedom to navigate: we removed the grey-out that forced users to tap every step; “Next step” is now always available.
Home screen before the usability study
Before: users skipped the ingredient button and jumped straight to the recommendations.
Home screen after the usability study
After: clear categories and one recipe card at a time with horizontal scrolling.
Guided cooking before the prototype changes
Before: a grey-out forced users to tap every single step.
Guided cooking after the prototype changes
After: step numbers, narrower cards for text and an always-available “Next step” button.

Final design

The hi-fi prototype for iOS and Android.

YAAA COMI high-fidelity app screens
High-fidelity screens: personalized recipes, ingredient selection and filters.
YAAA COMI style guide with colors and typefaces
Style guide: deep green, warm orange, Plus Jakarta Sans and Manrope.

UI decisions

Designed for fast, budget-friendly choices.

The final design decisions were made with the Senior UX Designer; I designed the screens. Every UI choice traces back to the two core needs: saving time and saving money.

1

Primary color

Dark green for the main actions only, with white text at 9.4 : 1 contrast.

56 px

Primary buttons

Full-width main actions like “Buscar Receta” and “Comenzar”.

2

Typefaces

Plus Jakarta Sans for headings, Manrope for text.

YAAA results with filter chips

Filters for money and time

“económico”, “tiempo” and “mejor valorado” come straight from the core needs. Results are split into “you have all ingredients” and “one ingredient missing”.

YAAA ingredient selection

Cook with what you have

Ingredients as chips that can be removed one by one, and one clear primary action: “Buscar Receta”.

YAAA recipe with portions and units

Adjust instead of calculate

A portion stepper and a unit switcher (kg, spoons, cups, pounds) right inside the recipe.

YAAA home screen

Budget first

Categories like “recipes under 200 pesos” put the cost up front.

06 · Reflection

What I learned.

No matter how well you plan your interviews, users will surprise you. This taught me to move away from assumptions and stay genuinely curious. It also showed me how much a multi-disciplinary team gains from different perspectives.

Next time I’d ask more follow-up questions, start prototyping earlier and look at existing designs for inspiration already during wireframing.