Kokoro · Responsive Web · 2025
Designing a scalable UX system for brand experience
For Kokoro (83 UK locations), improved the IA and browsing experience and rebuilt content operations on Webflow CMS.
- Client
- KOKORO UK LIMITED
- My Role
- UX/UI Design, Menu IA, Design System, Webflow CMS
- Duration
- 5 Months
- Team
- PM · Engineer · UX/UI Designers ×2
- 83
- UK locationsOne website for a fast-growing chain
- 70+
- menu itemsEasier to browse by category and filter
- 3 → 6
- menu categoriesReorganized around how people choose
When the web falls behind the brand
Kokoro was expanding fast, but the existing site couldn't keep pace in menu navigation, brand consistency, or operational management.
The chain had grown to 83 stores across the UK, while the website stayed the way it was built for a much smaller brand. Finding a dish meant long scrolling, the site did not look like the stores, and every content change went through a developer.
83
Stores
Across the UK
The continuously
expanding Kokoro brand
Existing website
Couldn't keep pace with growth
From navigation to operations
Framed this as building a scalable service structure, not just a redesign. Designed the IA and a CMS-based operations model — users find things faster, ops keeps content current.
Menu navigation redesign
Restructured the IA so 70+ menu items and 83 stores are easier to navigate
Unified online + offline brand experience
Unified the online and offline brand experience into one design system
No-code operations with CMS
Built a Webflow CMS the operations team can edit directly
Category navigation instead of scrolling
Restructured categories to match how the menu actually works, so users find dishes faster.
Before · 3 categories
- Hot
- Cold
- Dessert
- ✕ 70+ items crammed into 3 categories
- ✕ Long scrolling to find a dish
After · 6 categories
- Korean Food
- Hearty Bowl
- Fresh Roll
- Salad
- Dessert
- Side
- ✓ Browse by menu purpose
- ✓ Pick the dish you want right away
Optimizing the menu browsing experience
Reworked long, list-heavy screens around categories and filters to cut browsing effort.
The old menu was one long list of dishes with paragraphs of description. The new one puts categories and filters at the top and shows each dish as a card, with the details one tap away.
- 1Customer-tailored filtersFilters built for UK dietary restrictions and varied preferences
- 2Safe, detailed informationIngredients, allergens, and nutrition on tap — supporting safe, intuitive choices
Consistent Brand Tone
Carried the store's colors and mood into the web so the brand feels the same online and offline.
The same experience on every screen
Designed key pages responsively so the brand holds across desktop, tablet, and mobile.
Building a design system for consistent UI
Organized color, type, icons, and components to strengthen brand consistency and build recurring screens efficiently.
A structure the operations team manages directly
Menu names, prices, images, allergens, and store/careers content live in the CMS — the structure holds even when ops edits directly.
Opening a new store or changing a price no longer needs a developer. The operations team adds a branch in the CMS and it appears on the store finder, in the same layout as every other store.
New Branch
Stronger brand, smoother operations
Unified the brand experience across stores and website
Reorganized menu categories around user intent
Built a CMS so the operations team manages content directly
Responsive across desktop, tablet, and mobile