Screenshot of the current live Philautia Palate homepage

PROJECT 01/ 07

Restaurant Website · UX/UI Design · Web DevelopmentCompleted & Deployed

Philautia Palate

A complete, responsive restaurant website designed and developed for Philautia Palate, creating a warm and engaging digital experience for discovering authentic homemade food. The website combines user-centred UX/UI design with modern web development to deliver clear navigation, structured menu discovery, responsive layouts and a seamless customer journey across devices.

Scroll or swipe to continue

Project Information

Role, scope and tools

Role: Product DesignerScope: UX · UI · Development

HTMLCSSJavaScriptTailwind CSSStripe CheckoutResponsive Web DesignUX/UI Design

Project Context

The Philautia Palate desktop homepage — a black-and-gold identity introducing the homemade food proposition.

01 · Restaurant Website · UX/UI · Product Design

Philautia Palate

Philautia Palate is a premium digital experience created for an Indian homemade restaurant, bringing authentic food, warm hospitality and a modern ordering journey together in one polished web experience.

The experience is designed to help customers discover the menu, understand the food offering, explore dishes visually and move naturally from browsing to ordering.

Focus on

Authentic homemade food presentation

Clear menu discovery

Strong food photography

Simple customer journeys

Responsive digital experience

Ordering and checkout usability

Premium restaurant brand presentation

StatusCompleted & Deployed

Live Websitephilautiapalate.tphilautia.com →

02 · At a Glance

Project Information

Key Features

Menu DiscoveryFood CategoriesProduct CardsOrdering FlowBasket & CheckoutResponsive LayoutWhatsApp / Contact Integration

RoleProduct Designer

ScopeUX Strategy · UI Design · Frontend Development · Responsive Design

Project TypeRestaurant Website · Digital Ordering Experience

TechnologyHTML · CSS · JavaScript · Tailwind CSS · Server-side Stripe Checkout

03 · Website Preview

The live restaurant website

Philautia Palate is a single-page restaurant website: a black-and-gold hero introduces the brand, then the page flows through featured favourites, the full homemade menu, desserts, frozen foods, cakes, bakes and set menus, before finishing with ordering and contact. The previews below are taken from the live site.

Philautia Palate desktop website — hero, story and menu in one continuous page — Desktop · Homepage

Philautia Palate homepage featured favourites and homemade goodness sections — Desktop · Featured Favourites

Sections on the page

HomeOur StoryFeatured FavouritesDishes / MenuDessertsFrozen FoodsCakesBakes & SnacksSet MenusGalleryHow to OrderContact

04 · Design Process

From discovery to a working website

The website was shaped through a clear sequence of design and build stages, from understanding the restaurant to testing the finished ordering journey.

01

DiscoveryDefined the restaurant experience, the customer needs and the business objectives.

02

Information ArchitectureStructured the single-page layout and organised the menu into clear food categories.

03

User FlowsMapped the browsing, basket, checkout and WhatsApp ordering journeys.

04

Visual DesignDeveloped the black-and-gold identity, the Playfair Display / Poppins type system, dish cards and spacing.

05

Frontend DevelopmentBuilt the interface as reusable, responsive components with structured menu data.

06

Ordering & CheckoutConnected the basket, checkout panes and the Stripe-ready payment architecture.

07

Testing & RefinementReviewed responsive behaviour, navigation, interactions and the key customer flows.

05 · Key Features · Menu Browsing

Making a large homemade menu easy to explore

The menu is structured around familiar food categories so customers can quickly understand the offering and discover dishes without feeling overwhelmed.

The live site presents a complete homemade menu of 89 dishes, rendered from structured data and kept consistent across categories.

Philautia Palate menu — homemade Bengali dishes and prices on the desktop layout — Menu · Homepage Section

Philautia Palate menu section on a tablet viewport — Tablet · Menu

Philautia Palate mobile menu layout with dishes stacked for mobile reading — Mobile · Menu

Food categories

AppetisersChickenBeefLamb & MuttonPrawnEggVegetarianGraviesPulaw & BiryaniBreadDeshi ChineseDessertsFrozen FoodsCakesBakes & SnacksSet Menus

06 · Key Features · Ordering & Cart

From dish to basket

Every dish has an add-to-order action that feeds a persistent basket, so customers can build an order as they browse and always see what they have selected.

Philautia Palate basket and order review screen on the desktop site — Desktop · Basket & Review

Philautia Palate mobile basket widget open over the homepage — Mobile · Basket

The ordering journey guides customers through

01Browse the menu

02Select a dish

03Review the item

04Add items to the order

05Review the basket

06Continue to checkout

The basket keeps a running total with quantity controls and a clear action, and a dedicated mobile basket bar keeps it within reach on smaller screens.

07 · Key Features · Checkout & Payment

A structured checkout experience

The checkout is arranged as clear steps — review, details, payment and confirmation — collecting the information required to process an order while keeping the interface simple and easy to understand.

Philautia Palate checkout details step with collection selected and a pickup time — Desktop · Collection Details

Philautia Palate checkout details step with delivery selected, address and contact fields — Desktop · Delivery Details

Philautia Palate checkout payment step showing the order summary and secure payment action — Desktop · Payment Step

Philautia Palate mobile checkout details step with delivery selected — Mobile · Checkout

Checkout collects

Customer name

Contact number

Email

Collection or delivery selection

Pickup time or delivery address

Order notes

Order summary and total

WhatsApp order option

Secure card payment step

Implemented and live: the basket, customer details, collection/delivery selection, order review and the Order on WhatsApp route. Built but not yet live: secure card payment, which is a server-side Stripe Checkout flow — the checkout server and Stripe keys are not connected on the current deployment, so the payment step reports that online payment is unavailable and points customers to WhatsApp. A payment is only ever shown as successful once the provider confirms it.

The checkout screenshots show the interface with sample data.

08 · Responsive Design

Designed for every screen

The experience was built with responsive behaviour in mind so customers can browse the menu and interact with the ordering journey across desktop, tablet and mobile devices.

Philautia Palate restaurant website on a tablet viewport — Tablet · Homepage

Mobile · Homepage

The mobile homepage opens with the brand and a food-led welcome.

The responsive system maintains

Readable typography

Flexible food imagery

Consistent spacing

Touch-friendly controls

Responsive menu layouts

Mobile-friendly checkout

09 · Design Decisions

How the design supports the restaurant experience

Each decision — from layout and type to colour and navigation — is made to make homemade food feel appetising and to keep ordering simple.

Brand · Colour & Type

The black-and-gold identity carried through the restaurant website.

Decisions

Layout — a food-first, single-page hierarchy leads with the brand and signature dishes, then flows through the menu, cakes, snacks and set menus before ordering and contact.

Typography — Playfair Display gives headings a warm, editorial restaurant feel, while Poppins keeps dish names, prices and instructions clear.

Colour — a black and metallic-gold identity (#070707 and #D4AF37) with warm white text lets the food photography carry the colour.

Navigation — a sticky header with anchored sections (Home, Our Story, Dishes, Frozen, Desserts, Cakes, Bakes & Snacks, Set Menus, Gallery and Contact) keeps the site easy to move through.

Ordering — Call and WhatsApp actions stay one tap away, and the basket remains visible while browsing.

Food photography — generous imagery and consistent dish cards make the homemade menu the focal point.

10 · Technical Approach

From design system to working product

The project combines UX/UI design thinking with frontend implementation to create a complete digital restaurant experience.

The website is a responsive single-page build with structured menu data, reusable interface patterns and a server-side Stripe Checkout flow for payment.

Technology

HTMLCSSJavaScriptTailwind CSSStructured menu dataServer-side Stripe CheckoutResponsive Web Design

11 · Project Outcome

A complete digital restaurant experience

Philautia Palate brings brand identity, food discovery, responsive UX and online ordering into one cohesive digital experience.

The result is a restaurant website designed not only to showcase food, but to help customers move naturally from discovering the restaurant to selecting dishes and completing an order.

Key outcomes

Stronger digital restaurant presence

Clearer menu discovery

Project Status

StatusCompleted & Deployed

Project TypeRestaurant Website · Digital Ordering Experience

RoleProduct Designer

TechnologyHTML · CSS · JavaScript · Tailwind CSS · Server-side Stripe Checkout

Final CTA

Explore the Philautia Palate experience

A complete restaurant experience where authentic homemade food meets thoughtful digital design.

VIEW LIVE WEBSITE →Start a Project →View All Projects →

Next →Sharafina's Kitchen