BeWater

Client

Escale

Duration

2019 — 2020

Role

Product Designer

Challenge

As customer acquisition company we had to design and build many landing pages and websites for our multiple big clients.

The designers had to do all the work again every time a new website or landing page had to be created, to every single client.

Goal

The main goal was to prevent de design and development team of spending so much time building this type of strategy that was very common to the growth marketing team.

This also would be a solution for the many inconsistencies throughout the products.

Solution

The solution was to build a Design System to address all this pain points e reduce the time we spent on this kind of job, so we have more time to the user validation, research and build new products.

Context

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.

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
Lack of structure to componentize and create new pages and features
Duplicate components with same functionality
Visual inconsistencies in nterfaces, like buttons, forms and visual identities
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
Correction of inconsistencies
More time invested in user validation and testing
Creation of new products and agile tests