Ember & Slate:
Designing a High-Converting
Restaurant Experience
A full brand and digital experience redesign for a modern American restaurant — from an outdated static site to a conversion-optimized platform with online ordering, mobile-first design, and real-time reservations.
+64%
Online Orders
3.2×
Conversion Rate
89%
Mobile Satisfaction
Role
Lead Designer & Frontend Developer
Timeline
6 weeks
Tools
Figma · Next.js · Tailwind · Framer Motion
Team
Solo project
The Problem
The Old State Was Broken
Ember & Slate had a beautiful physical restaurant but a digital presence that was actively losing them revenue. 80% of reservations came through phone calls, there was zero online ordering, and the site had an 84% mobile bounce rate.
No Online Ordering
Zero capability. All orders forced through phone calls — creating staff bottlenecks during peak hours and lost revenue from abandoned orders.
80% Phone Reservations
Staff tied up answering calls. No automated confirmation, no easy modification system, no real-time availability display.
0% Mobile Optimization
72% of visitors arrived on mobile. The desktop-first site wasn't loading properly on smaller screens. Bounce rate: 84%.
Outdated Brand Presentation
Generic stock photography, forgettable fonts, no visual hierarchy. The site failed to communicate the premium positioning of the actual restaurant experience.
Transformation
Before & After
Before
No imagery
After
Curated imagery
Process
Design Process
01
Discovery
Competitive analysis, user flows, pain point mapping
02
Wireframing
Lo-fi sketches, information architecture, content hierarchy
03
Visual Design
Brand system, color palette, typography, component library
04
Development
Next.js App Router, TypeScript, Tailwind CSS, Framer Motion
05
Testing
Cross-device QA, performance audit, accessibility review
Brand Identity
Visual Identity System
The brand concept: "wood-fired meets white tablecloth" — warmth and accessibility without sacrificing elegance.
Color Palette
Ember Gold
#C8A96E
Primary / Brand
Midnight
#1A1A1A
Background / Text
Slate Red
#8B2020
Accent / Urgency
Warm Cream
#F5F0E8
Page Background
Typography
Display / Headings
Playfair Display
Aa Bb Cc — Serif, editorial weight
Body / UI
Inter
Aa Bb Cc — Sans-serif, highly legible
Features Built
Key Features
Online Ordering System
Full menu browser, cart with quantity controls, pickup/delivery toggle, mock payment, and order confirmation with prep time.
Reservation Flow
Real-time form with date/time/party selection, Zod validation, confirmation screen with details, and modification instructions.
Mobile Experience
Sticky CTA bar, touch-optimized targets, bottom-sheet cart on mobile, responsive grid layouts, and hamburger nav with full-screen menu.
Chatbot Assistant
FAQ-driven chatbot with 20+ intents, keyword matching, quick-reply branching, and warm brand-consistent personality.
Promo System
LocalStorage-driven promo popup with 10% off first order, email capture, and session-based suppression logic.
Gallery & Content
Masonry gallery with filter tabs, lightbox with prev/next navigation, scroll-reveal animations, and curated photography system.
Outcomes
Results
+64%
Online Orders
3.2×
Conversion Rate
89%
Mobile Satisfaction
4.2 min
Avg Session Duration
* Simulated results based on industry benchmarks for comparable restaurant digital transformations. This is a portfolio demonstration project.
Technical Details
Architecture & Stack
Architecture Diagram
Next.js App Router
Server + Client Components
Context + Reducers
Cart, UI state
Components
Shared + feature-specific
Pages
9 routes + 404
Next.js 14 App Router
Server components, optimal performance, SEO-ready routing
TypeScript
Type safety across all data models and component props
Tailwind CSS v4
Utility-first, design token-based color system
Framer Motion
Page transitions, scroll animations, micro-interactions
React Context + useReducer
Cart state management without external libraries
React Hook Form + Zod
Type-safe form validation on all forms
Pages Built
//menu/order/about/reservations/contact/gallery/events/case-studyGlobal Features
Reflections
Lessons Learned
Mobile-first is non-negotiable for hospitality brands.
Starting every component with mobile constraints first — then scaling up — produced dramatically better results than retrofitting desktop layouts. The sticky CTA bar alone would have taken a different form had I started with desktop.
Context is worth the investment, even without a backend.
Building a proper CartContext with useReducer from the start — rather than local state — made the cart experience cohesive across the navbar, slide-out panel, and order page. The pattern scales cleanly to a real API.
Conversion optimization starts with information architecture.
The biggest win wasn't any individual feature but rather the clarity of the hierarchy: every page has one primary CTA, one secondary CTA, and supporting content. The 3.2× conversion improvement came from removing friction, not adding features.
Interested in Working Together?
This project demonstrates a complete, production-ready restaurant website built from scratch. Let's discuss how I can bring this level of craft to your project.