A design concept for a modern Sri Lankan kitchen in Colombo. The menu is real text, not a PDF, with spice levels and dietary filters, and reservations take four fields.
Client
Kadé Kitchen & Bar
Location
Colombo 07, Sri Lanka
Year
2026
Role
UX design, UI design, menu design
Services
UX design, UI design, Menu design, Reservation flow
4
Fields to book
0
PDF menus
3
Dietary filters
Overview
Project overview
'Kadé' is the Sinhala word for a small shop — the roadside place where you'd stop for tea and a short eat. Kadé Kitchen & Bar is a concept for a modern restaurant in Colombo 07 that takes that everyday food and cooks it properly: hoppers off a wood fire, rice and curry on a leaf, kottu done to order.
Most restaurant websites in Colombo are a photo slider and a menu PDF that takes forever to load on mobile data. Guests give up and go to Instagram, or call during the busiest hour of service. We designed Kadé's website to answer the three things guests actually want: what's on the menu, can I get a table tonight, and where exactly are you.
This is a design project, designed and prototyped in Figma, not built as a live site.
The challenge
Business challenge
Most Colombo restaurant sites are a photo carousel and a menu PDF that takes ages to load on mobile data. Guests end up on Instagram or calling during service, and staff spend the evening on the phone instead of the floor.
Goals
- 01
Turn the menu into real, readable text that works on a phone in a dim restaurant.
- 02
Let guests book a table in under a minute, without calling.
- 03
Show the food the way it's actually served, with warm, honest photography.
- 04
Make it easy for the floor manager to update specials and sold-out dishes in seconds.
Audience
Who we designed for
After-work diners
Colombo professionals deciding on dinner at 6pm, on their phone, often for a group. They need the menu and a table, quickly.
Visitors to Colombo
Travellers who want 'real' Sri Lankan food done well, and need dishes and spice levels explained in plain English.
Guests with dietary needs
Vegetarians, vegans and people who can't take much heat, who currently have to ask the waiter about every dish.
Research
Key insights
- 1
A PDF menu can be 5–10 MB. On mobile data it often never loads, and it can't be searched, filtered or read by a screen reader.
- 2
'How spicy is it?' is the most common question at the table. A simple three-chilli scale answers it before anyone asks.
- 3
Guests booking a table only need to give four things: date, time, party size and a phone number. Everything else can wait.
- 4
Food photos taken from directly above, on the leaf or plate it's served on, feel more honest than styled studio shots.
Approach
Our approach
- 01
The menu became structured content: dishes, prices, spice level and dietary tags that staff can update in seconds.
- 02
Reservations ask for four things — date, time, party size, phone — and confirm by SMS.
- 03
Warm, food-led colours taken from turmeric and chilli, with large type that holds up on a dim phone at the table.
- 04
The homepage leads with a single great photo and two buttons: 'See the menu' and 'Book for tonight'. Nothing else competes.
Screens
Menu
Reservations
Palette
Chilli
#B5381F
Turmeric
#E8A33D
Coconut
#F6E3C4
Clay pot
#2B1A12
Display
Instrument Serif
Body
DM Sans
Design decisions
Design rationale
Colours from the kitchen
Chilli red for actions, turmeric for highlights, coconut cream for the background. The palette tastes like the food.
A serif with character
Instrument Serif in large sizes for dish names gives the menu a printed, hand-made feel; DM Sans keeps descriptions and prices clear.
Spice as a scale
One to three chilli icons, always next to the dish name, so guests can scan the whole menu for heat in seconds.
Sold out disappears
Dishes that sell out are dimmed, not removed, so regulars can see their favourite will be back tomorrow.
What we designed
Key capabilities
01
Live menu
Filter by vegetarian, vegan or spice level. Sold-out dishes update without a reprint.
02
Table booking
Four fields, instant confirmation, and a reminder the afternoon before.
03
Events and specials
Weekly specials and live-music nights, editable by the floor manager.
04
Delivery links
Straight to the restaurant's PickMe Food and Uber Eats listings.
05
Private dining
An enquiry form for birthdays and office dinners, with set-menu options and a deposit.
06
Find us
A map, parking notes and the nearest landmark, because Colombo addresses are hard to find.
Deliverables
Project deliverables
- A clickable prototype of the homepage, live menu with filters, reservation flow and events page, on desktop and mobile.
- A reusable menu card component and spice scale that could work for any Sri Lankan restaurant.
Lessons learned
For restaurants, the menu is the product page. Designing it as real content, not a picture of a printed menu, changes everything about how guests use the site.
Speed is part of hospitality: a site that loads instantly on mobile data feels as welcoming as a quick greeting at the door.
Design concept: a self-initiated UI/UX study, designed and prototyped in Figma. The business and its details are illustrative.
Next project
04 / Mobile app & landing page
Ceylon Brew