available for new projects
A&W Restaurants
Transforming A&W’s Mobile-First Website Experience
Project context
As A&W’s Agency of Record, we redesigned their mobile-first website to modernize the brand and remove friction from online ordering across a complex franchise system. With 80% of traffic on mobile, the focus was speed, clarity, and conversion.
Impact
16% Increase in orders per store
47% Increase in total online orders
OLO (online ordering partner) locations increased from 48 to 105
Accessibility-first UI maintained a 98+ Lighthouse score
Proposed brand-forward, playful UI directions grounded in cultural and competitive insights.
Design Goals
Design a Mobile-First Website That Drives Measurable Online Growth
01
Increase OLO performance so each location reaches more than 4.5 online orders per week.
02
Drive more new Mug Club sign-ups than on the previous site.
03
Support OLO adoption growth from 48 locations (Dec 2023) toward ~120 locations by end of 2024.
Problem
Users Came Ready to Order but Hit Unpredictable Roadblocks
On the previous site, users came to A&W’s site to find food and order. Instead, they encountered an experience that depended on internal franchise logic they couldn’t see. The “Order Online” button only appeared after setting a location, and that step lived in a banner most users ignored. Analytics confirmed the issue, only 4% used the banner and 10% used the location finder. The rest never reached ordering and often assumed A&W didn’t offer online ordering.
On top of that, the mobile experience didn’t match modern QSR (Quick-Service Restaurant) standards. Navigation felt distant, ordering cues were inconsistent, and key actions weren’t where thumbs naturally landed. This wasn’t just a UX issue. It was costing franchises orders, slowing OLO (online ordering partner) adoption, and lack to showcase A&W’s new branding.
01
Users came to order but couldn’t find an “Order Online” CTA.
02
Only 4% of visitors used the location banner, so most never unlocked ordering
03
Two carousels in the first view created clutter and reduced discoverability
04
“Franchise” CTA dominated hierarchy, competing with core actions like viewing the menu or ordering.
Problem Discovery
How the problem surfaced
01
Web Analytics Review
Mobile-first traffic, low location engagement, drop-offs before ordering
02
Experience Audit
Ordering, menu browsing, and Mug Club flows revealed friction
03
Competitive Analysis
QSR leaders and food apps showed clearer, more resilient mobile patterns
Design Decision 1
Making ordering visible from the first moment
I redesigned the flow so the site handled franchise complexity, instead of the user. Ordering became visible immediately, with location framed as a supporting step rather than a gate. This removed the false assumption that A&W didn’t offer online ordering.
Edge cases were intentionally designed:
If location failed to load, users still saw ordering paths
If a restaurant supported multiple providers or no delivery, the interface explained options clearly
Users were guided forward without dead ends or error-heavy states
Another impactful decisions was introducing a dedicated mobile bottom navigation. It anchored Order, Menu and Locations within thumb reach across the site. Combined, these changes turned a confusing journey into a predictable one and supported 16% increase in average weekly online orders per store after launch.
01
Home Page
02
Set Location
03
Locations
04
Order Online Alternatives
Design Decision 2
Prioritize hierarchy and tap comfort over showing everything at once
The menu experience was another major friction point, especially on mobile. On the old site, users had to scroll before understanding the full range of categories, which slowed decision-making and made the menu feel heavier than it needed to be.
I explored two directions. Option A exposed all categories at once but resulted in small tap targets and weak hierarchy. The final direction, Option B, introduced larger cards, clearer structure, and color-coded categories, improving scanability and accessibility for an older-skewing audience. The trade-off was intentional. One short scroll delivered a calmer, more legible experience that aligned with mobile patterns and brand expression.
Beyond the category view, the menu flow adopted patterns users already trust from food apps like DoorDash and Uber Eats. Those apps solve the “back-and-forth” problem we saw in competitor sites by allowing users to browse items and switch categories without leaving the page. We created a menu experience that felt familiar, fast, and purpose-built for mobile.
01
Before
PROS
Clear CTA buttons
CONS
Only two categories are visible at a time
Required scrolling to see all menu options
Heavy orange accents created visual noise
02
After - Option A
PROS
All categories visible at once
Simple, scannable layout
CONS
Not as thought-through hierarchy
Cards too small for comfortable tapping
03
After - Option B / Final and Flow
PROS
Consistent hierarchy across all categories
Color-coded categories strengthened recognition and brand identity
Easy to browse all items without extra navigation
Top category nav lets users jump quickly between sections
CONS
Not all categories visible at once
Design Decision 3
Bringing A&W’s Brand Personality
Menu with Character
Rooty’s hand pulls the menu into view, turning a routine navigation pattern into a warm, branded moment that appears across every page.
Onion Ring Parallax
A subtle parallax on the onion rings adds depth and playfulness while reinforcing our food-first brand story. Design compromise: We wanted this to be a designed parallax effect, but developer found a way to randomized per page load.
Bottom Navigation Icons + Motion
Custom icons and micro-animations improve mobile wayfinding while expressing A&W’s personality through color, shape, and motion.
Cheese Curd Stretch
The cheese-pull motion creates a small delight cue, bringing A&W’s signature crave appeal directly into the interface.
Accessibility
Accessibility Built Into Every Decision
Accessibility was a non-negotiable across the entire site, not a one-off consideration. Given A&W’s history with accessibility challenges and a mobile-heavy, older-skewing audience, we worked from a shared checklist covering semantic headings, alt text, tap targets, focus states, keyboard navigation, and accessible markup in partnership with developers.
A&W’s brand orange created real constraints. It’s iconic but difficult to use accessibly at smaller sizes. We tested contrast, typography, and color usage across real content and lighting conditions, prioritizing legibility without stripping the brand of its personality. Also, using an alternative orange in some cases.
The CTA system below is one example of how those trade-offs played out. Early options relied too heavily on background imagery and failed contrast checks. The final system established clear rules for primary, secondary, and tertiary buttons, with defined states that met accessibility standards while maintaining brand expression. This approach contributed to a 98+ Lighthouse accessibility score at launch.
Option A
Strong brand expression, but contrast depended too heavily on imagery and failed accessibility consistency.
Option B
Resolved contrast issues, but introduced visual heaviness that competed with the primary action on mobile.
Final
Clear hierarchy that preserved brand color while meeting contrast requirements across backgrounds.
Collaboration
Early alignment reduced rework and protected scope
This was my first agency project run in an agile cadence, with regular client reviews and frequent development meetings with the outsource partner.
I partnered closely with the Creative Director on hierarchy and brand expression and worked early with developers to validate feasibility around ordering logic and third-party integrations.
When constraints surfaced, including franchise variance and platform limitations, I reframed solutions to protect user outcomes and KPIs rather than pushing idealized concepts.
Retrospective
When Ordering Became Clear, Results Followed
16.3%
Increase in average online orders per store per week
47%
Increase in total online orders
105
A&W Restaurants on OLO (online ordering partner) grew from 48
18.6%
Increase in SMS Mug Club Subscribers
see also
