top of page
Cosmos banner.png

Cosmos Design System

Creation, conception, rollout and metrics of Global Design System of Hotmart Co.

My Contributions

Project Management

Design Ops

Team management

Overview

Hotmart was changing to a Global Company, integrating other companies into a holding.

That needs refactored Cosmos, Hotmart Design System, to a Global Design System for all Hotmart Co.

Understanding the problem

The challenge was to create a logic of Design Tokens that can transform any component into a new brand, even if the brand it's different.

The main problems of the formerly version of Cosmos was:

  1.  Cosmos was created thinking in just Hotmart products;

  2. Technical legacies that cannot be evolved to a Global Design System;

  3. The front end was constructed only in React Native;

  4. The components didn't support all squads;

  5. It wasn't have metrics to measure the impact of Design System;

Constuction

Based on the users' and business' pain points, the construction of the Design System was carried out in the following stages:

  1. Measure the cycle time of Development and Design Team from all Hotmart Co. companies;

  2. Alignment with stakeholders and squads their needs and pain points;

  3. Component mapping thinking scalability for the new version

  4. Front end studies for a better framework for web components that supports React, Angular and Vue;

  5. Calculate the CSAT (Costumer Satisfaction) of actual version of Cosmos;

  6. Create a new logic of Design Tokens and usage documentation from designers and developers;

From the entire process, we're aligned with Teachable, another company from Hotmart Co. that will test the new version of Cosmos, now called by "Cosmos Global"

Captura de Tela 2023-06-23 às 11.23.10.png

The Design Tokens were designed to adapt from every company, thinking in light and dark mode.

Captura de Tela 2023-06-23 às 11.28.52.png

The Cosmos Analytics to measure Coverage helps to understand which components will be used from a Global Version

Implementation

Once the the structure was created, we started create white label and flexible components, not just to helps Hotmart squads, but to cover another companies like teachable

Captura de Tela 2023-06-23 às 11.35.05.png

The example above it's a component card, with a lot of variants that allow the designer and team personalize by their own, adding and deleting some elements according the squad's needs.

For helps teams, we also made monthly workshop to how to use Cosmos and a team library components for teams create by the Cosmos Global components.

To otimize time for designers creating screens, we thinking with UX Writing content components for each situation, to make good pratices of UX and reduces support time of UX Writing on teams in minor demands and changes.

Captura de Tela 2023-06-23 às 12.15.13.png

The Designer can easily choose a component with blank text or pre-established content to use in a proper situation, if it's an error message, automatically the component will suggest a red background and etc.

So, Cosmos' Structure is divided by

  1. Tokens, that will lead to which appearance the components will be;

  2. Core Components, flexible to use in various situations;

  3. Content Components, that can be used to optimize time creating new contents;

  4. Team Components, only by the teams create specific components using Cosmos Design System;

Captura de Tela 2023-06-23 às 12.08.24.png

Metrics

To measure the impact of the Design System, we oriented by these metrics:

  1. Cosmos Coverage;

  2. CSAT is divided by onboarding, usage, new components, support;

  3. Time optimized by component;

  4. Designer & Developer average Cycle Time;

This metrics helps to create OKR's by quarter to guide us which metrics we need to improve for a better product experience.

Captura de Tela 2023-06-23 às 12.37.28.png

The example of component impact, we calculated average time of design and dev construction with which teams are used this components, the result it's the average time saved by use a Cosmos Component instead created by the scratch.

Results

CSAT increasead from 44% to 80%

Average time saved until 40%

Integration with Hotmart and Teachablle

Cosmos coverage by 70%

bottom of page