Illustration: Daniel Ferreira

The disruption of design systems

My experience of creating online projects with fast scalability and strong design coherence in the tech industry

Over my last 5 years of working as a team lead designer for a tech company in Barcelona, several things in the process of design have changed. The company has grown very quickly in many ways: from 30 to +300 workers, 3 to +12 online in-house projects and from 1 to +8 designers in different teams.

The are now multiple stakeholders involved in the design process: managers, developers, designers, UX, content, SEO, and SEM. They all have their own tasks, opinions, and objectives, but in the end, only frontend team can really know what’s going on with the final product. You also see the end of the spirit of the startup: the speed and ease of launching products, fast testing and the feeling there is nothing to lose.

To unite everyone involved in the design process, a cohesive point is needed which does not detract from the process or the final product. The idea of ​​creating a design system arose from this need.

As a professional designer, I have always been pre-equipped to effectively transmit an effective style guide. This allows frontend to understand to what is needed and makes it possible for them to achieve it without the help of a designer. This what a good design system can do.

So what is a design system in my experience?

Anything that helps us understand how to translate our visual patterns into flexible, reusable web components (in a way that scales) so we can build better software, faster.

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of products.

To understand what we are really talking about, this list outlines what an effective design system should include:

I like to divide it into 3 phases depending on the size and status of the project.

Basic Design System: It is the base element that any product on the internet needs to be able to dig in a cohesive way.

Standard Design System: When the project is consolidated and it is time to make it grow.

Advanced Design System: To have a top project production process with an internal communication between fast and efficient cohesive teams.

  • UX guidelines Standard DS
  • UI guidelines Basic DS
  • Contribution processes Advanced DS
  • Semantic meanings Standard DS
  • Visual components Basic DS
  • Shared purpose and principles Advanced DS
  • Page templates Basic DS
  • Tokens Advanced DS
Illustration: Daniel Ferreira

Some tips that I learned in the process

The design system is a product itself

Yes, the reality is that according to my experience, the design system is a project in the day-to-day running of the company, with its dailies, meetings, tasks in Jira, points of improvement, etc. Giving this priority can seem negative, but when you understand its value, you have to treat it as its own project. It stops being a pseudo prototype and becomes really helpful for the projects

If you’re not going to take care of it, do not start it

Let’s be realistic, we need to understand the timing of company projects. The difference between this and other company projects is that the person in charge is you and nobody else. Once the teams begin to use it a tool, it will be your responsibility to make sure it works smoothly.

Don’t be a prisoner of the system and its management

The design system has its own life as well as the projects that accompany it. We have to guide it and keep it cohesive, but do not fall into the trap of taking a long time to organize it and prepare it because when you think it is ready, an AB test will validate your design or the project will pivot or scale faster than your ability to organize it.

That is not in the design system does not mean that it can not be done. In my opinion, the design system works as a repository where all the components are created, those chosen for production and those rejected, those that have won an AB test and those that lost, use all these combinations to create better components and thus improve the product.

Software like design system as a continuum

Developers and designers created years ago still exist in many spaces, this requires constant maintenance and upgrading. The design system will not be the Moises tables but it will be the reference to maintain the coherence of the entire product and persist that communication between code and design.

Don’t beat around the bush

Produce the daily tasks comes first, do not adorn the design system, create it in a practical and accessible way for all the project stakeholders. But if you feel its good for the project and his process, do it!

Best design systems examples

Salesforce lightning design system →

IBM carbon design system →

Shopify polaris design system →

Let’s change the process.

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

No responses yet

What are your thoughts?