SOBAN Korean Restaurant Website
Project Case Study
SOBAN Korean Restaurant Website
A modern restaurant marketing website for SOBAN in Toronto, built to communicate brand warmth, enable fast menu browsing, and drive conversions to visit or order online. Delivered in 1 month as a solo build.
View Live Project →Overview
SOBAN is a restaurant marketing website designed to do three things exceptionally well:
Communicate the brand tone immediately ("A Warm Bowl, Made with Heart")
Make menu discovery fast and predictable
Convert intent into real actions: visit, call, or order online
This project was delivered in 1 month as a solo build, optimized for a clean browsing experience on mobile and a low-maintenance deployment workflow.
Business Objectives
Establish trust quickly with a calm, premium brand presentation
Reduce friction for the most common user intent: "Show me the menu"
Help visitors scan categories and jump to what they want in seconds
Surface essential visit information (address, hours, contact) without digging
Route delivery and takeout intent directly to external ordering platforms
Audience and UX Constraints
Restaurant visitors arrive with high intent and low patience. Most of them want one of the following within the first few seconds:
browse the menu
confirm location and hours
order online
call quickly
The UX is designed around that reality. Navigation is intentionally minimal, and primary actions are repeated at natural decision points.
Information Architecture
The site follows a straightforward "discover → decide → act" flow:
Home (About Us): brand story, positioning, and primary CTAs
Menu: anchor-driven category browsing with scannable item blocks
Visit Us: location, hours, phone, and email in one place
Order Online: direct links to delivery and takeout platforms
Key UX Decisions
1) Menu-first conversion strategy
The homepage positions the menu as the main action with strong CTAs such as "Explore Menu" and "View Menu", reducing the time-to-content for first-time visitors.
2) Category shortcuts for fast scanning
Instead of forcing long scrolling, the homepage includes category entry points (Appetizers, Hansang Set Meal, Rice, Noodle, Stew, Vegetarian). This allows quick browsing and works especially well on mobile.
3) Anchor-based menu navigation
The Menu page uses a category anchor list at the top so users can jump directly to the section they want. This reduces scroll fatigue and makes the menu feel structured, not overwhelming.
4) Trust and safety note placed at the top of the menu
The allergy and dietary restriction note is surfaced early to reduce uncertainty and support faster decision-making, especially for groups.
5) Visit and Order as clear end states
Visit Us is presented with address, hours, and contact details in a compact block.
Order Online routes immediately to Uber Eats and SkipTheDishes to avoid custom checkout complexity and keep conversions simple.
Technical Implementation
Stack
| Area | Implementation | Notes |
|---|---|---|
| Framework | Next.js 15 + React 19 | Modern rendering and fast iteration |
| Language | TypeScript | Maintainable UI and content structures |
| Styling | Tailwind CSS 3 | Consistent layout and responsive design |
| Visual | Three.js | Lightweight 3D accent for brand presence |
| Nodemailer | Server-side email handling where needed | |
| SVG | @svgr/webpack | SVG assets managed as React components |
| Optimization | @next/bundle-analyzer | Bundle inspection to keep the site lean |
| Deployment | next export | Static export workflow for low-maintenance hosting |
Engineering Highlights
Reusable section patterns for consistent layout and fast content iteration
Performance hygiene with bundle analysis to prevent asset creep
Static export oriented delivery for simple deployment and stable runtime behavior
Clean component boundaries so menu updates and section edits stay predictable
Results and What This Demonstrates
Strong understanding of restaurant user intent and conversion design
Practical information architecture focused on speed and clarity
A modern Next.js + TypeScript + Tailwind implementation with performance discipline
A delivery approach optimized for small business operations and maintainability
Live: https://soban.servith.com/
Timeline: 1 month
Role: Solo delivery (IA → UI → deployment)