/ Overview
Wetzel’s Pretzels is a beloved American fast-casual pretzel brand, founded in 1994 in Pasadena, California and now with hundreds of locations across the United States and internationally. The brand specializes in hand-rolled soft pretzels served fresh daily, a variety of shareable Bitz and dips, signature Wetzel Dogs, and refreshing beverages like lemonade — all marketed as “Hand Held Happiness.
The Wetzel’s Pretzels Website Redesign project was created to modernize the brand’s digital presence by delivering a responsive, user-centric website that better communicates its brand personality, highlights menu offerings, and streamlines high-priority user tasks like finding a location, viewing the menu, accessing rewards, and placing orders. The design balances vibrant brand expression with clarity and usability, welcoming both loyal fans and first-time visitors.
/ Problem
Prior to the redesign, Wetzel’s Pretzels’ digital presence was not fully optimized to support the brand’s goals and user expectations. Key challenges included:
Unclear Information Hierarchy: Users struggled to quickly access core content like the full menu, rewards program, catering options, and store locator — all of which are crucial for conversion and engagement.
Mobile Experience Limitations: Given the on-the-go nature of quick service food seekers (mall shoppers, travelers, and families), the mobile experience needed more intuitive navigation and clearer calls to action across menu pages and interactive components.
Brand Expression: The existing site lacked the visual energy to fully convey Wetzel’s brand personality — its playful SoCal vibe, fresh-baked feel, and fun product variety (e.g., Original Pretzel, Cinnamon Bitz, Wetzel Dogs, frozen lemonades, and dipping sauces).
These challenges made it harder for users to complete key tasks — such as ordering online, joining the rewards program, or planning catering — and limited the site’s effectiveness as a marketing and conversion tool.
/ Design Process
The Wetzel’s Pretzels Website Redesign followed a user-centered, iterative process to improve clarity, usability, and brand expression:
a. Discovery & Brand Research
Brand Audit: I began by evaluating Wetzel’s existing digital footprint and offline brand experience, focusing on how the site could better reflect the brand’s fun, approachable identity and mouthwatering menu offerings.
User Goals: I identified primary user tasks such as exploring menu items, finding nearby locations, signing up for rewards, and learning about catering or franchise opportunities.
b. Information Architecture & UX Mapping
Content Hierarchy: Reorganized high-value content into clear user-focused categories — e.g., Menu, Order Online, Rewards, Find a Location, and Catering.
Navigation: Designed a simplified, sticky header and responsive navigation system that keeps primary actions visible across all devices.
c. Wireframing & Layout Structure
Low-Fidelity Wireframes: Sketched layouts to prioritize how content blocks and calls to action should be arranged, especially on mobile screens where space is limited.
Responsive Planning: Ensured all core interactions remained fast and intuitive from small to large viewports.
d. Visual Design & UI
Color & Typographic System: Developed a vibrant color palette and strong typography that aligns with Wetzel’s brand energy and improves readability.
Imagery: Integrated high-impact food photography to highlight signature pretzel products and drinks, reinforcing appetite appeal and brand personality.
Component Library: Built a reusable UI component system (cards, buttons, menus, icons) for consistency and scalability across the site.
e. Prototyping & Feedback
Interactive Prototype: Created a prototype to simulate key user flows (e.g., exploring the menu, locating a store, navigating rewards).
Iteration: Used usability feedback to refine interaction patterns, spacing, and visibility of high-priority actions like Order Now and Find a Location.
f. Final Design & Handoff
Delivered a polished set of responsive UI designs and a style guide detailing colors, typography, component behaviors, and responsive breakpoints.
Included interaction specs and design documentation to support smooth developer implementation and future updates.
