Can Kai
Awebsiteredesignforarestaurantthathousestwobrands:CanKaifordininginandTarofortakeaway.Twobrowsablemenus,eachwithitsownidentity,replacingthePDFthatusedtoserveasthemenu.
(SCROLL) ↓
01
Project Overview
Two services, two brands, one website.
The old website had fallen behind and the whole offer lived inside a PDF: tiny type on mobile, constant zooming and no way to reach a specific dish. On top of that, dining in and takeaway shared one document despite being two businesses with different audiences and moments of consumption. I split them into two journeys with their own identity (Can Kai for dining in, Taro for takeaway) and rebuilt the whole project, from the copy to going live.
Fitxa
02
User Experience
From document to browsable menu.
A PDF hands the work to the reader: zooming, scrolling and remembering where everything was. I turned the menu into structured content, grouped by category, with a filter that shows only what you are looking for. Rewriting the dishes was part of the same job.
My contribution
- Content architecture: splitting dining in and takeaway into two independent journeys, each with its own navigation.
- Category system: dishes and drinks classified so the filter replaces the linear reading of the PDF.
- UX writing: menu names and descriptions reworked to be read on screen, not on paper.
- Mobile first: the journey designed for the phone first, since that is where the menu gets read.
03
Prototyping
From Figma to code, with no stopovers.
Much of the proposal is motion: entry and exit transitions and a different parallax in each section. Instead of faking it with static screens, I took the Figma straight to code with AI assistance and tuned the rhythm in the browser, which is where it really shows.
My contribution
- Figma as the source of truth: structure, type and spacing locked in the file before writing a single line of code.
- AI-assisted translation: straight from design to front-end components, with no intermediate prototype layer.
- In-browser tuning: durations, easing curves and parallax layers calibrated on the built code.
04
UI Design
Two skins on the same structure.
The two brands had to share components without looking like the same thing. I built a single structure (dish card, category header, filter bar) and two skins to dress it: Can Kai in Jost on cream and black; Taro in Anton on black and orange.
My contribution
- Design system: type, colour and spacing defined as two interchangeable themes on the same components.
- Menu components: a dish row with a dotted leader and price on the same baseline, reused for food and drinks.
- Development and launch: front-end build and go-live at cankai.es.
Can Kai and Taro no longer hand out a PDF: they hand out a menu people can read. Taking the project end to end, from the copy to production, leaves a tidy foundation where a new season doesn’t mean rethinking the website.
Share this project
Keep scrolling to see the next case study.
CatSalut