The StreamYard Design System

Challenge

The design team at StreamYard was confronted with several substantial challenges that necessitated the creation of a robust design system. Prior to the implementation of this system, there was a significant disconnect between the designs and the actual code, leading to discrepancies that affected the final product’s consistency and quality. Designers frequently found themselves having to recreate components due to errors in dimensions, spacing, and other critical details. Similarly, developers often had to rebuild or modify existing components, which not only added to the workload but also hindered efficiency.

Adding to the complexity was the scale of the product, which was already well-established and active in the market by the time the need for a formal design approach was recognised. This meant that there was nothing existing in Figma, requiring the team to rebuild everything from scratch. Moreover, the design team was operating at full capacity, lean in numbers and without the budget to expand, which made it challenging to allocate resources for this extensive undertaking.

Implementing a design system was seen as a strategic move to address these issues. By centralising the design components and establishing a single source of truth through the design system, the team aimed to eliminate inconsistencies and streamline both the design and development phases. Although creating the system required a dedicated effort, the approach was to build it efficiently and intelligently, ensuring that it could overcome the challenges of matching design with code, reducing repetitive work, and enhancing overall product consistency without needing to expand the team. This system was not just a solution to immediate problems but a long-term investment in the quality and scalability of StreamYard’s product design.

The design system project was fundamentally driven by a design-led strategy, emphasising the central role of design in driving project outcomes and product enhancements. As the design lead, I, alongside another designer, spearheaded the creation of foundational design elements that informed the design tokens essential for consistency and efficiency across design and development.

In the design phase, we employed atomic design principles using Figma, integrating tools like auto layout, booleans, and variations to ensure each component was robust, responsive, and reusable. This meticulous approach guaranteed that components could adapt to various product scenarios, enhancing flexibility and utility.

Our role extended beyond design; we also acted as project managers, coordinating closely with engineers and other teams to ensure smooth project execution. This included comprehensive documentation of each component, covering design rationale, implementation guidelines, and usage to ensure a seamless handover from design to engineering.

Throughout the project, collaboration was key, with continuous involvement from the design team and critical reviews by design leads to maintain high standards and alignment with the project’s goals. This design-led methodology not only advanced the product’s capabilities but also underscored the transformative impact of strategic design leadership in tech development.

As the co-design lead and acting project manager for StreamYard’s design system implementation, my role was central to orchestrating a collaborative and effective process across multiple teams. I steered the direction of the project with the other design lead, coordinating with both design and engineering teams to ensure seamless integration and execution of the design system. Beginning with the foundational elements that I helped establish—precisely defined tokens—I led the design team in applying an atomic design methodology to create a series of detailed components. These were then meticulously transformed into reusable React components by our engineering team, culminating in a comprehensive package that was made available for the entire engineering department to utilise.

My leadership was crucial in fostering collaboration among all parties involved, given the project’s vast scale and complexity. I helped facilitate regular meetings and discussions between the design leads, engineering leads, product designers, and engineering teams to ensure clear communication and alignment on our objectives. This ongoing interaction helped preemptively address potential discrepancies and maintain project momentum. My role as co-project and design lead was instrumental in guiding the project toward success, ensuring that the design system not only met our technical and aesthetic standards but also significantly improved our development workflow and product consistency.

Despite the StreamYard design system project being prematurely halted due to the sale of our parent company, the progress made in its initial stages already demonstrated significant impacts on our product development process. Even in its incomplete state, the design system markedly improved consistency across the product’s interface, elevated the standard of design aesthetics, and enhanced usability. This was a testament to the foundational work that was efficiently laid out, setting a higher benchmark for future development.

The partial implementation of the design system allowed us to achieve a more streamlined workflow in both design and front-end development. The components that were developed and integrated—using a sophisticated system of Figma tokens and atomic design principles—greatly increased efficiency. Designers and developers were able to work more cohesively, with less need to redo work or manually adjust components, thereby reducing the time and effort typically involved in bringing designs to production.

Furthermore, the project was a remarkable achievement given the constraints under which it was conducted. The small design team, tasked with concurrent responsibilities on other full-time projects, managed to accomplish a great deal in just a few months. This swift progress not only showcased the team’s dedication and skill but also the potential for what could have been fully realised had the project continued. The design system’s partial rollout already started showing benefits by making design in Figma and front-end development significantly more efficient, setting a solid foundation for potentially resuming the project in the future under new ownership.