Designing & engineering a cozy, human-centered responsive digital hub for LB Nagar.
Kahani Cafe Website
Case Study: Designing and engineering a high-converting, fully responsive vintage-modern digital hub.
Development Timeline
Develop a modern and engaging website concept for Kahani Cafe that reflects the café's brand identity and enhances its online presence.
- ✓ Conducted initial research on Kahani Cafe's branding and customer experience.
- ✓ Planned the website structure and user journey.
- ✓ Designed and developed the first rough version of the website.
- ✓ Created the initial layout, navigation, and homepage sections.
- ✓ Established the overall visual direction, including typography, color palette, and content placement.
Refine the initial design into a polished, production-ready website.
- ✓ Completed the full website design and development.
- ✓ Improved the UI/UX for a smoother and more intuitive user experience.
- ✓ Refined layouts, spacing, and visual hierarchy across all sections.
- ✓ Optimized the website for responsive viewing on desktop, tablet, and mobile devices.
- ✓ Added final content, imagery, and calls-to-action to improve customer engagement.
- ✓ Performed final quality assurance checks and resolved design inconsistencies.
Successfully delivered a modern, responsive, and visually appealing café website that effectively showcases Kahani Cafe's brand, menu, ambience, and customer experience while providing visitors with a seamless browsing experience across all devices.
The Color Palette
Espresso Core
Copied!Dominant deep chocolate color used for headlines, card borders, key icons, and primary text.
Cafe Cream
Copied!Signature soft off-white canvas used as the background of major sections to establish cozy hospitality vibes.
Spiced Terracotta
Copied!Energetic secondary accent used for primary CTAs, reservation actions, dynamic select highlights, and labels.
Warm White Card
Copied!Bright cream background utilized specifically for inner cards to pop against the Cafe Cream base canvas.
Espresso Dark
Copied!Ultra-dark roast color reserved for high contrast text blocks, footer layouts, and deep active-shadow elements.
*Click on any color block above to copy the Hex color code to your clipboard instantly.
Typography Scale
Bricolage Grotesque
Utilized for slogans, core headings, and title representation. Thick, rounded, quirky contours evoke a friendly, hand-crafted hospitality vibe.
Playfair Display
Employed for reviews, blockquotes, and vintage text overlays, introducing classic charm alongside editorial warmth.
Plus Jakarta Sans
Default text family for descriptions, navigation elements, metadata, and buttons, maintaining readability and density on mobile screens.
User Experience & Architecture Decisions
To honor Kahani Cafe's identity, the architecture of the website emphasizes storytelling and direct-to-action interactions. Key interface blueprints were developed around local dining behavior:
Direct Sticky Booking
Reservation table flow is accessible instantly from the sticky header, minimizing user path lengths to book.
Interactive Breakfast Swapper
Instead of standard static menus, the breakfast specials card allows smooth dynamic swapping of imagery & content overlays.
Bento Grid Signature Foods
Six core food pillars are presented in a high-density, full-bleed hover grid, triggering hunger responses immediately.
No-Bloat Client Scripts
Implemented vanilla JavaScript structures with direct DOM nodes manipulation, achieving close to zero hydration delays.
Design system components map pixel-to-pixel with the branding layouts crafted in the initial research phases.
