Anheuser-Busch

The Problem

The MyCooler app — Anheuser-Busch's loyalty MVP already live on iOS and web — didn't represent the brand accurately or well. Built quickly as a beta, it had limited functionality, clunky interactions, and subpar readability and consistency. The core concept was genuinely compelling: loyal customers could scan purchase receipts to earn points, redeemable across physical touchpoints like bars, sporting events, and in-venue QR codes. But the application experience didn't match the ambition of the idea.

The challenge was compounded by brand complexity. Anheuser-Busch's portfolio spans Michelob Ultra, Budweiser, Stella Artois, and hundreds of sub-brands — each with distinct color systems, messaging tone, and content types. A design system that could accommodate all of them without becoming overwhelming or inconsistent required a clear architectural decision from the start.

When I joined, there was no documentation to work from — no brand guidelines, no asset library, no specification for how the MVP had been built. I was the lead and only designer on the project. I had to dive in and discover everything.

Design Process

The work moved through a deliberate sequence: grid → typography → color → components → hi-fidelity prototype. Each layer had to be resolved before the next one could be built on top of it.

Grid System

I built a new grid structure from scratch, referencing standard breakpoints across mobile, tablet, and desktop. Containers were the priority — having a solid structural framework meant that every page and component could be assembled in a modular, adaptable way. This alone was an elevation over how the application had been functioning.

Typography

I selected a type system and worked through the atomic relationships — how the sizes fit together, what spacing existed between them, how white space could serve readability for the target demographic. The goal was a scale that a developer could build from precisely, not a loose collection of sizes applied by feel.

Color

I reduced the existing palette from 17 colors down to 9. Saturated, high-contrast primaries were chosen to both resonate with the Anheuser-Busch brand and visually distinguish the app as its own sub-brand — with an eye toward intriguing a younger demographic. The original brand colors were retained as accents, keeping the palette familiar to existing customers while giving the product a cleaner, more intentional visual presence.

Components in Sketch

This work was done in Sketch — Figma hadn't yet established its current reputation. That meant individually mapping every margin, column, padding, and spacing value by hand. The documentation was thorough enough that the Director pushed back at one point, saying I was spending too long on button states. My position was that leaving things open to interpretation during a build creates confusion; the detail was there so engineers could build with minimal oversight. He reluctantly agreed. The quality of what got handed off validated that call.

High-Fidelity Prototype: Referral Flow

The Director initially said not to build high-fidelity screens — we needed to deliver the system, not full comps. My view was that the client needed to see the components working together holistically to understand the direction and trust the decisions being made. I proposed spending a couple of hours putting together a referral flow — a specific flow the client had identified as important — to show how all the pieces came together. If the client didn't respond well, I'd drop it. The Director reluctantly agreed.

The following day, I walked the client through the documentation and the screens. The reaction was immediate — they said they could now see the direction clearly, understand how the colors were being applied, and read the design decisions holistically. Afterward, in the debrief, the Director told me it was a good call. Taking that initiative, going slightly beyond scope to build confidence and alignment with the client, was one of the more meaningful moments of the project.

Validation

High-Fidelity Prototype

The referral flow prototype served as the primary validation mechanism — taking the design system out of documentation and showing it applied to a real, client-identified user flow. The client's positive reaction confirmed that the color choices, component decisions, and overall direction were reading as both distinctly AB InBev and visually fresh. It aligned the team on what was being built before build decisions locked in.

Client Alignment Sessions

Regular client calls throughout the engagement — with the Director of UX at Wunderman Thompson, the client directly, and a second designer later brought onto the team — provided ongoing validation checkpoints. Having another designer ask questions during client calls filled in gaps that deep documentation work can create when you're too close to the details.

Retrospective

In hindsight, the project would have benefited from stepping back earlier to validate the core MyCooler concept itself — not just the design system. A one-week interview guide, one week of customer interviews, and one week of prototype testing around the receipt-scanning mechanic and physical touchpoint ideas (scanning a QR at a bar, a receipt at a stadium) could have surfaced whether the concept was valid before committing to the full build. The design system was elevated, but the more impactful question — whether customers would use it — was left unanswered.