Suitcase design system — from theory to practice

Context

In early 2022, the work scope of the Hurb product?teams?was?growing?with new demands and the need for interface designs that scale more efficiently became ever greater. In addition, inconsistencies were also growing considering the entire ecosystem of the company, whether in the context of design or between the different Web, iOS and Android technologies.

For this, we integrated the first team with people exclusively dedicated to the design system. Some similar?initiatives?ran in parallel, such as libraries of styles and components in Figma, but they still weren’t faithful to what existed in production. On the side of the web front-end team, there was already a technical documentation of components in the?Storybook, which would become the main starting point for our evolutions.

During the first phase of the work, we spoke directly with the main?stakeholders, whether in design, product or development. We set up a?task force?involving the technical teams to map the existing inventory and define the next steps together with the leaders.

In the same way, the proximity and?feedback?of product designers would be fundamental to each progress or update, as well as the?support?provided by us with the best practices especially for this initial period, always studying other design systems in the?market?and innovations.

Scope definition

We seek to look at the “clusters” of what we can consider as important for the maintenance and evolution of a design system and that, as a result, would help define the next steps:

How is the health of the design system?

For a design system to work, reflecting on the business and end user of the product, it needs to be?healthy, mirrored on all its fronts and with the lowest number of failures (or bugs).

Only then does it reflect positively on the product development process, facilitating communication between design and development during the handoff and validation (QA) stage.

How much are we helping in the process?

There is no point in having the most complete and healthy design system possible if it is not?usable?and aligned with the routine and processes of the people who use it.

And here’s the challenge: if designers deliver screens (images, prototypes) and developers deliver lines of code, how to reach a consensus to support the day-to-day of both as much as possible?

Are the DS fronts consistent?

Finally, all of this will result in deliveries of the “real” product that impact the company’s end users, so all of this must converge to something?consistent, coherent and very well aligned with the guidelines and positioning of the company’s brand, the “ standardization”.

All of this goes far beyond using the correct color palette, the font defined in the visual identity or respecting logo sizes, but also preserving the experience across different devices, application and maintenance on different platforms.

By monitoring these points, we get thermometers on our design system to be our guides, KPIs and triggers for initiatives, tasks and next steps.

Success indicators

At the beginning, in an environment with many inconsistencies between libraries and bottlenecks in the handoff stages between designers and developers, it was necessary to map the elements developed to understand the real scenario on each front.

Rating criteria

With the entire team, we raised some key points to measure the quality of a component of the design system, criteria that would be our guides to keep the elements?healthy.

Design

In design, we defined criteria that would ensure that the component was functional for use with the tool and?perceivable?criteria in line with the principles that were defined in the Hurb product and brand.

Technology

For the code, the greatest importance was to guarantee the?functioning?of the element with revisions and?tests?defined by the engineering team and the alignment with the design definitions.

Documentation

In the documentation the main objective was to ensure that the?good use?of the component is preserved.

Prioritization

Finally, we defined that some criteria could also support the visibility of the?next steps, bringing inputs to the team’s day-to-day and?backlog?definition.

Monitoring

Based on the raised criteria, we evaluated all components of the web library and related what was available in other libraries, generating a data source to support the mapping of evolutions regarding the?health?of the design system.

Structure, processes and files

With the scope of work and our success metrics defined, the challenge revolves around the?organization?as a team.

Our internal documentation in the?Coda?tool gained strength from studies on where the elements of the design system would be manifested and their influence on the team’s deliveries.

We adopted the?kanban?methodology to continuously evolve, with steps always aligned with development tasks to tie?processes?and?workflows?together.

We also defined the organization of files in?Figma?to respect the timing of each?task, from exploring a new hypothesis to final collaborations and validations.

All this internal structure of the system design team helped to prepare the ground for the organization of the?usage files, understanding what the best approach for the design?libraries?would be.

Roadmap

We managed to evolve the team’s day-to-day activities and generate a squad?routine?with a process to guide the tasks, weekly?ceremonies?on continuous evolutions and a well-defined structure of libraries and files, all that was left was to define the path we wanted to take.

We looked at the?indicators, some requests, technical needs and got a guide for the next steps.

Definition of the initial version

Even so, it was important for the company to have an initial milestone, and defining a first version would help us turn the key so that all product teams could start to follow the continuous evolutions and thus start a first transition period.

The business documentation began to emerge, where we detail all the elements defined for the first version and everything that users need to use to accompany the evolution of the design system.

Suitcase launch

In April 2023, we finally launched the?first version?of the design system, with the collaboration of all teams for suggestions and choice of the final name. We also created our own visual identity in line with the company’s values and concept.

We chose to use the Supernova tool to make the documentation available to the public, relying on technology integration features that could help us deliver more scalability in future releases. For the launch, a?presentation?was made for the entire company, telling a little about the main challenges and how we got to that moment.

Foundations

To meet the minimum health criteria, after a series of alignments in design and technology, we arrived at a common denominator for the definitions of?styles?and visual elements for all teams. Our design tokens would be made available as a single source of truth serving different contexts of use.

Design tokens manifest design decisions in unique, absolute style variables, named semantically and distributed across design tools and code languages.

Colors

Even before the definitions of usage colors, color palettes were created that would serve as support even for eventual changes in the future. To better balance the color tones used not only in digital products, but even in illustrations or marketing pieces, a?primitive?color palette was created. Using it, the?semantic?color palette carries more than just the names of the colors, but also functions specific to them.

However, to meet criteria of accessibility, visual weight and combinations,?usage?colors respect application definitions, such as texts, icons, backgrounds and borders or even states of use or relevance. By using context colors as a dependency, we could easily switch themes and contrast modes. We also separate tokens for general use from those that would be used exclusively for?components, containing specific states and functions.

Layout

Complementing the colors, we also defined tokens for measures, shapes and other design?specifications?and clearer rules of use, establishing hierarchical roles and better visibility for different layout elements.

Icons

We organized the library of available icons and documented the types of?variations, where they should be applied in the interface and the process for suggesting new icons.

Typography

For all the texts, a separate study was carried out. By defining?tokens?for sizes, spacing, weights and more, we tie together the possibilities of?styles?for use, establishing a?hierarchy?of information and still respecting best practices for?responsiveness.

Components

For our components, it would be fundamental from the beginning to monitor their?health?through pre-established criteria. In an initial stage, we?mirror?all the components available in the web front end library and make them available to designers as a way to reduce the noise of non-standard implementations and deliver more efficiency.

Then, together with the teams and following our evolution?roadmap, we started to act component by component, understanding its limitations and possible design and accessibility?improvements?and documenting?rules?of use.

Branding and Content

As a documentation to be used by the entire?company, we have also separated two sections aimed at unifying resources and guidelines aligned with the positioning and visual identity of the?brand, as well as how it?communicates?with its customers. All of this always counting on the collaboration of the main people involved in marketing and writing/content.

New deliveries

Ufa! We arrived at a first version, but the team’s performance continues to?evolve?and the new deliveries need to be defined.

Some lessons learned along the way helped to refine the?roadmap, review some aspects of the process and, above all, better understand the scope of action.

Continuous improvement

Throughout the process, some?surveys?with designers, product managers and developers served as a thermometer on the deliveries of the first stages, but it was also possible to receive important insights for the next stages.

We maintained the continuity of these surveys in parallel with routine tasks, creating the culture of always having continuous?discovery?to reinforce the teams’ adoption and feed a board of?insights?and hypotheses to support the refinement of the next steps.