Mumzworld is the indispensable online extension of a mum's life. The system goal was to make her feel comfortable, empowered, and safe at every touchpoint — without engineering rebuilding the same components in slightly different ways each time. The design system below became the foundation; the three applied sections that follow show what got built on top of it.
An audit of the live site surfaced 184 unique colors and 299 total background colors across the interface. The visual brand felt scattered, perceived quality suffered, and engineers had no single reference for what "primary" actually meant. Each new feature added another variant; nothing was retired.
The deeper issue was structural. There was no shared vocabulary between design and engineering. Product owners thought in features, designers in screens, engineers in components — and the gaps between those mental models showed up as duplication, drift, and rework. Customer-facing surfaces (post-purchase comms, order tracking, multi-role features like gift registry) all suffered the same root cause: every team was reinventing the wheel.
The system needed to do three jobs in one: standardize the brand expression, document the recurring patterns, and give engineering a checklist for how each element should behave.
Step 1 — Design principles. We asked how we wanted users to feel: comfortable, secure, in control. The aesthetic decisions (color, typography, spacing, tone) flowed from that emotional target — not from a designer's preference.
Step 2 — Pattern map. We laid printed flows side by side on a board and tagged the components that recurred. The ones used most by customers got the deepest documentation; the rare ones got noted and deprioritized.
Step 3 — Naming and scope. Each component shipped with a scope checklist — anatomy, states, edge cases, behavior — co-authored with product owners and engineering, not handed over.
A documented design system covering color, typography, spacing, iconography, and a component library mapped to the most-used patterns across Mumzworld web and app — alongside a published style guide, naming conventions, and a scope checklist used by every team building new surfaces.
Standardized the color palette (down from 184 unique values to a documented core set), unified the iconography (one shared icon system across web and app), and produced a functional pattern map that connected user behaviors to the components supporting them.