Suitcase design system — from theory to practice
Integrating product design work across different teams and technologies
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.
Project
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.
