Mood-based Food Recommendation Platform

Korofu

A research-led food discovery concept that turns mood and color into a playful, testable recommendation flow.

View live prototype

At a glance

Role
Project manager, UI/UX designer, developer
Team
5 students
Timeline
May to August 2025
Platform
Interactive front-end web app

Problem

Choosing food can become a loop of endless scrolling when options are abundant but recommendations ignore mood, context, and personal preference.

My contribution

I combined project leadership, user interviewing, interaction and visual design, paper-to-Figma prototyping, front-end work, and evaluation with a five-person team.

Outcome

A deployed front-end prototype shaped by 6 interviews, a heuristic review, documented revisions, and a final survey with 22 participants.

01 · Context

Food discovery began with a feeling, not a search query.

Korofu asks a different first question: how do you feel, and what color fits that feeling? It turns those lightweight inputs into food suggestions, recipes, and restaurants. The project was an academic UI/UX exercise, so the scope centered on research, interaction, visual expression, evaluation, and a working front-end with mocked data.

Design challenge

Reduce decision fatigue without removing delight.

Existing delivery and social platforms can provide more options than clarity. We wanted to shorten the path to a useful suggestion while preserving the emotional, visual, and social reasons people enjoy choosing food.

Scope boundary

Prototype the experience, not a recommendation backend.

The deployed product is a front-end interaction prototype. Inputs, states, and end-to-end UI flows are implemented, but food data is mocked and no production recommendation engine or transaction backend is claimed.
  1. Understand01

    Interview potential users

    Six interviews explored food indecision, eating habits, emotional context, current workarounds, and visual preferences.

    Output: Interview synthesis

  2. Define02

    Set the vision and requirements

    The team framed the product promise, target audience, features, and the behaviors the prototype needed to communicate.

    Output: Vision and requirements

  3. Diverge03

    Sketch paper concepts

    Each team member proposed a different interface direction before the group compared navigation, tone, and feature structure.

    Output: Individual paper prototypes

  4. Converge04

    Build one computer prototype

    Promising ideas were combined into a cohesive Figma flow with mood, color, quick-pick, search, preference, and collection experiences.

    Output: Unified Figma prototype

  5. Evaluate05

    Review the working flow

    A heuristic evaluation surfaced navigation, consistency, search, and feedback issues with severity levels and proposed fixes.

    Output: 6 prioritized issues

  6. Refine and release06

    Revise, deploy, and survey

    The team revised key interactions, deployed the front-end, then gathered a 22-person survey on clarity, appeal, navigation, and feature comprehension.

    Output: Live prototype and survey

02 · Evidence

Six conversations turned a playful premise into a grounded product direction.

The interviews covered different habits, diets, levels of indecision, and food-app experience. My own interview with a university student reinforced that too many choices and unreliable social content can make a simple meal decision tiring.

6
Initial interviews

One or more conducted by each team member

4
Synthesis themes

Pain points, habits, feature preferences, visual preferences

3
Core inputs

Mood, color, and food preference

1
Design question

How might we make choosing food feel lighter?

Evidence

Interviewees described both having no idea what to eat and being overwhelmed by too many options. Several relied on impulse, social media, weather, or emotion.

Insight

The problem was not a shortage of food content. It was the effort required to turn context and feeling into one confident next choice.

Design response

Start with mood or color, then reveal a curated suggestion instead of opening with a dense catalog. Keep Quick Pick as a lower-effort alternative.

Evidence

People wanted personalization, but long preference setup and excessive filtering were also described as tedious.

Insight

Personalization only helps if the cost of teaching the product stays lower than the effort it saves.

Design response

Use lightweight tags, smart defaults, visible like or dislike actions, and progressive setup rather than a mandatory questionnaire.

Evidence

Visual preferences varied from minimal green or beige interfaces to warm, lively palettes, but interviewees consistently asked for clarity and friendly interaction.

Insight

A distinctive visual language could create emotional fit, but hierarchy still had to make the next action obvious.

Design response

Adopt a playful neobrutalist system, then use repeated shapes, type scale, and direct calls to action to control the energy.

Artifact placeholder · Research synthesis

Decision fatigue
Emotion and context
Useful personalization
Friendly clarity
Replace this with a compact affinity map that keeps only anonymized evidence. Connect each cluster to the product principle and feature it informed.

03 · Divergence

Paper made disagreement cheap enough to be useful.

The team did not begin with one polished answer. Five individual paper-prototype sets explored different visual styles and ways to arrange mood selection, recommendations, profiles, and discovery. Instructor feedback then pushed us to consolidate them into one deliberate system before moving further into Figma.

Paper route A

Replace this frame with an annotated WebP, video, or SVG artifact.
Add Huy's paper prototype. Annotate the interaction idea worth keeping and the part that did not scale.

Paper route B

Replace this frame with an annotated WebP, video, or SVG artifact.
Add a contrasting team concept. Explain what it revealed about navigation, feature density, or tone.

Convergence sheet

Replace this frame with an annotated WebP, video, or SVG artifact.
Show the chosen structure, not just a final-looking sketch. Mark which ideas were combined, simplified, or rejected.
  1. 01

    Compare structures before styles

    We separated questions about page hierarchy and flow from preferences about color, illustration, and visual personality.

  2. 02

    Keep the shortest recommendation path

    Mood and color remained central because they made the concept distinct while allowing a fast route to a suggestion.

  3. 03

    Bring secondary tools behind the main promise

    Preferences, saved items, community, recipes, restaurants, and profiles supported the experience without competing with Choose Your Food.

  4. 04

    Unify interaction language in Figma

    A shared sidebar, repeated card behavior, consistent controls, and one visual system turned separate ideas into a testable product flow.

04 · Interaction

The core flow trades browsing breadth for emotional relevance.

Korofu supports several discovery modes, but the case study focuses on the experience that best expresses the product idea: move from feeling, to a small preference signal, to a food suggestion, then keep control through feedback and undo.

Input

Describe a mood or pick a color.

A conversational mood input and a visual color picker reduce the need to know a dish name before starting. Quick Pick offers an even shorter path when the person wants surprise over control.

Recommendation

Make one suggestion feel actionable.

The result card prioritizes the dish, a compact explanation, and the next decision. Recipes and restaurants extend the idea without forcing the user to restart discovery.

Feedback

Let preference improve through visible actions.

Favorite, dislike, and undo turn reactions into understandable states. The design avoids silently learning from a destructive action the user may have triggered by mistake.

Artifact placeholder · Choose Your Food

  1. 01 · Mood
  2. 02 · Color
  3. 03 · Suggestion
  4. 04 · React
  5. 05 · Refine
Use a screen sequence or short recording here: mood input, color selection, suggestion, favorite or dislike, and undo. Captions should explain why each step exists.

05 · Expression

Neobrutalism gave the product a mood of its own.

Heavy outlines, offset shadows, bright candy colors, rounded display type, and hand-drawn geometric food illustrations made Korofu feel youthful and direct. The deployed landing page uses the system as a promise: choosing food here should feel more playful than scrolling a standard delivery catalog.

Principle 01

Make actions feel physical.

Buttons use hard shadows and a pressed interaction so feedback comes from motion and shape, not only from changing color.

Principle 02

Use color as energy, not hierarchy alone.

Yellow, aqua, coral, lavender, and pink carry personality. Black outlines, spacing, type scale, and placement still do the structural work.

Principle 03

Let imperfection feel intentional.

Hand-drawn pizza, stars, arrows, and abstract forms support the emotional concept, while functional icons remain recognizable and repeatable.

Playfulness earned attention. Consistency and breathing room had to earn trust.

06 · Evaluation

Heuristic review found where expression was masking control.

The team evaluated the working prototype using established usability heuristics and recorded six issues from trivial to major. The most important problems were not visual taste: they interrupted search, reversibility, and a person's understanding of where to go next.

Korofu heuristic findings and design responses
FindingSeverityDesign response
Favorite and delete placement could cause a mistaken action.1 · TrivialShrink and relocate the controls, then replace the trash symbol with a clearer close action.
Vietnamese and English appeared in the same address system.2 · MinorStandardize the display language and treat localization as a product-level choice.
Users had to choose dishes, recipes, or restaurants before searching.3 · MajorUse one conversational search entry with category switching after the query.
Two similar concepts used different words and were difficult to distinguish.2 · MinorExplain the difference in context and plan a clearer collection model or onboarding cue.
Choose Your Food had no visible route to the previous step.3 · MajorAdd local back navigation that returns to the immediate prior state, not the homepage.
Feedback was difficult to notice and appeared without enough context.2 · MinorPlace feedback after a relevant experience and make its purpose explicit.

Before · Fragmented search

Replace this frame with an annotated WebP, video, or SVG artifact.
Show the separate Dishes, Recipes, and Restaurants choices and the retry loop that increased effort.

After · Unified discovery

Replace this frame with an annotated WebP, video, or SVG artifact.
Show the revised conversational search with visible category control and a direct route to a new query.
  1. 01

    Simplify the color picker

    Remove the technical color-code area and leave the color wheel as the primary, understandable interaction.

  2. 02

    Clarify preference feedback

    Add a visible Disliked state and Undo so the product communicates what happened and supports recovery.

  3. 03

    Adapt Figma interactions for the web

    Use physical pressed-button motion, refine upload popups, and add clearer filter control rather than reproducing every prototype behavior literally.

07 · User response

The final survey validated appeal and exposed the next usability work.

Twenty-two people reviewed the interface through 13 Likert-scale questions and two open-response prompts. The report is strongest as directional evidence: it shows which ideas resonated and where confusion remained, without pretending the sample proves market fit.

22
Survey participants
13
Likert questions
90.9%
Aged 18 to 24

A demographic, not a satisfaction score

63.6%
Occasional delivery-app users

Strong signal

The concept and visual tone were memorable.

Most responses favored the homepage message, the neobrutalist style, Choose Your Food, and Quick Pick. Open comments repeatedly described the experience as cute, youthful, playful, and distinctive.

Mixed signal

Search remained the least settled experience.

Discover More received the widest spread of ratings. Participants wanted clearer categorization and a more understandable unified search even after the revision.

Next risk

First-time comprehension still needs support.

Back navigation, Favorite versus Saved, preference setup, button contrast, spacing, and visual weight all point to a guided first-use test rather than another cosmetic pass.

08 · Learning

A strong visual idea is most useful when it sharpens the product idea.

Korofu helped me practice the complete UI/UX loop: hear a messy human problem, make it specific, sketch multiple answers, choose one, build it, invite criticism, and revise. The most valuable shift was learning to evaluate the flow as a whole rather than polishing isolated features.

What worked

Research and expression reinforced each other.

Mood and color were not added after the interface was styled. They shaped the entry flow, recommendation behavior, illustrations, language, and the product's emotional tone.

What I would change

Observe tasks before asking for ratings.

I would test Choose Your Food and Discover More through moderated sessions with clear success criteria, then use the survey after the task to understand confidence and appeal.

Next step

Prove value with real recommendation behavior.

The front-end demonstrates the experience. A meaningful next release needs a defined recommendation model, real food data, accessibility review, localization, and measures for decision time, useful suggestions, and return use.