Stacked Sandwich Co.

eCommerce, Featured, Restaurant Sites, Sandwich

Status:
Online
Client:
PopMenu
Established:
2025
URL:
stackedpc.com
Location:
UT, USA
Project Scope:
Website Dev & Design, UX Strategy, OLO Integration, Catering Funne

Project Overview

Building a Hero in Park City

Stacked Sandwich Co. entered the Park City dining scene with a bold promise: sandwiches "stacked" with house-made meats and big flavor. However, just months after opening, they realized their digital presence didn't match the vibrancy of their food. They faced the challenge of translating a fun, colorful brand personality into a functional website without sacrificing usability or speed.

The mission was to build a mobile-first platform that served as a high-conversion engine. We needed to synthesize an extensive stylistic wishlist—including wavy textures and complex navigation—into a cohesive, lightning-fast experience that turned casual browsers into loyal "Heroes."

Challenges & Goals

The Challenges

Complex UI Requirements: The client provided a specific wishlist including centered-logo navigation, split backgrounds, and wavy hover effects, which are notoriously difficult to implement responsively.

Mobile Fidelity: Maintaining the visual impact of a two-column desktop menu and heavy graphical elements without ruining the mobile user experience.

Brand Translation: The brand needed to feel "fun and colorful" (Navy, Sky, Herb Green, Cheddar Orange) without crossing the line into chaotic or messy.

The Goals

Interactive Visuals: Re-create wavy underlines and animated borders using pure CSS to keep the site lightweight while delivering the requested aesthetic.

Conversion Focus: Implement an always-visible "Order Now" button and a specific "Become a Hero" loyalty dropdown to drive immediate action.

Catering Growth: Architect a dedicated landing page with a sticky CTA to aggressively capture leads for corporate and private events.

Strategy & Approach

Phase 1: Brand Engineering

We distilled the brand's bold personality into an accessible digital palette featuring Navy (#2A526E), Cheddar Orange (#FFA14A), and Toasted Gold. We paired the bold Heavitas display font with Montserrat for body copy, creating a typographic hierarchy that feels both playful and professional.

Phase 2: Technical UX Design

To meet the client's navigation requirements, we built a stationary navbar with the logo anchored in the absolute center. We engineered a dropdown for the loyalty flow using precise CSS (translateX(-50%)) to ensure perfect alignment across devices. Fluid percentage-based units replaced fixed pixels, ensuring the layout breathed correctly on all screen sizes.

Phase 3: Performance & Interaction

We replaced heavy image assets with Pure CSS solutions for wavy borders and hover animations, keeping overhead low. For the menu, we designed a responsive grid that displays as two columns on desktop but collapses gracefully into a swipe-friendly single column on mobile, ensuring the "Order Now" path remained frictionless.

Solutions Delivered

Area	Highlight
Visual Design	Implemented a custom theme with rounded corners, shadowed buttons, and a lively 5-color brand palette to match the shop's energy.
CSS Animation	Developed lightweight, code-based wavy hover effects and animated ingredient icons to add delight without drag.
Navigation UX	Engineered a complex centered-logo navigation bar with a high-contrast, animated "Order Now" CTA.
Catering Engine	Built a dedicated landing page featuring a custom CSS "stacked sandwich" illustration and sticky call-to-actions.
Performance	Optimized the site architecture to achieve sub-2-second load times by lazy-loading media and optimizing background attachments.