Creating a scalable and cohesive design system is essential for ensuring consistent user experiences across ever-expanding brands. Let me take you through our journey of building a flexible and consistent design system for Leagueworks, and show you why you should consider the scalability of your branding too.

"A design system isn’t a project. It’s a product serving products." – Nathan Curtis, EightShapes.

Introduction

Leagueworks is focused on creating a comprehensive app for managing sports leagues and tournaments, handling scheduling, team management, and stats tracking in one place. Our primary goal for this project was to develop a design system that could support an expanding brand. We aimed to ensure consistency and efficiency to reduce development time for our small team of three. A robust design system keeps our brand strong, minimizes extra work for developers by establishing a rigid rule set that is difficult to deviate from, and simplifies updates, ensuring a smooth and enjoyable experience for our users as the app grows.

Our Design Methodology

Before diving into our process, it's essential to understand our design methodology atomic design, which will be forming the foundation of our scalable design system. Atomic design breaks down a design into smaller, reusable parts known as atoms, molecules, organisms, templates, and pages. This approach makes our design system scalable, reduces redundancies, and makes updates easier to manage. By structuring our design system this way, we ensured consistency and efficiency, allowing us to maintain a high-quality user experience as our app grows.

Getting Started

Understanding the need for scalability in branding and UI was our first step. We knew our design system had to be flexible, scalable, and easy for both designers and developers to understand. This was crucial for our small team of three to ensure a smooth workflow and high-quality end product. Scalability is key to building a strong brand because it keeps the design consistent and manageable as the product grows, preventing rework and inconsistencies that could disrupt the user experience.

Creating a scalable and cohesive design system is essential for ensuring consistent user experiences across multiple products. Let me showcase the how and why behind building such a robust design system for our project, Leagueworks. We aimed to create a flexible and consistent design system that could grow with our app, choosing the right tools and methodologies to implement continuous updates and improvements. This is the story of how we built a design system that not only looks great but also supports our app's growth and success.

Design Tokens

Design tokens are standardized variables that store design attributes like colors, typography, and spacing. These tokens act as the single source of truth for these elements, ensuring uniformity across the entire design system. By using design tokens, we maintained a consistent look and feel across different platforms and devices, which is essential for a cohesive user experience.

In our atomic design approach, design tokens function as the sub-atoms within our file, representing the most granular elements like color values and font sizes. This method ensures that even the smallest design details are consistent throughout the system. Design tokens enforce product teams to stay within the parameters of a brand, maintaining a cohesive look and feel across all aspects of the application.

Finding a Scalable UI Library

We decided to build our app using Next.js, TailwindCSS, and the Shadcn/UI component library, which is based on Radix UI. This combination will offer a robust foundation for our development process, ensuring scalability and consistency in across sites. I had previously used this setup on projects like metrists.com and had already invested significant time in enhancing the Shadcn component library on Figma. This prior experience gave me confidence in the setup's ability to handle our project's demands, providing a streamlined workflow and consistent design language. The integration of TailwindCSS allowed us to apply utility-first styling with ease, while Next.js ensured our application would be performant and scalable from the ground up. Shadcn/UI’s inherent flexibility and high degree of customizability makes it ideal fit for Leagueworks' unique branding!

Improvements and Modernization

Branding can become complex when spread across multiple apps, marketing sites, and platforms. We needed a firm definition of branding to ensure cohesion. When we first examined our Figma file, we found that many components were static and didn’t adapt well to different screen sizes. This lack of flexibility hindered our consistency across platforms and required extensive manual adjustments. To address this, we needed to rebuild most components to include features like auto layout and design tokens. Here's how we transformed our design system.

Responsive Components

Initially, our component library had rigid, static components using unsresponsive grouping instead of frames which act more like real code. We realized if we were going to do it right we’d have to completely modernizing the Shadcn Figma component library to make it responsive. Auto layout made our designs flexible and responsive across different screen sizes. Components can now adjust automatically, saving time and ensuring consistency while designing for mobile, and tablet experiences.

Implementing an Atomic Structure

The library's initial design attributes, like colours and typography, were applied manually, leading to inconsistencies. We implemented our brand design tokens to the file, and standardized variables for these attributes so that to its core the brand will always stay consistent at a sub-atomic level.

We structured the file and organized components with an atomic design approach, breaking down components into smaller, reusable sections and organizing components within these groups. This makes the document easier to manage and update individual elements without affecting the entire system.

Conclusion

Rebuilding components with auto layout and implementing design tokens takes a ton of time, but this process will save us so much more time in the future by providing the flexibility and scalability needed for our brands growth.

We know that not everyone has the time to build high-quality libraries like ours, and that’s okay. That’s why we’re passionate about giving back to the design community. We’ve made our modernized design system publicly available on the Figma store, so other designers and developers can benefit from our work. By sharing these resources, we hope to make life a little easier for others and foster collaboration and innovation in our industry. We're excited to contribute to a more robust and creative design community, and we’re happy to help others achieve their goals.

Thanks for reading, feel free to get in touch!