Café website landing page
Project summary
A single-page landing site for The Café designed to communicate a warm, handcrafted brand and drive two main actions: Reserve a table and Order featured items. Completed with ChatGPT’s assistance.
Key goals & users
- Convert local visitors into reservations or orders.
- Target: first-time searchers, locals deciding where to meet, and regulars checking the menu.
Core design decisions (brief)
- Color & imagery: deep coffee browns + warm orange CTA to evoke comfort and highlight actions.
- Hero: bold headline + large coffee photo to set the mood and encourage immediate action.
- Product cards: photo, price, short copy, and “Order Now” for quick comparisons.
- Testimonials: placed after products for social proof.
UX & accessibility highlights
- Clear visual hierarchy and touch-friendly CTAs.
- Alt text, focus states, and checked contrast for accessibility.
- Mobile-first responsive layout and image optimisation.
Metrics & next steps
- Track hero CTR, reservation conversions, and product orders. Run quick usability tests and A/B test hero CTA/image to lift conversions.
Opinion (concise)
Design balances emotion and conversion well — validate hero CTA with a simple A/B test next.
Reviews
2 reviews
Brewtifully done, Faizan! Did you extract this design from a perfectly roasted bean or what?
The warmth of the palette and the grounded vibe match the theme so well. The “Reserve a Table” CTA is clear and well placed, and the feature products section guides the eye naturally.
I think if you tone down either the color or the font size of the prices in the product cards, the hierarchy would be clearer. Right now the numbers are competing for attention, almost like someone poured the affogato right on top of the avocado toast 😋 and since one of the goals is to convert users to reserve a table, it would help to also provide photos of the café’s interior so it feels more inviting to visit.
With that extra attention, the design hits the right blend: smooth, bold, and clear.
The Cafe landing page looks warm and inviting. I like how the colors and imagery support the brand feeling while keeping the CTAs clear.
The layout is easy to follow, and the product cards make it simple for users to compare and act quickly. Accessibility and mobile-first design are well considered.
One suggestion is to A/B test the hero CTA and image to see if it can improve conversions.
Overall, a clean, user-friendly design that balances emotion and functionality.
You might also like
Homepage Dark Mode
MindfullNest Workshop
Settings Design | Finance
Pet Store App UI Design
ParkEase UX Design Casedstudy
Heuristic analysis
Popular Courses
Information Architecture
Design Composition
HTML Foundations
