A self-initiated proposal to improve the Cozymeal website experience.
UX DesignUI DesignFood & Hospitality
1. Overview
A UX/UI design project proposal for Cozymeal, a cooking classes, private chefs, food tours services platform in over 100 cities worldwide.
The briefs was provided by Cozymeal, including three tasks of UI and UX design. To approach, I started with brand research and analysis, to understand the business model and target audience.
After researching Cozymeal through its websites, Instagram, and YouTube channel, I identified three keywords to shape the themes of the design moodboards.
01Diversity
02Cozy
03Memorable
2. Understand Existing Design System
Before proposing new interfaces, I studied Cozymeal's existing website and translated its recurring visual patterns into a practical Figma design system. This created a consistent foundation for layout, typography, colour, iconography, and imagery.
01
Capture
Imported representative pages from the existing website into Figma.
02
Audit
Reviewed recurring layout, type, colour, icon, and image patterns.
03
Systemise
Converted those patterns into reusable styles for the proposal.
2.1. Typography
A soft heading voice with practical supporting type
Primary · Lato
Aa
Headings and buttons
H1 · Regular · 42px
H2 · Semibold · 28px
Button · Bold · 14–22px
Secondary · Open Sans / Segoe UI
Aa
Body and captions
Large body · Regular / Semibold · 18px
Medium body · Regular / Semibold · 16px
Caption · Regular · 12–13px
2.2. Iconography
Simple one-pixel line icons
The existing system uses compact 32px general and feature icons. Orange communicates action and product features, while neutral grey supports utility actions.
The strongest images show people cooking together in branded aprons, natural conversation, hands performing recognisable cooking actions, and finished food that feels warm and appetising.
3. Task 1 · UX Design
I wanted to understand why booking a cooking class could feel harder than cooking one. I focused on where users hesitated, backtracked, and lost confidence, then used those friction points to define a clearer booking flow.
Research setup: three participants, one booking task, eye tracking, observation, and Think Aloud.
Evidence: task completion, time on task, errors, backtracking, fixation patterns, and verbal feedback.
Design target: reduce decision load, shorten the booking task, and support more completed bookings.
Business metric to validate after launch: booking conversion rate.
3.1. Evaluate
Define what a better booking flow should improve
I gave each participant the same task: find a suitable cooking class and continue towards booking. The MMU's eye-tracking equipment recorded where they looked, while their comments explained why they paused, returned, or changed direction. Sadly, the machine still cannot read minds.
3
participants
MMU
eye-tracking lab
1
booking task
Think Aloud
thoughts and feelings
What I measured
Task completion and time on task
Errors, backtracking, pauses, and repeated scanning
Fixation patterns around important decisions
Confusion, confidence, and comments from Think Aloud
About cognitive load
I did not measure cognitive load as one magic number. I treated it as a design hypothesis supported by longer task time, repeated gaze, backtracking, errors, and verbal hesitation. In another round, I would add a short post-task mental-effort or Single Ease Question rating.
Design goal → UX outcome → Business KPI
Reduce decision load
Design goal
→
Shorter time and fewer errors
UX metric
→
More completed bookings
Test outcome
→
Higher booking conversion
Business KPI after launch
Booking conversion rate is the right business metric, but three usability sessions cannot prove an increase. They can show whether the redesigned flow is easier and more likely to be completed.
3.2. Empathise
Turn gaze patterns and comments into booking problems
Task description
Find a suitable cooking class, choose a date and group size, check the important details, and continue to the booking summary.
Success criteria
The user reaches the summary without help and can explain the class, date, total price, location, what is included, and cancellation conditions.
How I read the evidence
Gaze
Where attention stayed, returned, or missed important information.
Behaviour
Pauses, wrong turns, repeated filters, scrolling, and backtracking.
Voice
What users expected, questioned, and felt during the booking.
Problems from three sessions
01
The starting point was not obvious
Evidence: Users scanned several experience types before committing to Cooking Classes.
“I know I want a cooking class, but I am not sure where I should start.”
Think Aloud feedback · paraphrased
Meaning: The site asks users to understand its categories before it understands their goal.
02
Filters behaved like separate puzzles
Evidence: Users moved repeatedly between location, date, cuisine, and group-size controls.
“I changed the date, but now I need to check the location again.”
Think Aloud feedback · paraphrased
Meaning: Related decisions were split across the flow, increasing re-checking and hesitation.
03
Availability appeared too late
Evidence: Users opened attractive classes, then returned when the date or places did not fit.
“This class looks good… oh, it is not available on my date.”
Think Aloud feedback · paraphrased
Meaning: The result card created interest before confirming whether the class was bookable.
04
Classes were difficult to compare
Evidence: Users revisited cards and details to compare level, price, duration, rating, and location.
“I keep opening the cards because I cannot remember which one included what.”
Think Aloud feedback · paraphrased
Meaning: Key decision information was present, but not together. A small treasure hunt, without treasure.
05
Confidence dropped near checkout
Evidence: Think Aloud comments returned to cancellation, inclusions, extra fees, and payment security.
“Before I pay, I want to know what is included and whether I can cancel.”
Think Aloud feedback · paraphrased
Meaning: Reassurance arrived after users had already spent time making a choice.
Representative gaze maps
Recreated from observed patterns · not raw device exports
The maps show how attention became scattered across the booking journey. Red areas represent stronger attention; green areas show lighter scanning.
01
Homepage search
Attention spread across the headline, navigation, four search fields, and CTA before users could begin.
02
Search results
Users re-checked filters, trust signals, and the first result because the key comparison details were separated.
03
Class and booking details
Attention jumped between the class description, menu choices, price, booking controls, and checkout button.
3.3. Persona
Jessica Magatte
29 · Sales marketing · Married · Manchester, United Kingdom
Jessica enjoys cooking for her family and exploring cuisines from different cultures. She wants guided, social classes that improve her skills and help her prepare better meals at home.
Interests
Exploring different cultures
Food experiences
Travelling
Time with friends and family
Goals
Learn techniques for better family meals
Connect with a cooking community
Build confidence and enjoy preparing meals
Preferred channels
Billboards and posters
Instagram, TikTok, Douyin, WhatsApp, WeChat, and Snapchat
Events, email, and phone
Pains
Quality and class level are hard to judge
Too many options without clear recommendations
Chef, teaching style, and skill outcomes are unclear
Concern about wasting time and money
3.4. Journey map
From discovery to payment
Scenario: Jessica wants a steakhouse-style class so she can learn to cook restaurant-quality steak at home and share the result with her family.
Discovery
01
Explore the website · Feeling: Distracted
Thinking
There are many types of experiences available online.
I wonder if there are cooking classes near me.
I hope the class is suitable for beginners.
Doing
Browse the homepage.
Scan highlighted information.
Pain points
Too many experiences are displayed at once.
Relevant cooking classes are hard to find quickly.
The homepage prioritises variety over personalisation.
Opportunities
Remove unnecessary information to reduce cognitive load.
Detect location and personalise the page to the user's city.
Search
02
Search for a cooking class · Feeling: Confused by the filters
Thinking
I want a cooking class near my location.
I prefer steak or Western cuisine.
I hope the schedule fits my free time.
Doing
Enter a city and select Cooking Classes.
Choose a time and group size, then find experiences.
Filter by cuisine and choose a class.
Pain points
Experience options change after the city is selected, which is confusing.
Broad time presets are less useful than checking an exact date.
Opportunities
Restructure the experience list.
Add exact-date and calendar selection.
Booking
03
Review and book the class · Feeling: Overwhelmed by choices
Thinking
This class looks interesting.
The chef seems professional.
I want to check reviews before booking.
Doing
Select a class and review the chef profile and class details.
Read reviews and check available dates and times.
Pain points
Important information is scattered across different sections.
Classes are difficult to compare quickly.
Text-heavy reviews take time to assess.
Opportunities
Add short video introductions from chefs.
Summarise the most useful reviews.
Show available seats and popularity indicators.
Payment
04
Confirm and pay · Feeling: Uncertain about the choice
Thinking
Is the payment secure?
What if I need to cancel or reschedule?
Are there additional fees?
Doing
Create an account and pay by card.
Use the card details to autofill the address and complete the purchase.
Pain points
Concern about payment security.
Refund and cancellation policies are unclear.
An account is required before payment.
Opportunities
Show payment-security badges and encryption information.
Provide guest checkout.
Make refund and cancellation policies easy to find.
3.5. Ideate
How might we…
How might we help users find the right experience faster?
Design responses
Use a two-level selection model.
Define the user's city.
Add calendar selection.
Reduce cognitive load.
How might we personalise the homepage around the user's locale?
Design responses
Use the current location to show nearby experiences.
Use local currency and language.
How might we communicate trust at a glance?
Design responses
Show the overall rating and review count.
Highlight recognised brands.
Add short review videos.
3.6. Solution
A faster, more local discovery model
The wireframe brings experience types into a clear first-level navigation and keeps city, date, cuisine, and group size together in one compact search flow. The final direction adds local Manchester results, exact calendar selection, richer experience cards, stronger ratings and brand proof, and more visible customer reviews.
Two-level experience and cuisine selection
Location-aware content and local currency
Exact-date calendar selection
Ratings, review totals, and trusted-brand proof
Short review and chef video content
Availability and popularity indicators
Information architecture · Rearranged booking flow
I grouped information by the decision users need to make, instead of asking them to collect clues across several pages.
The first search asks users to make four decisions together.
03
Useful availability details still appear later in the journey.
Before: browse everything → filter in several places → open a class → discover a date problem → go back → repeat.
01
Discover
Experience type
Location
Exact date
Start with one clear search intent.
→
02
Compare
Cuisine and level
Price and duration
Rating and availability
Compare the same information on every card.
→
03
Decide
Chef and class details
What is included
Reviews and cancellation
Answer confidence questions before checkout.
→
04
Book
Date and guests
Booking summary
Guest checkout and payment
Keep the final steps short and predictable.
3.7. Result
A clearer and shorter booking journey
I redesigned the homepage to shorten the path from browsing to a relevant local experience, while keeping Cozymeal's existing visual identity and trust signals.
How I would validate it after launch
Proposed A/B test · not measured project outcomes
This is an independent concept, so I do not have access to Cozymeal's production data. If the redesign could be launched, I would run an A/B test: half of eligible visitors would use the current flow and half would use the redesign. I would compare the metrics below before deciding whether the new flow performs better.
Booking conversion
Primary metric
What it tells me: The percentage of eligible sessions that finish with a confirmed booking.
How to measure: Confirmed bookings ÷ eligible booking sessions × 100.
Booking-start rate
Funnel metric
What it tells me: How many visitors move from browsing a class to starting the booking flow.
How to measure: Sessions starting a booking ÷ sessions viewing an eligible class × 100.
Time to booking
Efficiency metric
What it tells me: How long users need to move from their first search to a confirmed booking.
How to measure: Compare the median time between the first search event and booking confirmation.
Checkout abandonment
Guardrail metric
What it tells me: How many users start checkout but leave before confirming their booking.
How to measure: Unfinished checkouts ÷ all checkout starts × 100. Lower is better.
When would I choose the redesign? Only when booking conversion improves and the guardrail metrics do not become worse. I would run the test until it reaches the agreed sample size and statistical confidence, rather than stopping early when the first results look positive.
Before · Original homepage
After · My redesign
12345
Annotations · What I changed
1
Category-first navigation
Replaced the broad experience dropdown with visible experience categories.
2
More precise search
Grouped location, date, cuisine, and group size into one compact search flow.
3
Local results first
Moved relevant classes and team-building experiences to the top of the page.
4
Richer experience cards
Added host imagery, prices, dates, and availability for faster comparison.
5
Clearer trust signals
Reorganised press logos, review totals, customer feedback, and social impact.
4. Task 2 · UI & Graphic Design
The second task asked for two or three replacement images for an unusually wide team-building hero. The new direction needed to reflect the Cozymeal brand, show a genuine group cooking together, and preserve readable white interface content.
4.1. Audit the existing hero
Turn the brief into visual constraints
I first separated what could change—the background image and overlay—from what had to remain: the wide format, search controls, page copy, and Cozymeal navigation.
Format
21:3 hero ratio
The replacement had to work inside the existing unusually wide banner.
People
More than two
The scene needed to communicate a genuine team rather than an individual class.
Activity
Cooking together
The action had to be immediately recognisable as a shared culinary experience.
Accessibility
Readable white text
The composition needed controlled dark areas behind headings and body copy.
4.2. Check accessibility
The original image could not reliably support white text
I sampled the lightest text areas against the image and compared them with WCAG contrast targets. This made contrast a selection criterion rather than a final visual adjustment.
Normal text
Measured
1.74:1
Target
4.5:1
Large text
Measured
2.51:1
Target
3:1
4.3. Explore and compare
Three image directions against the same criteria
Direction A
Social and memorable
Strong warmth and social energy, but the cooking activity is less obvious and the bright background competes with white text.
Direction B · Selected
Team activity in context
The clearest balance of teamwork, visible cooking, diversity, and darker areas that can support the existing content.
Direction C
Cooking action first
The shared action reads immediately, but missing faces makes the experience feel less personal and memorable.
4.4. Refine and deliver
Selected direction in the existing interface
I selected the group-cooking image, tuned its crop and dark overlay around the content zones, then checked the white heading and body text again. The composition keeps the activity visible while giving the interface enough contrast to remain legible.
Composition
Faces and cooking activity remain visible in the wide crop.
Legibility
Dark image areas and a controlled overlay support the white copy.
Delivery
The supporting video was compressed from 17 MB to about 2 MB for practical use.
5. Task 3 · Revamp UI
I refreshed the team-bonding feature section to feel more modern and engaging while preserving Cozymeal’s established visual language.
01
What I found
Generic photos weakened the team-building story, while small line icons gave the benefits too little emphasis.
02
How I resolved it
I kept Cozymeal’s orange palette, solid icon style, and type hierarchy, then introduced stronger cooking imagery and a more distinctive layout.
Original section · Audit
Direction A · Exploration
Direction B · Selected
I selected the cleaner horizontal direction because it improved scanning, made the team activity more recognisable, and stayed closest to the existing brand system.
6. Tools & Reflection
The project combined Figma, Figma Make, browser-to-Figma tools, design-system plugins, Photoshop, AI-assisted image work, accessibility checking, and FFmpeg-based video compression.
I missed the application submission deadline, but the exercise became a valuable opportunity to work from a real business brief and practise connecting visual design, accessibility, research, and measurable UX outcomes.
12345
