Status:
Online
Client:
PopMenu
Established:
2024
URL:
Location:
CA, USA
Project Scope:
UI/UX Design, Front-End Development, SEO Strategy, OLO Integration
Alvaro Morales
- Residence:Honduras
- City:San Pedro Sula
- Gender:Male
- Age:29
- Spanish:Native
- Englsih:C2 Proficient
- German:B2
- French:A1
Habana Express Cuban Restaurant & Bakery
Bakery, eCommerce, Latino Food, Restaurant Sites
Project Overview
Bringing the Heat of Havana to the Bay Area
Opening its doors in 2024, Habana Express set out to bring authentic Cuban flavors and freshly baked Caribbean pastries to Pleasant Hill, CA. While the physical location buzzed with energy, the brand lacked a polished digital counterpart. They needed an online presence that could translate the vibrant culture of Havana—bright colors, brick textures, and bold flavors—into a clean, functional interface.
The mission was to engineer a high-energy digital storefront. We needed to capture the restaurant's authentic spirit without overwhelming the user, creating a seamless pathway for hungry locals to order medianoche sandwiches, book catering, and sign up for VIP updates.
Challenges & Goals
The Challenges
Brand Translation: Capturing the chaotic energy of Havana (bright reds, yellows, and textures) within a clean, easy-to-navigate website structure was a delicate balancing act.
Technical Constraints: The client required unique design elements—like elliptical clip-paths and perfectly circular buttons—that required overriding the default CSS limitations of the CMS.
Local Invisibility: As a new entrant in 2024, the business had no search history and needed to rank quickly for specific terms like "best Cuban food in Pleasant Hill."
The Goals
Visual Identity: Develop a custom palette using Havana Red (#e83412) and Yellow (#e8e71c), anchored by brick textures to mirror the physical restaurant's decor.
Action-Driven UX: Prioritize three primary Calls-to-Action (Order, Menu, Catering) in the hero section to drive immediate engagement.
Search Authority: Craft SEO-optimized copy telling the story of the Cuban heritage to boost local rankings and drive foot traffic.
Strategy & Approach
Phase 1: Visual Identity Definition
We pulled the palette directly from the logo, pairing bold colors with white and black brick textures. We selected Bungee for headers to provide a retro, sign-painted feel, balanced by Inter for body copy to ensure readability. This combination captured the "fun" of the brand without sacrificing professional polish.
Phase 2: Custom CSS Engineering
To break the "template" look, I wrote custom SCSS overrides. This included creating a unique white elliptical clip-path to frame the CTA section and forcing image buttons into perfect 150px circles. These technical tweaks gave the site a bespoke feel that standard drag-and-drop tools couldn't achieve.
Phase 3: Content & SEO
We wrote engaging copy that highlighted menu staples like pastelitos and Cuban coffee. By structuring headings and alt-tags around keywords like "Authentic Cuban Dishes in Pleasant Hill," we signaled relevance to search engines, ensuring the new site would be found by local foodies.
Solutions Delivered
| Area | Highlight |
|---|---|
| Visual Design | Implemented a vibrant "Havana Energy" theme using #e83412 and #e8e71c with brick textures to match the interior design. |
| Custom Styling | Engineered CSS clip-paths and border-radius overrides to create unique, circular navigation elements not native to the CMS. |
| Conversion UX | Designed a full-width hero with three prominent, equally weighted buttons (Order, Menu, Catering) to segment traffic instantly. |
| Lead Generation | Built a high-contrast VIP signup section on a black-brick background to aggressively drive email capture. |
| Local SEO | Optimized site content and metadata to rank for niche keywords like "Caribbean Bakery," effectively targeting the Walnut Creek area. |
Results & Impact
Eugenia
Manager
“The dual-language option handles switching between English and Spanish instantly. Essential for our community and perfectly executed.y already in place.”
+40%
Online Orders
In the first month post-launch, the streamlined UX and clear Call-to-Action buttons drove a significant surge in digital order volume.
Page 1
Search Ranking
Within just six weeks, the site achieved first-page Google rankings for the target keyword "Cuban restaurant Pleasant Hill."
3 Weeks
Speed to Market
The efficient design and migration process allowed the site to go live in time for the grand opening, capturing initial market buzz.
Screens & Layouts
Kevin
Owner
“I finally feel like our website works as hard as our kitchen.”
