01 / Product design · Mobile experience

A little more clarity.
A more personal
café ritual.

CustomCafé brings ingredients, dietary needs and customization into the moments that matter—before someone places an order.

Explore the design story ↓

01 / The context

Choosing lunch shouldn’t
mean decoding the menu.

A dish name tells you what sounds good. It doesn’t necessarily tell you whether that dish fits your needs.

This project explores an ordering experience for people balancing ingredient allergies, dietary preferences and personal taste. The design challenge is to make that information useful while browsing—and keep it accurate as the order changes.

The scope covers dietary setup, menu exploration, dish customization and order review. Fulfilment, kitchen operations and live ingredient verification remain outside the current concept.

02 / Product strategy

Make the next decision
an informed one.

See what matters

Bring relevant ingredient and allergen information forward before someone commits to a dish.

Understand what changes

Explain the effect of a substitution instead of treating customization as a list of extras.

Review with context

Carry the chosen ingredients, preferences and unresolved warnings into order review.

Working problem statement

How might we help people understand whether a café order fits their dietary needs, without making promises the interface cannot verify?

Design lenses · Working personas

Lucas / Ingredient allergies

“What is actually in this?”

A software engineer comparing ingredients against saved allergens. His scenario makes warning visibility, ingredient detail and the distinction between unknown and absent information central to the design.

Emma / Vegetarian preferences

“Can I make this work for me?”

A yoga instructor looking for vegetarian choices and suitable substitutions. Her scenario highlights flexible customization without presenting a preference mismatch as an allergy warning.

These personas are design lenses from the project brief, not evidence of participant interviews.

03 / Design decisions

Clarity lives in the details.

Separate allergies
from preferences.

Allergies and dietary choices both shape an order, but they require different responses. Reserve the red allergy treatment for a known allergen match; use neutral labels for vegetarian preferences and other dietary attributes.

Trade-off: fewer warning badges make the interface quieter, but the difference must also be explained in words—not color alone.

Information hierarchy

Contains your saved allergen: Milk

Review ingredients before ordering.

VegetarianCustomizable

Preference labels remain visually distinct from allergen warnings.

“Not set” is a real state.

An empty allergy profile does not mean a person has no allergies. Use an explicit “Not set” state rather than implying that screening has taken place.

Trade-off: prompting for preferences can interrupt browsing. Let people explore first, while keeping the incomplete state visible.

Profile states

Saved allergensNot set

Set your allergens to see matching ingredient warnings.

Saved allergensMilk · Soy

A saved profile informs the display; it does not verify preparation or cross-contact.

Explain unavailable choices.

In the customization direction, saved allergen selections are protected and conflicting options such as soy are disabled. Make the reason visible beside the option, and provide a clear route to edit the profile if the saved information is wrong.

Trade-off: disabling an option prevents selection, but can feel arbitrary without an explanation.

Substitution picker

Oat drinkAvailable

Soy drinkUnavailable

Contains your saved allergen: Soy

Changing a profile is a separate action from customizing a dish.

04 / The proposed experience

From browsing
to a considered choice.

Explore the interaction below. Switch the dietary profile and choose a drink base to see how the information responds.

Illustrative prototype · Sample ingredients · No actual ordering

Try a scenario

Dietary profile

Read the profile context.
Compare the available bases.
Review what the selection means.

In a production product, ingredients and availability would come from maintained café data. An ingredient substitution alone cannot establish an allergen-free preparation environment.

9:41 ● ● ▰

CUSTOMCAFÉ / CUSTOMIZE

Your café latte

Choose your base

Drink base Dairy milk Original Oat drink Substitute Soy drink Substitute

Context first

The saved profile appears where it affects the decision.

Explicit constraints

An unavailable option comes with a readable reason.

No false reassurance

No listed match is different from a guarantee of safety.

System thinking

The UI depends on
the information behind it.

State	Interface response	Production dependency
Profile not set	Explain that personalized screening is not available.	Explicit profile state; never infer “none”.
Known allergen match	Name the allergen beside the affected choice.	Ingredient-to-allergen mapping.
Ingredient data missing	Show “Information unavailable” and a route to ask the café.	Unknown distinct from absent.
Substitution selected	Update the summary and re-evaluate relevant warnings.	Variant-level ingredients and availability.
Cross-contact uncertain	Keep preparation uncertainty visible.	Café preparation guidance and staff confirmation.

Accessibility is part of clarity.

Use text alongside color, semantic form labels, readable contrast, keyboard-operable choices and announced updates. Long ingredient names should wrap instead of truncating essential information.

Bound the product promise.

The interface can help someone understand recorded information. It cannot independently verify ingredients, preparation practices or individual suitability. That boundary should guide both content and interaction design.

05 / Validation plan

What needs to be true
for this to work?

The next step is to test comprehension and decision quality—not just whether people can complete an order.

Warning comprehension

Ask participants to explain an allergen warning in their own words. Check whether they distinguish a recorded ingredient match from preparation guarantees.

Observe: interpretation errors and false reassurance.

Customization clarity

Ask someone to replace a conflicting ingredient and explain what changed. Include an unavailable alternative.

Observe: missed updates, unexplained disabled states and recovery.

Review accuracy

Ask participants to identify the selected ingredients and any unresolved information before confirming.

Observe: summary accuracy and unresolved uncertainty.

Proposed study, not completed research. Recruit people with relevant dietary needs; use simulated orders, not food consumption.

06 / Reflection & next steps

A useful interface tells you
what it knows.
And what it doesn’t.

The central design challenge is balancing personalization with honest limits. More badges are not necessarily more clarity; each state needs a distinct meaning and a useful next action.

Before this case study is final

Add the actual project duration and ownership boundaries.
Replace reconstructed examples with final Figma screens.
Document real research methods, participants and findings.
Add observed iterations and their supporting evidence.
Report measured results only after validation.

Current outcome: a documented design direction and an illustrative interaction. No validated usability or commercial outcomes are claimed.

Back to the menu ↑