Building a scalable design system

My Role

Design system discovery research, creation of all components and documentation.

Background

The goal of this project was to develop a comprehensive design system for the STV Player web platform, ensuring consistency and standardization across all web pages. The system was designed for consistency, efficiency and to guide the translation of Figma designs into code from reusable components. This initiative was part of a broader effort to establish standardized design systems across all STV Player platforms, providing cohesion and a design source of truth.

The Challenge

The design team grappled with outdated components, setting up new components library for every project, and the lack of a single source of truth for the web platform that resulted in inconsistencies and inefficiencies in the design-to-development workflow. Without a standardized framework, designs were prone to fragmentation, making it difficult to maintain consistency and streamline collaboration. Addressing these issues required the creation of a unified design system that could align the team’s efforts, provide clarity for implementation, and support a scalable, cohesive user experience across the STV Player web platform.

Research & Planning

During the planning phase, I conducted kick-off sessions with principal engineers to gain insight into their current development challenges, particularly around design hand-offs. This included discussions on page grids, as well as identifying fixed and clear breakpoints to ensure smooth responsiveness and alignment between design and development.

To determine the best approach for developing a robust design system, I conducted in-depth research into several industry-leading design systems, including those from Airbnb, Spotify, and Material UI. This analysis provided valuable insights into how successful design systems are structured, with a focus on component organization, flexibility, and interdependencies.

The research was instrumental in understanding how components could be made adaptable to meet diverse use cases, while also identifying which elements should function as independent versus dependent assets within a library. Additionally, it highlighted the importance of cohesive style guides in maintaining consistency across the system.

Utilizing an atomic design system approach

Based on the research findings, the atomic design methodology popularized by Brad Frost was chosen as the structure for the STV Player web platform’s design system. This approach involved breaking elements down into their most fundamental components, organized into a hierarchy of atoms, molecules, organisms, and templates.

The atomic design system offered significant advantages in organization and scalability. By structuring the design system at this granular level, changes could be made to atomic components, which would then cascade seamlessly through molecules, organisms, and ultimately to the final template structures of the web pages.

With the goal of building an ever-evolving design system, It was clear to me that the atomic design approach was the most effective choice as its modular structure was going to provide for seamless iterations and adapting to progress over time, meeting both current and future needs.

Designing for responsiveness

The STV Player web platform featured multiple design structures to accommodate varying screen sizes, such as desktop, tablet, and mobile. However, this variability created a need for a more streamlined approach to ensure that web pages were optimized for responsive scaling across all devices.

To address this, a robust grid system was established for desktop, tablet, and mobile, serving as the foundation for consistent layouts.

The varying screen sizes required careful design considerations for components and elements, particularly in instances where the presentation differed significantly between desktop and mobile. In such cases, components were designed separately to ensure they met the unique requirements of each screen size. Consideration of responsive design helped to maintain a high standard of visual and functional integrity across devices using STV player on the web.

Creation of atoms

The atoms were the most basic building blocks of our design system, forming its foundational layer. These essential elements included colors, typography, shadows, iconography, switches, avatars, and the grid system, among others. As the core components, they set the groundwork for consistency and scalability throughout the system.

Building on this foundation allowed for seamless iterations and enhancements. For instance, modifying a single base element, such as a font style or a card color, automatically cascaded updates across the system, ensuring coherence without redundancy. This flexibility and efficiency made the atoms the logical starting point for developing the design system, laying a strong framework for future growth and refinement.

The molecules phase

With the atoms established, the next step was to create molecules which are simple, reusable components made up of atomic elements. These molecules were designed to address all possible scenarios and states, ensuring comprehensive coverage and adaptability.

At this stage, I focused on crafting components that seamlessly functioned across various screen sizes, from larger desktops to smaller mobile devices. These types of components were linked based on functionalities with their instances tagged according to their specific type (e.g desktop or mobile instances). This approach enhanced organization and streamlined updates, enabling efficient adjustments across the system.

Some components, such as programme cards, were carefully designed to accommodate different interaction states, including hover, disabled, and active states. accounting for these variations ensured the design system could handle every interactive state, supporting consistent and predictable user interactions.

When designing components, I prioritized using real copy and imagery whenever possible, steering clear of generic placeholders like 'Lorem ipsum'. This approach helped proactively address potential challenges, such as:

• Ensuring text fits appropriately without breaking the layout.

• Handling cases where a provider lacks a logo.

• Designing cards to accommodate multiple tags gracefully.

• Accounting for scenarios where images supplied are not accessible or gradients lack sufficient contrast for readability.

Building organisms

Building organisms was one of the most engaging aspects of the project, it felt like being a kid playing with building blocks. The fascinating part was being able to see how the atomic and molecular elements seamlessly came together to create cohesive, meaningful sections of the page that in turn makes up the whole page. It was a rewarding experience to see the design system take shape in such a tangible way.

Creating templates of pages

At this stage, the design system was practically complete. Creating templates demonstrated how components could be organized from the organismic components to construct full web pages. This approach allowed for quick access to sample pages, streamlined prototyping, and seamless iterations without disrupting components or page structures.

An interesting thing to see here was how changes made at the atomic level cascaded effortlessly through singular elements within the templates. This clearly highlighted the power and efficiency of an atomic design system in maintaining consistency and adaptability across projects.

Critique and communication

Collaboration is at the core of how we work, so the next stage of the project focused on ensuring the design system was efficient and user-friendly for everyone. I organized critique sessions with other designers for beta testing, ensuring they understood the asset-naming conventions and could efficiently use the system without breaking components. Once fully optimized, the design system was published as part of the STV Player design libraries.

To bridge the gap between design and development, I conducted walkthrough sessions with front-end developers to help them understand the specifications and reuse of the components for translating the Figma designs into code seamlessly. Additionally, I worked with product managers to familiarize them with the design system to further improve their collaboration with design. These efforts ensured the design system was both accessible and practical for all stakeholders.

Impact

The implementation of the new design system immediately resulted in greater cohesion across the platform, a noticeable reduction in the use of rogue components, and over 80% faster and accelerated pace for iterative and early-stage design work.

The design system was created to be responsive as intended, for desktop, tablet and mobile screen sizes.

By establishing clear guidelines and workflows, the source of truth assets created opportunities for designers to collaborate more effectively. It facilitated early visibility into how the system was evolving across the web platform, fostering a culture of shared ownership and alignment. It not only streamlined the design process but also ensured that newer components and refinements were introduced consistently providing a more unified and scalable design language for a better user experience.

Reflection & Next steps

Throughout the process of creating the design system, I gained invaluable insights into the complexities and rewards of design system development. One of the key learnings was the importance of populating components with real content and scenarios rather than relying on placeholders or low-fidelity mockups. This approach allowed me to anticipate challenges and design components that were not only functional but also practical for real-world use cases.

The cascading impact of changes at the atomic level underscored the importance of precision and forethought in every decision, as small adjustments could ripple through the entire system.

My next focus is on the design system’s continuous evolution to ensure it stays relevant, scalable, and efficient for all users. This involves further documentation of assets, where I’ll provide detailed guidelines, examples, and edge case scenarios to enhance understanding and usability.

I am also working towards creating an iOS-specific design system to expand the system’s reach and usability across platforms while maintaining the brand consistency.