Building the store
fans actually use

Turning fan insight into a working store

Following the exploratory research, I led the design of FanCode Shop — the in-app e-commerce experience for buying team and player merchandise. The work spanned the full stack of product design: information architecture, an open card-sorting study, mobile-first wireframes, rounds of usability testing, and the final UI across mobile and web.

A structure fans already know how to read

I defined the store's information architecture using secondary research on e-commerce websites — deliberately keeping it close to major e-com conventions so fans would find what they wanted exactly where they expected it. The information points were mapped into a tree diagram.

IA tree — the full information architecture, modelled on familiar e-commerce conventions.

Letting fans group the catalogue

To decide how products should be grouped, I consulted the partnerships and inventory teams to identify candidate attributes, then ran an open card sort with sports fans. Twenty-five cards were created on Optimal Sort in the format "Product Type (randomized, comma-separated attributes)".

Card sort — 25 cards sorted by sports fans to reveal how they naturally group merchandise.

Product categorization

The results were clear: fans preferred to group products by Product Type and Team Affiliation. I categorized the catalogue accordingly — All Brands, ICC Cricket nations and Sports Leagues each branching into their teams.

Product tree — catalogue grouped by product type and team affiliation, the way fans sorted it.

Paper first, then test, then refine

I built the wireframes by studying e-commerce websites and apps — starting with paper wireframes, then translating them into low-fidelity, mobile-first versions, since most of our users would be on phones. I ran thorough usability tests on these and iterated to refine them.

Wireframes — mobile-first low-fidelity flows, validated and iterated through usability testing.

The shop, shipped end to end

The final UI carried the full shopping journey — browse, product detail, size & variant selection, cart, address, payment and order tracking — first on mobile, then extended to web.

Final UI · Mobile — the complete shopping journey from browse to order tracking.

Final UI · Web — the desktop storefront, product and checkout experience.

White-labelled storefronts for partners

The design was templatized so partners could spin up their own storefronts — including a custom store for the International Cricket Council to sell T20 World Cup 2022 merchandise, built to their brand guidelines on top of the same system.

White-label — the ICC T20 World Cup 2022 storefront, themed to their brand on the FanCode Shop system.

A success that became its own company

The project was a success — it drove a tremendous response from users, and FanCode Shop was spun off into a separate company with plans to scale it further. The metrics below are measured over the first eight months after release.

What this project taught me