Mason Ale Works
How I redesigned Mason Ale Works’ website into a mobile-first, high-performing experience that better serves both distributors and customers, while evolving it into a true marketing engine.
Overview
Mason Ale Works is a craft beer company based in San Diego, CA with a global distribution footprint and a growing tasting room presence.
With more than 80% of website traffic coming from mobile devices, the brand needed a mobile-first experience that could serve two distinct audiences: B2B distributors seeking product and partnership information, and B2C customers looking to discover beers, events, and taproom updates.
I led the strategic redesign to clarify messaging, improve usability, and better serve both distributors and customers—transforming the site into a streamlined platform that supports acquisition and drives tasting room traffic.
Key Takeaways
Customers needed a more intuitive mobile-first experience with clear paths to locations, events, and products. Distributors required a centralized space for partnership details and assets to reduce friction and save time.
Usability Pain Points:
The previous site had inconsistent visual hierarchy, outdated UI components, and repetitive navigation. On mobile, poor spacing reduced readability and discoverability, and low-visibility CTAs disrupted user flow.
Analytics Findings:
Analytics showed high bounce rates on event pages and navigation drop-offs. Distributors needed fast, task-focused answers, and assets at there disposal but the structure made key materials difficult to find.
User Behavior Insights:
Distributors struggled to locate essential forms and assets, causing delays, while customers faced a confusing experience that lacked clear brand storytelling and guidance on how to engage with Mason Ale Work’s products.
Research and Discovery
I analyzed user behavior, site analytics, and the existing information architecture to understand how visitors interacted with Mason Ale Works’ distribution channels and tasting room locations.
The Question:
How might we create an intuitive experience for Mason Ale Work’s users that allows better engagement from customers, while also streamlining and improving the overall expereince for how we work with other distributors and brands.
The Goal:
Design a modern, mobile-first website with a clear structure, stronger hierarchy, and direct pathways to events and beer releases—while rebuilding the distributor experience to streamline asset access and improve operational efficiency.
The Problem:
Mason Ale Works’ website was failing to meet core user needs. Customers faced an outdated, unclear experience, while distributors struggled to quickly access essential assets and materials needed to support partnerships and timely releases.
Define The Problem
The Solution
The solution focused on rebuilding Mason Ale Works’ website around two primary user groups: customers and distributors. A mobile-first, structured redesign unified product discovery, event engagement, and asset accessibility into a cohesive experience—balancing strong visual branding with clear, task-driven UX.
Key UX Decisions
Through early low-fidelity wireframes and prototype testing, it became clear that combining customer and distributor needs into a single flow created friction. The solution was to architect two distinct user pathways within one unified platform.
The customer experience serves as the primary, front-facing journey—focused on product discovery, events, brand storytelling, and marketing-driven engagement. In contrast, the distributor experience is accessed through a gated entry point, designed as a centralized resource hub for assets, partnership materials, and operational tools.
This dual-architecture approach allows for controlled access levels, scalable partner management, and clearer task-oriented flows—supporting growth while maintaining brand cohesion.
Implementation
I translated the high-fidelity Figma prototype into Wix Studio, implementing a mobile-first experience, streamlined distributor structure, and updated component system into a fast, responsive build across all devices.
Distributor Journey
Outdated UI with limited distributor resources, requiring repeated communication to access essential assets—creating delays, friction, and operational inefficiencies.
A modern UI interface with verified content, cleaner structure, and a streamlined distributor hub—enabling users to quickly access assets without back-and-forth.
Customer Experience
Cramped layouts, dated branding, and a fragmented UX journey that focused heavily on B2B distribution while offering little visibility into tasting rooms, and events.
Improved spacing, stronger visual hierarchy, and a mobile-first interface that makes tasting room details, events, and product discovery easy to navigate.
The Results
The redesigned website significantly improved usability across both customer and distributor journeys. Through clearer information architecture, streamlined user flows, and strategic marketing integration, the platform enhanced overall engagement while contributing to measurable revenue growth across channels.
Measured improvements
-60% increase in website traffic
-40% increase in event attendance
-Newsletter open rate improved from 15% to 45%
-They saw a 35% decrease in asset support request
-Verified, consistent content across all location pages
-Modern UI that improved readability and task completion
Web Design
The final result is a mobile-first platform built on refined information architecture, improved content hierarchy, and clearly defined user pathways for both customers and distributors. By aligning user intent with streamlined task flows and strategic marketing integration, the site now functions as both a brand storytelling tool and an operational resource hub. Explore the live website to see how thoughtful UX decisions translate into measurable impact.