Bread Story Cafe
Project Overview
This was a personal project I designed and developed for Bread Story Cafe, a cozy coffee shop in the Philippines. I wanted to create a website that reflects their warm, rustic meets industrial charm and makes their brand feel as good online as it does in person.
After visiting the cafe several times, I noticed they had no online presence and customers often asked about their menu and availability. I saw an opportunity to help them establish a digital footprint that would solve real problems I observed during my visits.
Project Details
Real Problems I Observed
During my visits to Bread Story Cafe, I noticed several pain points that a website could solve. Customers constantly asked staff about the menu, especially what was available that day. There was a lot of back-and-forth about drink availability, and people often wanted to know about vegetarian options or spicy items before visiting. The cafe also needed a way to share their exact location, hours, and payment methods.
The biggest issue was the constant questions about daily menu availability - staff spent a lot of time answering the same questions over and over.
My Solution
Bread Story Cafe needed an online presence that would reduce repetitive questions, showcase their menu clearly, and help customers find them easily. They also needed a way to communicate daily availability and dietary information.
I designed a warm, inviting website that puts their menu front and center, includes clear dietary indicators (vegetarian, spicy), and provides all the practical information customers need. The design captures their rustic industrial vibe while being easy to navigate on mobile devices.
What I Built
Mobile-First Menu
Easy-to-read menu with clear dietary indicators (vegetarian, spicy) and daily availability updates to reduce customer questions.
Clear Location Info
Prominent display of exact address, operating hours, and accepted payment methods to help customers plan their visits.
Brand Personality
Design that captures their rustic industrial aesthetic with warm colors and authentic photography that feels like the real cafe.
Mobile Optimized
Responsive design that works perfectly on phones since most customers check menus on mobile while on the go.
Visual Menu
Beautiful photos of their breads and drinks that help customers know what to expect and get excited about visiting.
Future-Ready
Designed with future features in mind like QR code menu access and real-time availability updates.
Future Features I'm Planning
QR Code Menu Access
QR codes on tables that customers can scan to view the menu directly on their phones - no more asking staff for menus.
- • Table QR codes for instant menu access
- • Mobile-optimized menu view
- • No app download required
- • Works for all customers
This would solve the biggest pain point I observed - the constant back-and-forth about what's available.
Real-Time Availability
Backend system where staff can quickly mark items as unavailable for the day, reducing customer disappointment and staff questions.
- • Easy staff interface to update availability
- • Real-time menu updates
- • Reduces customer questions
- • Better customer experience
How I Approached It
Observed Real Problems
Spent time at the cafe watching customer interactions and identifying pain points that a website could solve.
Researched Their Brand
Studied their Instagram and physical space to understand their aesthetic and brand personality.
Designed for Their Needs
Created a solution focused on the specific problems I observed, not just generic cafe website features.
Built with Future in Mind
Designed the structure to easily accommodate future features like QR codes and availability updates.
Technical Details
Next.js + Tailwind
Built with modern tools for fast performance and easy maintenance.
Mobile-First
Responsive design that works great on phones where most customers browse.
Custom Design
Tailwind CSS for full control over the design to match their brand perfectly.
Vercel Hosting
Fast, reliable hosting that's easy to update and maintain.
What I Learned
Real Problems Drive Better Solutions
Observing actual customer behavior and pain points led to a much more useful website than if I had just designed based on assumptions.
Local Businesses Need Simple Solutions
The cafe staff needed something they could easily update and maintain without technical knowledge.
Mobile-First is Essential
Most customers check cafe websites on their phones while deciding where to go, so mobile experience is crucial.
Future-Proofing Matters
Designing with future features in mind (like QR codes and availability updates) makes the website more valuable long-term.