BI Design System
Building a UI kit to scale a rebrand across platforms
As part of Business Insider’s rebrand, the UXD team needed a scalable way to bring the new visual identity to life across web and app platforms. Designers and engineers faced the challenge of maintaining brand fidelity while supporting rapid updates, requiring a production-ready framework that ensured consistency, speed, and flexibility without slowing development.
I led the team in creating a platform-ready UI Kit in Figma. I built components designed for seamless implementation, documented usage guidelines, and partnered closely with engineering. The system launched alongside the rebrand, enabling consistent, high-quality experiences across web and app from day one.
Rebranded home page and system organization in the UI Kit
As team lead, I guided the transformation of the Brand Book into a living, scalable UI Kit in Figma. My role was both strategic and hands-on. I built the collaborative framework for the file and established foundational styles—covering color, typography, spacing, grid, and iconography.
UI Kit foundational styles
I also designed a comprehensive set of reusable components, including mastheads, navigation, buttons, and story modules. At every stage, I prioritized scalability and accessibility by applying atomic design principles, leveraging nested components, and using component properties to simplify variants—ensuring the system could grow seamlessly with the brand.
To keep alignment across the team, I organized weekly workshops where we troubleshot tricky components, identified needs, and refined patterns. I also developed an embedded documentation system directly in Figma, giving designers quick access to usage rules and component specs without leaving their workflow.
On the engineering side, I acted as the primary liaison with developers—aligning on component behavior, validating feasibility, and supporting smooth integration. Together, we introduced a practice of including basic engineering specs directly within the UI Kit for easy reference. This collaboration was key to building a shared design language that could be sustained well beyond launch.
Sample engineering specs within the UI Kit
To ensure the UI Kit would hold up in real-world use, we prototyped components in real product scenarios, testing for both usability and brand fidelity. Internal design QA reviews helped us catch inconsistencies early, while post-rollout feedback sessions with designers revealed where patterns could be refined. This iterative process allowed us to adapt the system to evolving needs during the rebrand rollout, strengthening its relevance and effectiveness across platforms.
By launch day, the UI Kit achieved complete adoption across all priority templates, ensuring that the rebrand was executed consistently from the start. Beyond immediate efficiency gains, the UI Kit established a durable design foundation that continues to support cross-platform consistency and rapid iteration long after the rebrand’s debut.
The UI Kit proved to be more than a one-time deliverable—it became a core product asset. By building for scalability and embedding clear documentation, we created a system that could evolve alongside the brand while keeping quality intact. This project reinforced that the success of a rebrand often hinges on the invisible infrastructure supporting it, and that well-crafted design systems can accelerate creativity just as much as they safeguard consistency.