Design System Operations - Be Water

Creation, evolution and maintenance of Be Water, the Escale's Design System

Project Overview

Escale is a Costumer Acquisition company, which deals with sales funnel of Telecom brands (NET, Claro, Vivo and etc.) and health insurance companies like Amil, Sulamerica, Unimed and others.
‍
Be Water, the Escale’s Design System comes with the needs to optimize our process to build and develop the company’s products.

My Contributions

Creation & Conception
Design Operations
Design Thinking
Maintenance

Understanding the Problem

At the second semester of 2018, with the evolution of telecom and health insurance products, the design and development teams had some difficulties to built and create new websites, and functionalities, the main problems were:

To much time investing in interface, less time to test and validate products with the users;
Visual inconsistencies in nterfaces, like buttons, forms and visual identities;
Duplicate components with same functionality;
Lack of structure to componentize and create new pages and features;
Communication fails between design and development teams;
Inconsistencies between prototypes and production;

This was the primary button, with different sizes and font inconsistencies at NET websites.

Construction

To solve this problems, me with the design team created a small component library, dividing in small structure pieces (following part of Atomic Design created by Brad frost). The structure are divided by:

Theme: colors, font, grid, spacing, elevation;
Structural components: buttons, text fields, cards, selectors, loaders, sliders;
Component library (with complex components and features);

After that, each page and components was created by the component library to keep consistency and agilize the construction process, specially had more time to validate with the users pages or functionalities.

The first component library and styleguide, inicially used at NET websites, with all inconsistencies fixed and created a guide for component's usage.

Evolution

Even with the library, the design team wasn’t aligned with the development team, in the end, the final products had still inconsistencies because still didn’t have a macro structure with design and development working together.

Because of this, each tuesday, the development and design teams had meetings to talk about these problems, pains and insights to improve it.

In these meetings, a vision to make an universal structure was idealized, that unite all products builted since then, a fluid structure , then, this vision was named it by Be Water.

After all the problems and insights collected in these meetings, i did an activity with designers and developers to do a structure with same language between design and code and especially works to all products and new products that would come.

“ Empty your mind. Be formless, shapeless, like water. Put water into a cup, it becomes the cup. Put water into a teapot, it becomes the teapot. Water can flow or creep or drip or crash. Be water, my friend. “
-Bruce Lee

Design and dev teams defining how would be the taxonomy.It was used the design tokens (or variables) to name it.

This part of the activity, divided the colors by definition, inside this definitions, it was used the terms primary, secondary, tertiary to make a hierarchy

Usage

After the design tokens, names and taxonomy defined, an structure that works in all products came real, and helps to create new ones in a scalable way. It works with an universal base, only changing the themes.

Be Water comes to life, it became real, and was been using for all Escale teams (Health team, Telecom team, Operations team).

Some part of developer's repository with the same tokens used in design's library

Primary Button' s anatomy examples using Be Water . They have se same strucutre and tokens (brand colors, shapes, spacing, text), but changed by themes (Claro, Zelas Conecta and Vivo themes respectively)

Some websites created by Be Water's sctructure

Results

The creation and evolution of Be Water brings more benefits for all teams and product’s evolution:

50% Time reduction to create interfaces and features
More time investing in user validation and testing
Correction of interface inconsistencies
Creation of new products and agile tests