Metta Restaurant Homepage Redesign
A homepage design proposal for a multi-cuisine restaurant platform, aimed at increasing reservation conversions and establishing a premium brand image.
TL;DR for recruiters
- Role
- Web Designer (solo)
- Timeline
- July 2024 (2 weeks)
- Tools
- Figma, Miro, Adobe Photoshop
- Project type
- Concept project — Figma prototype + slide deck
Outcome
A 7-section homepage and design-system proposal for a multi-cuisine restaurant, optimized around two user types (adventurous foodies and busy professionals) and reviewed with three UX experts. WCAG 2.1 AA compliance built in.
This is a concept project, not a shipped product — there are no live business metrics. The percentages cited in the research and decisions sections below are industry benchmarks that informed the design, not measured outcomes.
Problem framing
Metta needed to differentiate in a crowded multi-cuisine market while facilitating seamless reservations. The initial brief lacked a clear value proposition and a defined booking flow.
My approach
Research-driven: 12-source trend analysis, 3 in-depth competitor audits, dual-persona strategy, and three rounds of expert review. The result balances exploratory storytelling for foodies with efficient decision-making for busy professionals.
Industry benchmarks I designed against
- 57% of restaurant traffic is mobile → mobile-first responsive layout.
- 94% more engagement with high-quality imagery → food-first visual hierarchy.
- 68% higher conversion with persistent CTAs → sticky navigation with a permanent "Reserve Now" button.
These are industry benchmarks the design responded to — not Metta-specific results.
Context & Challenge
How to design a homepage that can attract the target audience and facilitate an easy reservation process, while reflecting Metta's identity as a premium multi-cuisine restaurant?
- Increase conversion rates for online reservations.
- Build a brand image as a premium culinary destination.
- Attract a target audience that values quality and culinary diversity.
- Find restaurant information quickly and easily.
- Preview menus and popular dishes.
- Make a reservation through a smooth and efficient process.
- Understand the restaurant's atmosphere and value proposition.
Research & Discovery
Understanding the landscape to build a research-backed design strategy.
I analyzed 3 high-end multi-cuisine restaurants to identify strengths, weaknesses, and opportunities. This informed Metta's strategic positioning.
The Cheesecake Factory
P.F. Chang's
Nobu
Key Takeaway: Metta's unique position is as a premium, multi-cuisine experience that combines Nobu's sophisticated aesthetic with P.F. Chang's storytelling, while offering curated variety that avoids the Cheesecake Factory's overwhelming menu breadth.
Based on research, I developed two primary personas to guide design decisions, ensuring the final product catered to both exploratory and efficiency-driven users.
Sarah, the "Adventurous Foodie"
Spends 15-20 minutes exploring, values high-quality visuals and storytelling. Her goal is discovery.
James, the "Busy Professional"
Makes decisions in 5-7 minutes, values efficiency, clarity, and easy booking. His goal is a confident, quick decision.
Design Process
From Research to Refinement
Research & Discovery
Competitive analysis, trend research, and persona development to understand the landscape and user needs.
Design & Prototyping
Creating wireframes, a visual mood board, and a cohesive design system for colors, typography, and iconography in Figma.
Expert Review & Iteration
Submitting the design for expert critique, gathering feedback from 3 UX/UI professionals, and iterating on the design for improvement.
Key Design Decisions
Although premium restaurants often favor dark themes, I prioritized delivering core features over this aesthetic choice. This avoided significant accessibility work and allowed focus on mobile-first design, high-quality imagery, and clear CTAs, while a gold accent maintained a premium feel.
To cater to the "Busy Professional" persona who values efficiency, a sticky navigation bar with a "Reserve Now" button was implemented. This sacrifices minor screen real estate but significantly reduces cognitive load and provides a constant, easy path to conversion.
Recognizing that visual appeal is a primary decision factor, the design prioritizes high-quality food photography. This approach instantly communicates the value proposition and is more persuasive than copy alone, catering to both user personas.
Final Designs
Reflection & Learnings
This project was a valuable exercise in balancing aesthetic goals with user-centric functionality under tight constraints. The research-driven approach proved essential, as insights from competitive analysis directly informed key design decisions, such as prioritizing a mobile-first layout and a food-first visual hierarchy.
One of the main challenges was the lack of direct user testing. To mitigate this, I relied on established UX patterns and sought feedback from multiple UX experts, which led to crucial iterations on design system consistency and value proposition clarity. This taught me that even without formal testing, leveraging expert reviews and documented best practices can significantly elevate a design.
Key Learnings:
- Ruthless Consistency is Key: Small inconsistencies in a design system (like button radius or color usage) can diminish the perceived quality. A tight, well-defined system is crucial for a professional finish and smoother development handoff.
- Clarity Over Ambiguity: A value proposition must be understood within seconds. Iterating on the hero copy to be explicit about the offering ("Multi-Cuisine Fine Dining") was a critical change that eliminated user confusion.
- Prioritize for Impact: When faced with constraints, every design decision must be a strategic trade-off. Choosing to implement a sticky navigation CTA over a purely aesthetic dark mode was a decision to prioritize measurable conversion goals over visual trends.