Table Section of Spartan

Problem

As Halo transitioned from its legacy platform to a modern React-based architecture, the product team faced increasing inefficiencies in both design and development. There was no centralized design language, which led to inconsistent user interfaces, redundant design work, and engineers frequently rebuilding UI from scratch. These challenges slowed down product velocity, created unnecessary QA issues, and impacted the overall user experience across both web and mobile platforms.

Goals

The primary goal was to create a scalable and consistent design system that would support Halo's platform migration and unify design efforts across teams. We aimed to improve collaboration between design and engineering, speed up the design-to-development handoff process, and reduce rework. Establishing a clear and reusable set of UI components was essential for ensuring design consistency and increasing efficiency across the product.

Original Legacy Code vs Spartan React Components applied

My Contributions

I led the creation of Spartan, Halo's first comprehensive design system, built in Figma to mirror our evolving React component library. I conducted an audit of our existing UI patterns, defined foundational styles and design tokens, and partnered closely with engineering to ensure design components aligned with code. I built and documented over 80 reusable components designed to work across both web and native mobile. I also played a key role in onboarding product teams to the system, providing training and support to ensure adoption. Throughout the process, I collaborated with design, product, and engineering leadership to align the system's roadmap and governance with broader business goals.