Creating a scalable Design System.

We collaborate with ambitious people.Let’s build something great.

GreenFlux develops a leading B2B e-mobility software solution for charge point operators and service providers to efficiently operate and scale their charging networks. The platform didn’t have any Design System and was built years ago without any long-term scalability criteria.

As a Product Designer I was in charge of building a Design System that mades the User Experience more consistent and improves product scalability.

Context

The lack of a design system generated multiple problems as the company expanded:

  • Inconsistent UX patterns and UI guidelines.
  • Duplicated and obsolete components.
  • Lack of agile solutions to build new functionalities.
  • Complex collaboration between design and development teams due to the absence of a centralised system to access resources.

Audit and project definition

The first step was to evaluate the status of the existing product with a visual audit of the platform. Through a UI inventory we were able to identify the most important and most used components and patterns, as well as highlight the critical inconsistencies within the product.

Gather input from stakeholders to get them familiar with the project and analyse existing user research were also relevant tasks in the first weeks of work.

The early involvement of frontend developers allowed us to take important technical decisions such us:

  • The use of PrimeVue as a base for the UI component library.
  • Adoption of Storybook as a environment to build and test the UI components in isolation.
  • Step-by-step guidelines to design, build and document each component and pattern.
  • A progressive implementation of the new Design System due to the complexity and size of the platform.

Design Principles and Foundations

The Design Principles are a set of values that conveys a shared vision and help teams in decision making. The Foundations are global styles and guidelines essentials to reach accessibility standards and UX best practices:

  • Color: used for a variety of purposes like creating visual hierarchy and contrast, convey information, indicate relationships, provide feedback...
  • Typography: a system of fonts to present de UI and content as clearly and efficiently as possible.
  • Layout: presented the layout anatomy for desktop and mobile devices. Also defined the 12 column responsive grid and our spacing scale based on the 8-Point Grid.
  • Other: decided also the elevation principles (usage of shadows) and border radius criteria.

Component library

The creation process of each component, generally, followed 3 core steps:

  • Research how this component is currently used in the platform and understand what properties and variants are needed to improve. Then define guidelines and best practices.
  • Design the element exploring the different potential versions and carrying out the necessary iterations.
  • A UI frontend engineer proceeds with the implementation. After that a final review is performed.

Patterns

Patters are used to display reusable combinations of components. The design process was the same as in the components in most of the cases. In some specific patterns, like tables, a more complex process was needed involving additional stakeholders.

Governance and documentation

Design System documentation was a fundamental to ensure UX/UI consistency, efficiency and product-design-development collaboration.

Since the goal was having to do as little maintenance as possible I wrote a clear and generic guidelines, leaving open the possibility that it could be expanded in the future.

At first we used a specific software called Supernova, then we migrated all the documentation to Notion because it was the tool used by the entire organization.

Takeaways

The development of a Design System has nothing to do with aesthetics. It is an essential tool to increase efficiency in the product development process, in addition to a great help to improve UX/UI consistency and collaboration between teams.

Among the main learnings acquired during the project, I would like to highlight:

Importance of involving developers from conception.
Developers can understand the design needs more clearly and also contribute to it, since they can see edge cases from another point of view. On the other hand, designers can understand better technical constraints and define properly the project requirements, anticipating problems that would appear during implementation stage.

Start from de foundations with a problem solving approach.
The main goal of a Design System is solving efficiency and consistency problems. Don’t focus on one particular component or styling, a good approach is to follow a generalist principle. Start discovering needs, planning the project and aligning stakeholders.

Design System is alive.
A Design System, in my opinion, is an ongoing solution and not a finished product. Regular updates, improvements and maintenance will always be needed. It should not be used as a static set of rules.