Every store ran on one of five rigid templates — all dated, every change shipped five times. I architected the token system that fixed both: one foundation the themes build from, where changing a few values restyles a whole store.
ShopDeck builds and runs online stores for small D2C brands — and only earns when its sellers sell. Every store was produced from one of five rigid, hard-coded templates, and that created two problems at once.
Inconsistent spacing, product images breaking across breakpoints, ad-hoc type scales. For a seller whose storefront is their only brand presence, "looks bad" means lost trust — and lost sales.
Five separate template codebases meant every fix — and every new feature — had to be built five times over. Maintenance was slow and inconsistent, and the roadmap paid a 5× tax on everything new.
Both traced to the same root: five disconnected codebases with no shared foundation. You can't fix the look at scale without consolidating them — and you can't consolidate without rethinking how styling works. One answer solved both: a token-based design system where the themes become presets of a single, scalable codebase.
Five rigid templates, no shared foundation — so every store inherited the same dated look, and every fix had to be made five times. Here’s the storefront experience as it was, before the rebuild.
There were two ways to go — patch the templates one at a time, or rebuild everything on one shared foundation. Patching solves neither problem: the dated look returns with the next change, and every fix still has to be made five times. So the call was a rebuild on a single token-based system.
That rebuild is what I was hired into. I joined as Principal Product Designer to architect the system and deliver it.
My core contribution was the architecture — three layers, each built on the one below:
Change the values, swap the component variants — and every store restyles, no code touched.
Two references capture the whole system — Foundations (the tokens, colour, type and rules) and Components (the structure). Open either as its own full page.
Finished storefront designs built entirely from the system — including all five legacy themes, recreated from the one foundation. Different sellers, different looks; the structure never changed.
Every design deliverable — the element inventory, the token architecture, the component library, and all five recreated themes — was finished and documented before I moved on in March 2026. Engineering was building it at handover, and continued with the colleagues I passed it to.
What I'd measure after launch: how the rebuilt stores look against the old ones, how fast a new seller's site gets set up, and whether more visitors buy. The rollout is engineering-led from here.
The vision and the funding were design leadership's. Turning them into an architecture that actually delivers — and keeps delivering after you leave — was the job I was hired for.
When every colour and size is a named value, giving any store its own look stops being a design bottleneck.
Recreating all five legacy themes from the one system was the proof it worked. If a system can reproduce everything that exists, it can produce anything that doesn't yet.