When starting a Design System from scratch, it’s easy to wish for a crystal-clear vision of what’s ahead—what the organization it’s for will look like, how it will evolve, and the role the system will play within it. But let’s be honest, that kind of clarity rarely exists at the beginning. And that’s okay. 

What kind of company, product, or team will this serve? What problems are we solving, and what kind of impact could this have? These are big, open-ended questions.

Anyone who’s worked with Design Systems knows that without the right information, building one can feel like stumbling around in the dark. That said, it’s totally possible to get started effectively and keep it adaptable for future changes, making sure scalability doesn’t turn into a problem later on.

Step 1: understand the context

The first step in creating a Design System is to understand the context and get a feel for the situation.

Do you already have one or more web products but no Design System, causing issues with visual consistency? Is your design and development team, if you have one, finding it tough to work together? Or are you starting completely from scratch? And what about the future—are there expectations for the target audience the Design System will serve?

It’s not possible to have an answer to everything, but a good way to gather this information is simply by talking to the main stakeholders, whether they are other designers, developers, clients, or, if none are available, having a thought process with yourself to broadly understand what you want to do. Even if you don’t answer all the questions, you’ll still start with a solid idea.

What’s the point of all this? It helps you figure out how extensive your Design System needs to be. The more extensive it is, the more control you’ll have over everything—but it can also slow down development a lot. This works great for large teams but can be overkill for smaller teams or individuals. It also helps you pinpoint what you actually need from a Design System.

A lot of the time, it’s just about having a basic UI kit with foundational components that both designers and developers can use. If you’re working solo, there’s no need to build massive libraries you’ll never use—those can really slow you down when you’re making decisions like “Where should this component go?” or “Should I create a new pattern, tweak an existing one, or make a variant?”

It also helps you get a sense of how many products there are and whether it’s worth creating a system with multiple themes and different collections of design tokens, or maybe even using different platforms, like separating the app and the website. Basically, it makes a huge difference and comes down to figuring out the right direction to take and how complex the Design System needs to be. It also depends on the team behind it—how many people are working on it and how quickly new parts of the Design System can be created and shared with the development team, for example.

Step 2: Define goals and OKR

Now that we’ve got the situation and context clear, and we’ve asked ourselves some important questions, it’s time to tackle the key problems and obstacles we’ve faced so far—or might face in the future. With that out of the way, it’s time to set clear goals and purposes.

There’s nothing worse for a Design System than not knowing where it’s headed, what results you’re aiming for, or what its purpose is. Without that clarity, it’s hard to figure out the next steps because there’s no clear direction to guide you.

Examples of goals

• Visual consistency: Ensuring all products follow a uniform style, from colors and typography to layouts and components. This creates a cohesive user experience across platforms and builds trust with users.

• Operational efficiency: Speeding up design and development processes by using reusable components and templates. This reduces repetitive work and allows teams to focus on innovation rather than starting from scratch.

• Scalability: Enabling quick adaptation to new products or features by maintaining a flexible design framework that grows with the product's needs. This ensures future updates are seamless and efficient.

• Inclusivity: Designing with accessibility in mind to create products that cater to all users, regardless of their abilities. This includes considerations for screen readers, color contrast, and keyboard navigation.

• Documentation: Creating a centralized resource that serves as a single source of truth for design guidelines and development standards, helping teams avoid ambiguity and miscommunication.

Examples of key objectives

• Reduce the time needed to develop a new component by 30%, allowing faster delivery of features without compromising quality.

• Standardize design across all products within 6 months, ensuring a more consistent and polished user experience.

• Improve the brand consistency score by 20%, strengthening the brand's identity and making the product more recognizable to users.

Depending on your organization’s size, you can dive deep into setting goals or skip it entirely if you’re a smaller team. A design system already tackles a lot of issues by keeping things consistent and speeding up workflows. Just make sure it’s a helpful tool, not something that gets in the way. For smaller teams, keep the design system simple and easy to manage.

Step 3: Defining a team

A strong team is essential for building, maintaining, and evolving a robust Design System. Each team member plays a crucial role in ensuring the system is not only functional but also aligned with the goals of the organization.

It’s important for everyone to have a clear role to prevent overlapping design decisions or mixed directions. Here’s a breakdown of the key elements, but keep in mind that this structure isn’t always set in stone. From my experience, some projects have completely swapped out or combined these roles with others.

Product Owner (Design System Manager)

The Product Owner acts as the central coordinator, defining the vision, priorities, and roadmap for the Design System. They ensure the system aligns with corporate goals, balancing the needs of designers, developers, and stakeholders. They also manage timelines and resources to keep the project on track

Product Designers (UI/UX Designers)

Designers are responsible for defining the visual style and creating the graphic components that form the building blocks of the Design System. They design prototypes, conduct usability testing, and ensure that the system meets user experience standards. They design prototypes, conduct usability testing, and ensure that the system meets user experience standards. Beyond visuals, they focus on consistency and scalability to support various product needs.

Frontend Developers

Developers transform the visual assets and prototypes into reusable, high-quality code components. They ensure these components are technically sound, accessible, and optimized for performance. Developers also work closely with designers to resolve challenges and implement the best solutions.

Tech Writers (Documentation)

A dedicated technical writer ensures the Design System is well-documented, with clear and comprehensive guidelines. This documentation serves as a resource for all teams, explaining how to use and maintain the system effectively.

Business Stakeholders

These can include Product Managers, Marketing Specialists, or other business representatives who ensure the Design System supports broader organizational strategies. They provide input on aligning the system with product goals, brand identity, or marketing campaigns.

How to keep the team aligned

Joint brainstorming sessions

Bringing designers and developers together fosters collaboration and encourages creative problem-solving. These sessions are an opportunity to address potential challenges early and align on shared goals.

Continuous feedback

Regular review cycles with teams are critical to refining the Design System. Feedback from both internal users and external stakeholders ensures the system evolves effectively. It’s an iterative process where improvements can be made based on real-world application and user needs.

Core Team vs Extended Team

Core Team This team consists of individuals directly responsible for designing, developing, and maintaining the Design System. The Core Team ensures the system remains functional, up-to-date, and accessible for all users. They are the daily drivers of the system’s growth.

Extended Team The Extended Team includes representatives from other departments, such as marketing, product management, or engineering. These members provide feedback, share insights on specific use cases, and help ensure the Design System caters to the broader needs of the organization. Their involvement ensures that the system is not siloed but instead serves as a shared resource across the business. Building a Design System is not just about creating components; it's about fostering collaboration, alignment, and continuous improvement. With the right team and clear processes, a well-designed system can become an invaluable tool for driving consistency and efficiency across your organization.

Step 4: Initial Planning

To create a successful Design System, start by defining the main project phases. This ensures a structured approach and sets clear expectations for everyone involved. Key phases include:

1. Discovery phase: Conduct thorough research and analysis to understand the needs of both users and the company. This involves gathering input from teams, auditing existing design practices, and identifying gaps or inefficiencies.

2. Design phase: Focus on creating the visual components and guiding principles that will form the foundation of your Design System. This includes establishing design tokens, typography, color palettes, and reusable components that reflect your brand guidelines.

3. Development phase: Translate the design components into functional code. Collaborate closely with developers to ensure that the components align with technical feasibility and are optimized for scalability. Start integrating these components into your existing workflows and products.

4. Launch phase: Share the completed Design System with company teams. Provide training and documentation to ensure smooth adoption. Encourage feedback from users to improve and refine the system over time.

b. Establish processes

Define clear processes to streamline collaboration and ensure long-term success:

• Use collaboration tools like Figma, Storybook, or Zeroheight to centralize your Design System and make it easily accessible to all stakeholders.

• Define a standardized workflow for creating, updating, and maintaining components. This workflow should include steps for reviewing, testing, and documenting changes to ensure consistency and quality.

• Set up regular check-ins and audits to keep the system up-to-date as your company evolves.