From months to days: building a design system from scratch

Achieved 95% adoption across the team.

Reduced new feature time-to-market from months to days.

Established a unified visual language for web and mobile platforms.

Collaborated with product and engineering teams to create a foundation for fast, consistent delivery.

Before the design system, each new feature was built from scratch. Designers and developers recreated components, resulting in inconsistencies in navigation, spacing, icons, and interactions.

StarOfService serves both professionals and customers, each with unique needs. However, the interface required a unified, on-brand experience. Scaling without a shared foundation had become unsustainable.

I was engaged to establish this foundation from the ground up.

StarOfService connects professionals and customers, each interacting with the platform differently. We required a unified, intuitive interface that reflected the brand's colourful and approachable identity.

I structured the system using atomic design principles, building from basic elements such as buttons, icons, and inputs to complete page templates. This approach enabled rapid assembly of complex features from reusable components, eliminating the need to design each element from scratch.

To reflect the platform's vibrant, approachable brand, I developed a custom illustration style with colourful accents, clean lines, and minimal detail. These illustrations were integrated into the component library, ensuring consistent brand expression throughout the product.

Effective hand-off was essential for successful implementation. I documented core elements with detailed specifications, including states, interactions, spacing, and responsive behaviours. Interactive sessions in Figma and development tools allowed us to prototype together, identify visual issues early, and ensure accurate translation to code.

User testing and feedback from professionals and customers revealed issues, including inconsistent navigation. These insights led to improvements, including refined mobile component variants, enhanced accessibility states, and streamlined icons. The result was a dynamic system that evolved to meet real user needs.

A design system is effective only if the team uses it. Invest in adoption, not just documentation.

Building with engineers, rather than just for them, ensures the system’s long-term success.

A living system that responds to real feedback is more valuable than a perfect system that never launches.