Brandon
Ramlet

01 CONTEXT

Designers shipped Figma files; engineers re-typed every hex code and spacing value by hand. The audit found 214 screens, 41 components — and six different opinions of the same button live in production. Every release drifted the brand a little further.

02 THE CHALLENGE

> How might we make one design decision propagate to every page — without a single handoff meeting?

03 THE SOLUTION

Every design decision became a semantic token that exists identically in Figma and Tailwind. What a designer applies in the tool is exactly what an engineer ships in the browser.

One shared component library

BEFORE

AFTER

Design decisions travel like code

04 IMPACT

Feature spin-up went from weeks to days — visual QA bugs nearly disappeared.

05 PROCESS LOG

1. Audit before opinion

   Inventorying 214 screens first made every consolidation argument a screenshot, not a taste debate.

2. Semantic tokens, not raw values

   color.brand.500 and space.4 travel across Figma, Tailwind, and docs — and survive rebrands.

3. Governance through pull requests

   Token changes ship as reviewable PRs: a change-log for design, predictability for engineering.

01 CONTEXT

In early 2021, cart abandonment was high, BOPIS lagged, and the mobile experience carried years of design debt. The moment of highest intent — “is it really on the shelf?” — was exactly where the product went quiet.

02 THE CHALLENGE

> How might we make the digital-to-physical handoff feel effortless at the exact moment a customer is ready to act?

03 THE SOLUTION

Global header, store selector, PLP, PDP, and checkout — redesigned around brick-and-mortar data so the store actively participates in the digital experience.

The store became a first-class feature

Quick Add, without leaving the shelf

One icon language, app to aisle

04 IMPACT

BOPIS turned from a detour into a driver.

05 PROCESS LOG

1. Comparative sessions, old vs. new

   Every iteration ran head-to-head against the flow it replaced — task completion, drop-off, time-to-decision.

2. Store data as a design material

   Inventory, associate picks, and pickup timing were UI ingredients, not backend trivia.

3. Validate live before rollout

   A/B exposure against real traffic confirmed the lift before shipping to every customer.

01 CONTEXT

The checkout was backwards: players chose how to pay before what to buy — like picking Visa at Amazon’s front door, then starting to shop. I mapped the flow end-to-end and timed every stall and backtrack.

02 THE CHALLENGE

> How might we get a returning player from “I want NX” back into the game in under a minute?

03 THE SOLUTION

Reordered to the mental model players already trust from every other store on the internet — and collapsed seven screens into three.

The flow, reordered

A fast lane for returning players

Help and discounts moved into the flow

04 IMPACT

Checkout time fell from 2:16 to :32.

05 PROCESS LOG

1. Sell the problem before the pixels

   Pitched at hire, re-pitched as a service proposal to senior management — greenlit with dedicated engineers.

2. Audit with a stopwatch

   Every stall and support ticket was timed, turning “it feels slow” into “it costs 1:44 per purchase”.

3. Test across every gateway

   Pre-launch testing covered each payment provider, so :32 held however a player chose to pay.