Dilly’s Sandwiches

eCommerce, Featured, Restaurant Sites, Sandwich

Status:
Online
Client:
PopMenu
Established:
2024
URL:
dillyslb.com
Location:
CA, USA
Project Scope:
Website Dev & Design, UX Strategy, Custom CSS, Live Tap Integration

Project Overview

70s Garage Rock Meets Modern Deli

Dilly’s Sandwiches burst onto the Long Beach scene in 2024 as a fresh concept with a distinct vibe: made-from-scratch sandwiches, indie craft beers, and an energy infused with 70s garage rock. However, as a new business, they lacked a digital structure that could contain their big personality. They needed a website that wasn't just a menu, but a digital extension of their upbeat, community-driven atmosphere.

The mission was to translate their "good vibes only" aesthetic into a functional, mobile-responsive platform. We needed to engineer a site that balanced their quirky, bold visual identity with robust functionality for online ordering, event promotion, and real-time rotating beer lists.

Challenges & Goals

The Challenges

Complex Visual Identity: The brand required a specific modular aesthetic (inspired by Anna’s Joint) featuring rounded UI elements and checkered patterns that are difficult to execute responsively.

Cross-Browser Typography: The custom "Dilly" font presented rendering issues on iOS Safari, threatening the consistency of the brand voice across devices.

Dynamic Content: The beer menu changes constantly, requiring a solution that updates in real-time without manual daily entry.

The Goals

Visual Cohesion: Execute a bold design using the specific brand palette (#FFE8F9, #61BF6B, #D16769) to create an approachable, fun user interface.

Technical Stability: Solve the font compatibility issues via custom CSS and strategic fallback implementation (Google Fonts).

Growth Scalability: Build a flexible architecture that supports immediate needs (ordering/menu) and future revenue streams (merch/catering).

Strategy & Approach

Phase 1: Retro-Modern Design System

We embraced the 70s garage rock energy by implementing a "Modular Pop" layout. We utilized bold color blocking and repeated circle shapes to soften the grid, adding checkered patterns as texture to reinforce the retro deli vibe. The palette—Soft Pink, Vibrant Green, and Muted Red—was applied strategically to guide users toward high-value actions like "Order Online."

Phase 2: Technical Engineering

To solve the typography challenge, we implemented a robust font stack. We served the custom Dilly font for compatible browsers and engineered a seamless fallback to Fredoka One for iOS Safari, ensuring the playful personality remained intact on all devices.

Phase 3: Live Integration

For the craft beer program, we embedded a Live Tap List using a custom JavaScript snippet. We styled this external widget with custom CSS to match the site’s native aesthetic, ensuring the beer list felt like a seamless part of the brand experience rather than a plugged-in tool.

Solutions Delivered

Area	Highlight
Custom Typography	Engineered a CSS font stack with Fredoka One fallbacks to resolve iOS Safari rendering issues while maintaining brand voice.
Live Tap List	Integrated a JavaScript-based beer menu that auto-updates, styled with custom CSS to match the site's retro theme.
Visual Design	Created a modular, mobile-responsive layout featuring rounded buttons, checkered motifs, and bold color blocking.
Event Engine	Built a dynamic Events Calendar to showcase trivia nights and brewery collaborations, driving foot traffic.
SEO Copywriting	Crafted keyword-rich content targeting "made-from-scratch sandwiches in Long Beach" to boost local discovery.