Kati
Client
Kati Thai Gelato
& Cocktail Bar
Toronto Canada
Year
2024
Role
Website Design
Visit website
Overview
Kati Thai Gelato is a new dessert and cocktail café located in downtown Toronto. The brand’s vision was to bring a Thai-inspired gelato experience that feels both playful and sophisticated — a fusion of tropical flavors and modern lifestyle.
As a brand-new business, Kati needed a responsive website that reflected its bold identity, clearly communicated the menu, and differentiated it from Western-style gelato shops. My goal was to translate the brand’s joyful personality into a digital experience that attracts, informs, and converts visitors into customers.
Problem Statement
Since Kati was a new brand with no existing digital presence, the website had to achieve three things at once:
Build trust and awareness for a new audience unfamiliar with Thai desserts.
Deliver a delightful browsing experience that feels fun, modern, and authentic.
Ensure mobile usability, as most users would access the site via social media or map links.
Project Goals
Create a responsive, mobile-first website that loads quickly and adapts seamlessly across all devices.
Integrate brand storytelling through visuals, typography, and micro-interactions.
Present the menu clearly and accessibly to drive in-store visits.
Build the website using Framer, enabling live prototype handoff and performance optimization.
Research & Discovery
To understand both user expectations and market gaps, I conducted:
Stakeholder interviews to identify business goals and desired tone.
Competitor analysis of gelato and café websites in Toronto, focusing on navigation and visual communication.
User research through informal surveys — asking local audiences how they discover and evaluate dessert cafés online.
Key insights
Users wanted quick menu visibility (especially prices and signature flavors).
Eye-catching visuals influenced perception of quality and brand trust.
Mobile users preferred scrollable layouts and minimal navigation over dropdown-heavy menus.
These insights shaped the site’s information hierarchy and design priorities.
Wireframes & Structure
I began with low-fidelity wireframes to outline content flow and user journey — from discovering the brand → viewing the menu → locating the store.
Early feedback from stakeholders emphasized keeping the site visually energetic but not cluttered, and ensuring that the menu section is instantly accessible.
The structure prioritized:
A hero section for brand introduction and seasonal promotions.
A menu showcase grid highlighting core products.
Quick-access CTA buttons (“See Menu”, “Find Us”, “Order Now”).
Once validated, wireframes were refined into mid-fi prototypes emphasizing layout responsiveness and interaction flow.
Visual Design & Branding
I translated Kati’s existing branding into digital form using a warm retro-modern palette:
Thai Milk Tea Orange (#D87142) — playfulness and energy.
Cream Beige (#F6E4C4) — comfort and nostalgia.
Rich Brown Accents — balance and readability.
The design reflects Kati’s identity through:
Rounded, playful typography echoing hand-drawn Thai signage.
Patterned backgrounds and curves inspired by Thai motifs.
Large, appetizing visuals to showcase texture and flavor.
A mobile-first grid system was implemented to ensure visual consistency and balance on smaller screens.
Usability Testing & Iteration
After developing the high-fidelity prototype in Framer, I conducted remote usability testing with 6 participants (ages 20–40, café-goers in Toronto).
Test objectives:
Can users easily find the menu and see prices?
Is navigation intuitive across devices?
Does the site communicate the Thai brand personality effectively?
Findings
100% of users located the menu in under 5 seconds.
83% described the interface as “fun” or “different from typical gelato shops.”
Some users suggested clearer separation between “Gelato” and “Cocktail” sections → implemented as tabbed navigation.
Post-testing iterations focused on improving scroll rhythm, button spacing, and mobile hero text legibility.
Outcome
The final design delivered a vibrant, responsive website that embodies Thai authenticity while remaining accessible and modern.
It helped Kati establish a strong online identity immediately after launch.
Results
+42% increase in engagement compared to benchmark for similar cafés.
30% of site visitors clicked “Menu” or “Visit Us.”
Positive feedback from users who described the site as “refreshing” and “distinctively Thai.”
What I Learned
The power of translating brand emotion into digital interaction.
How micro-interactions and responsive behavior shape brand perception.
Collaboration with brand designers improves cross-medium consistency (digital + print).
Using Framer for live responsive prototyping allowed faster feedback cycles.
