What I learned designing a new design system and how to get started
By: Annalisa Valente
Tags: Product Design, Design, Pattern Library, Resources, Design Systems

The result is a mess!

Designers don’t know which component to use and when. It takes a long time to design/ship new flows because the team have to design everything from scratch. Developers need to spend an enormous amount of time to build different components. Users are overwhelmed because of the many different patterns of interaction they have to deal with. They don’t have a coherent and consistent user experience across different platforms and customer entry points.

1. PRODUCT — Reuse design patterns for products at scale

The solution to our problem is simple: we need a design system to efficiently reuse design elements.

A design system is a set of components, with clear standards and rules, that can be used together by teams to build products at scale with the result of saving time and effort for developers and designers.

The large benefit of having reusable components becomes evident when we take a closer look at our product that have multiple components that serve the same purpose. For example, each of the different CTAs that we mentioned before represents developer, design and quality assurance time and if you multiply this across different parts of a product on multiple products and across platforms, you will soon realise this is a lot of effort.

A design system is not only one part, but many parts. For example, only a Sketch/Figma Library is not a design system. A style guide alone is not a design system, a single pattern library or a CSS framework is not a design system either.

2. PEOPLE — Teams and design system

I like to think that the design system gives teams the tools to collaborate putting people at the centre with the result of increased efficiency. You might feel that this will initially result in an increased amount of design time, but in reality, there is an overall time saving and a better end result.

With this:

The development and design teams could focus on iterating, innovating and improving rather than on rebuilding

QA tasks could be centralised and automated

The design system documentation could become a hub for reference and design/development best practices for teams and new hires (e.g. storybook)

It could be used to develop patterns across products

People in the teams will be happier because

💯 Less time spent to re-develop/re-design

🎉 More time to focus on real user problems

People using our products will be happier because

💌 Coherent user experience and more reused learnt patterns

3. PROCESS — Where to start

#1 Make a plan

In the past, I was lucky enough to work with some of the best design systems out there, but this time was different because I had to create one from scratch.

Designing a new design system is a HUGE job and requires good planning in order to get all the moving parts working.

You will need to collaborate with your peers, PMs, stakeholders, devs etc. It is a long process that will continue for months if not years, for this reason, you have to make a plan, putting down all the phases of the process and how to move forward.

When I had to begin the project I first did a discovery phase where I defined deliverables, I started to collect insights and once I had enough research I begin the ideation phase with the creation of different components and prototypes.

#2 Setup deliverables

I defined a set of deliverables for our teams to focus on, keeping in mind that our design system will evolve constantly with the product and with the new tools and technologies that we will use. We apply the design system to all the user touch points starting from the company website to platforms, to mobile. For this reason, I work closely with the marketing and content team to make sure not only the visual elements are aligned but also content and messages.

User touch points where the design system will be applied

The design system will help scale and create a visual language that stretches across platforms. I also applied the design system components and visual language to the deck that stakeholders use internally and externally with customers.

Deliverables part of our design system

#3 Conduct a visual Inventory

If you are creating the design system for a product that already exists in the market, an important thing to do is to create a visual inventory.

Conducting an audit of the current components could help you to define the different styles and components used across these products.

Collecting CTAs, dropdowns, all the different existing components gave me a big picture of the current digital ecosystem of our products. It’s a good idea to get the development team involved in this process, as they will have a good overview of what is happening inside our platforms and also helps to break silos and increase collaboration. After this process, you’ll be grouping the similar components and then you can start your prioritization. This will give you a good overview of what focus first.

#4 Define design principles

Design principles are foundations that are used across all teams to focus on the global vision and principles that our design should follow. Which also ensures that when we work on the overall design our interfaces are functional, easy to use, intuitive and memorable.

A good example is the following by Atlassian.

Our design principles reflect our design philosophy and underpin how our digital experiences unleash the potential in any team. We use the Atlassian Design Principles to inspire creativity and to continually push ourselves to make our products, websites and integrations better at helping people and teams be more effective.

#5 Create a visual language and a style guide

The visual language is important in order to articulate a general brand design direction, philosophy and approach to be used across all ecosystems of products. Consistency, visual recall and clarity are the main goals of our visual language. This will help to set up a style guide that is a set of company’s rules regarding its branding covering both visual elements, such as logos and imagery, as well as typography, palette and tone of voice. It defines how the company is represented throughout online, offline, in-house, and external appearances.

1.Typography. It is extremely important that your brand has a strong foundation of typography. Choose fonts, set a hierarchy, and integrate them with components in order to make your UI legible. Typography is an essential part of visual hierarchy which helps to reduce friction across products.

2. Colour palette. Colour distinguishes your brand. By defining a colour system you can ensure you have a single palette of colours used across products to create a consistent experience. Brand colours can be integrated into the palette in order to maintain brand personality throughout your UI. Colours need to be accessible to ensure sufficient colour contrast so that people with visual impairments can use your products. You should define a primary palette, text palette, secondary palette and tertiary palette.

Other elements of the style guide are icons, margins, padding, grids and so on.

#6 Design a pattern library

The pattern library is often influenced by a style guide and it is a collection of user interface design elements and components. This can include living documentation like HTML snippets and it focuses on user interface design.

Pattern libraries include components like CTAs, search bars, images, hero elements, sliders, cards, galleries, navigation, tables etc.

As a starting point, I didn’t create the pattern library from scratch but I used one of the many existing libraries out there in Figma as a foundation and then I iterated. This helped me to save a huge amount of time. I tested all the components with internal stakeholders but also with end-users, to ensure that they were involved in the conversation. Another thing to keep in mind is to ensure to follow the accessibility standard so that everyone can use our products.

#7 Alignment and collaboration with your dev team are gold

Collaboration and good communication between teams are the keys to move forward and to bring our design system to life. All the parts should work together as one team with a common goal.

Practices that helped and help me today to be aligned with my dev team and stakeholders:

Creating a redline specs document to be handed off to developers will ensure that designs are made according to specifications. The red lines are guides, that communicate exact spacing, margin, etc. When delivering to my development team, I use Figma and I use design tokens, comments and guides there.

It is useful to create one place to manage brand and UX components and documentation across teams. This is referred to as a single source of truth. This can be created as HTML pages and hosted on GitHub or something similar for easy distribution among your team. In the past, I’ve used Atlassian Confluence to create wikis with all the details about the design system and its use. Remember that these can be useful for not only design and development teams, but also marketing and content teams.

My design system toolkit that I use every day. Figma, Jira, Miro, Storybook

Shipping a design system pilot project. It is important you align with your PMs and plan to ship a pilot project to launch your initial design system. This will allow you to have a starting point and to measure metrics that can be used later on when you define KPIs for implementation. You will need also to create a backlog for your design system. Your PMs and developers should help you with the prioritisation of stories.

Help your developers with the creation of a storybook. A storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organised and efficient.

4. CONCLUSION — Summary and takeaway

As of today myself and the team are still working on the design system and there is still a lot that needs to be done.

Designing, building and maintaining a design system is hard work and it requires months of work. I learned that working on a design system is an experimental process. Patterns and components are made to be edited, extended, added or removed based on experimentation, testing and new findings. 😀

Example of storybooks:

Other useful links:

Thank you for reading! 😀 Feel free to reach out to me on Twitter