Criando uma ferramenta para acelerar a evolução e garantir a consistência de experiência entre produtos RD Station

À medida que os produtos da RD Station cresciam, manter coerência entre interfaces e produtos se tornou um desafio estratégico. A velocidade de entrega frequentemente entrava em conflito com a qualidade da experiência, e a ausência de padrões gerava retrabalho, inconsistência visual e complexidade na evolução dos produtos.

Produtos 2+
Times 14+
Clientes ~35mil

🔎 Pesquisa

Aprofundar no problema, entender quais os principais desafios e quais pessoas estão sendo impactadas pelos problemas e como impacta nos objetivos da empresa.

📝 Discovery

Analisar os produtos, entender quais os desafios técnicos existem e quais são os caminhos que podemos seguir para resolver o problema de forma lean.

🎨 Design

Definição da visão de onde queremos chegar, quais os objetivos e quais métricas vamos utilizar para validar ou invalidar a solução do problema.

💻 Desenvolvimento

Implementação das soluções e/ou mudanças nos produtos, liberação para alguns clientes de teste para coletar feedbacks e entender se o problema está resolvido.

Falta de padrões de fluxos e comportamento aumentava esforço cognitivo dos clientes
Falta de componentes (design e código) visuais fáceis de serem reutilizados
Tecnologia de desenvolvimento defasada dificultava manutenção e evolução
Mudanças visuais tem um alto custo e sem escalabilidade
Risco mudanças visuais de impactarem a experiência dos produtos

6 de 17

Pessoas designers entrevistadas

12 de 183

Pessoas desenvolvedoras entrevistadas

Sensação de os produtos não estarem evoluindo na velocidade necessária impactava no churn
Produtos com diferentes identidades visuais enfraquecia o reforço de marca
Problemas de usabilidade impactavam no processo de adoção do produto, clientes precisavam de apoio de IS

51

Média do NPS dos produtos (3 meses)

384

Feedbacks de NPS analisados (3 meses)

2h ~ 6h

Tempo para colocar uma mudança no ar

Ferramenta padrão

O uso de diferentes ferramentas não permitia ter um repositório reutilizável de componentes

Processo de design

Ausência de processos de revisão e alinhamento de design não evoluía de forma colaborativa e sustentável

Documentação

Documentação não acessível e não havia responsáveis diretos por sua manutenção e evolução

Conhecimento

Pessoas desenvolvedoras tinham perfil mais voltado ao backend, e o frontend nao seguia boas práticas

Backend Vs Frontend

Utilizar a estrutura de tecnologia de backend para desenvolver frontend criava gargalo para as evoluções

Missão

Criar ferramentas e processos de design e frontend para acelerar a evolução dos produtos RD Station

Figma como ferramenta padrão para desenho de soluções e biblioteca de componentes reutilizáveis
Componentes e elementos visuais alinhados com as cores e tipografia da marca definidas pelo time de marketing
Documentação aberta, com link de fácil acesso, exemplos e boas práticas de uso dos componentes e padrões
Design Critique e Design Lab como parte do processo de design para compartilhar boas práticas e uso de componentes

React como ferramenta padrão para desenvolvimento de frontend e biblioteca de componentes reutilizáveis
Componentes além de estilos visuais, contemplando comportamento de experiência padrão
Microfrontend para separar a camada frontend do backend e permitir deploys isolados, mais autonomia para os times
Onboarding de pessoas como parte do processo de entrada na empresa