01 — The problem
How might we let mobile shoppers buy quickly — on a checkout built only for desktop?
GAP’s mobile checkout was its desktop checkout, scraped by a third party and served through a proxy with heavy injected JavaScript and CSS. It was slow, and the company knew it was losing mobile sales.
I was brought in to form a hypothesis and lead the team to a solution.
02 — Constraints
The page structure was off limits.
- A large automated test suite depended on the existing DOM, so no markup could change.
- No modern element-manipulation library was in the stack.
- Production in six months, with the existing site supported throughout.
03 — Approach
Transform the existing checkout on the client, element by element.
Removing the proxy and refactoring the CSS would let the existing accordion checkout flow on any screen. After evaluating Prototype and Scriptaculous, we chose jQuery for its weight and speed to ship.
I inventoried every element and its behavior, then redesigned each for touch as well as click: small radio buttons became large target areas, tables became scrollable vertical lists, and raster images moved to SVG with a CSS fallback.
04 — Prototype & testing
One prototype, two jobs: user testing and developer spec.
I built a responsive, hi-fi prototype that we tested with users over several weeks alongside Swim Studios. Developers used the same prototype to write the media queries and jQuery hooks.
05 — Results
+14%
mobile checkout conversion
98%
confidence after a 3-month A/B test
100%
of users moved to the new checkout
The approach and the jQuery foundation were still in use in 2018, and paved the way for GAP to take the rest of its properties fully responsive.
06 — What I’d change
Test earlier and more often.
The short runway let us validate the core bet, but more frequent rounds of user testing would have tightened the feedback loop. Today I’d run weekly lightweight tests from the first prototype onward.