The Winchester Grill & Saloon

Bar, BBQ, eCommerce, Featured, Restaurant Sites

Status:
Online
Client:
PopMenu
Established:
2025
URL:
winchestersgrill.com
Location:
TX, USA
Project Scope:
Website Redesign, Brand System, Mobile Optimization, OLO Integration

Project Overview

Preserving the Pub Soul, Upgrading the Engine

The owners of The Winchester Grill & Saloon in New Braunfels had a clear mandate: keep the classic English pub vibe that locals loved, but make everything else—ordering, browsing, and editing—easier. Their existing site was visually dated, struggled on mobile devices, and failed to fully leverage modern Online Ordering (OLO) tools.

The mission was to modernize the user experience without sanitizing the brand's character. We needed to build a site that retained the warm, welcoming atmosphere of the physical location while deploying a "21st-century engine under the hood" that empowered the staff to manage content without developer intervention.

Challenges & Goals

The Challenges

Inconsistent Branding: The legacy site suffered from mixed fonts, clashing colors, and oversized images that diluted the "classic pub" identity.

Mobile Friction: Poor responsiveness and slow load times on 3G networks were frustrating guests and driving up bounce rates.

Operational Drag: Scattered CTAs and manual menu editing processes created unnecessary work for the staff and confusion for the user.

The Goals

Brand Systemization: Audit the visual identity to build a cohesive system using Crown Gold (#F1C548) and Deep Teal (#1F3C4A) paired with Amarante display fonts.

Mobile-First Performance: Rebuild the layout using flex-grids and mobile-only image suppression to cut load times in half.

Conversion Focus: Consolidate navigation into a "sticky" CTA bar with context-aware buttons ("Order Now," "Book a Table") to drive measurable OLO conversions.

Strategy & Approach

Phase 1: Technical Styling & SCSS

To solve the branding inconsistencies, I built a custom SCSS component library. This allowed us to override Popmenu defaults securely. We fixed layout issues by converting columns into flexboxes, ensuring the Lion-and-Crown logo remained perfectly centered and uncropped on all devices.

Phase 2: Performance Engineering

We adopted an aggressive mobile optimization strategy. By writing media queries to switch off heavy background images on screens smaller than 768px, we achieved a 35% data saving for phone users. We also implemented Cloudflare image resizing and lazy-loading to ensure the pub vibe didn't come with a lag.

Phase 3: Accessibility & Hand-off

We ensured the new design wasn't just pretty, but compliant. We re-mapped header tags to satisfy accessibility rules and ensured all key text met a 4.5:1 contrast ratio. Finally, we recorded Loom walkthroughs to train staff on the new dynamic menu blocks, handing over full control.

Solutions Delivered

Area	Highlight
Visual Design	Created a custom "Pub & Crown" theme using #F1C548 Gold and Amarante typography to modernize the classic aesthetic.
Performance	Implemented mobile-only image suppression and Cloudflare resizing, reducing data load by 35% on smartphones.
UX & Navigation	Consolidated scattered links into a "Sticky CTA Bar" with context-aware buttons to guide users to ordering and booking.
CMS Empowerment	Migrated static lists to Popmenu’s dynamic menu blocks, allowing staff to update weekly specials inline without code.
Analytics	Configured GA-4 event tracking and OLO goals to provide the owners with clear visibility into their sales funnel.