Criando um Editor de Dashboards para Gestão de Performance

O Problema

A rigidez do sistema atual criava um gargalo operacional crítico, prejudicando a retenção dos usuários e a percepção de valor do produto.

Pontos de dor:

• Desconexão de Fluxo: A necessidade de ferramentas externas tornava o processo de prestação de contas lento e suscetível a erros manuais.

• Falta de Autonomia: Os clientes não conseguiam adaptar a visualização dos dados às suas necessidades específicas de negócio; dependiam de templates pré-definidos e engessados.

• Manutenção Ineficiente: Qualquer pequena alteração visual exigia que o usuário refizesse todo o trabalho fora da plataforma, gerando um alto custo de tempo.

Hipótese: Ao construir um editor de board nativo com funcionalidades de design (camadas, formas e componentes de dados), reduziríamos o tempo de preparação de relatórios e centralizaríamos toda a jornada de gestão de performance dentro do Stratws.

Solução

Dada a alta complexidade técnica de criar um "editor dentro de um software", decidimos fatiar a entrega em três etapas estratégicas para garantir qualidade e testes constantes:

1. A Base do Editor (Core e Manipulação): Focamos na infraestrutura do board. Implementamos funções essenciais de softwares de design, como alinhar, justificar, bloquear camadas, duplicar e agrupar elementos. Isso garantiu que o usuário tivesse o controle básico de organização visual.

2. Flexibilidade Visual (Formas e Geometria): Adicionamos a possibilidade de inserir formas (quadrados, círculos, triângulos). Isso permitiu que o usuário criasse molduras, separadores e estruturas de layout personalizadas, adaptando o Scorecard à identidade visual da sua própria empresa.

3. Inteligência de Dados (Indicadores Dinâmicos): A entrega final conectou o design aos dados vivos do sistema. Criamos componentes de indicadores que puxavam automaticamente metas e valores reais (mensais e anuais), permitindo que o Scorecard se tornasse um painel dinâmico e sempre atualizado.

Antes:

Depois:

"Interface final permitindo agrupamento de elementos e vinculação direta com metas"

Processo

O processo foi focado em tangibilizar comportamentos de design para usuários que não necessariamente são designers, utilizando o Whiteboard como ferramenta principal de ideação.

• Benchmarking de Editores: Analisei ferramentas como Slides e Figma para entender quais comandos de teclado e interações de mouse (drag and drop, travar camada) eram universais e deveriam ser replicados para reduzir a curva de aprendizado.

• Ideação em Whiteboard: Utilize o quadro branco para desenhar a hierarquia da interface. O desafio era: onde colocar o painel de ferramentas e as propriedades das camadas sem poluir a visão dos indicadores?

• Fatiamento Técnico: Trabalhei em conjunto com a Engenharia para validar se a lógica de "camadas" no frontend não impactaria a performance do carregamento dos indicadores de backend.

Resultado e Aprendizados

O projeto transformou a funcionalidade de Scorecard em um dos pontos mais fortes da plataforma, gerando autonomia real para os gestores.

O que eu faria novamente:

• Entrega em Etapas: O fatiamento em 3 partes foi essencial. Ele permitiu que o time de desenvolvimento resolvesse problemas de performance do board antes de lidarmos com a complexidade de puxar os dados dos indicadores.

O que eu faria diferente:

• Biblioteca de Templates: Eu teria criado uma galeria de templates pré-configurados para que o usuário não precisasse começar sempre de um board em branco, acelerando ainda mais o primeiro uso (Onboarding).

Meu Papel no Projeto

Atuei como Product Designer, sendo responsável por:

• Design de Interação: Desenhar toda a lógica de funcionamento do editor (seleção, movimentação e edição de elementos).

• Arquitetura de Informação: Estruturar como as novas funcionalidades de design conviveriam com os dados complexos de indicadores.

• Facilitação: Conectar as necessidades dos clientes (flexibilidade) com as possibilidades da engenharia (estabilidade do editor).