Trabalho / VisualCue

Cada novo cliente exigia uma implementação sob medida

Cada novo cliente exigia muito trabalho personalizado, tornando a implantação cara e difícil de escalar. O objetivo era criar um processo reutilizável e permitir que os próprios clientes configurassem a plataforma, sem precisar conhecer toda a complexidade técnica por trás dela.

Função
Product Designer
Escopo
UX e UI de ponta a ponta, sistema de tiles e fluxo de dados
Período
2020 — 2022
Plataformas
Web · App desktop
Toque para ver em tamanho maior ↗ NGN Insights: tiles configuráveis diretamente na plataforma.
3 superfícies App web do supervisor, app desktop do agente e painel de configuração da empresa
Um sistema reutilizável Implementações personalizadas → Processo reutilizável
1 mês → 1 semana Tempo de implementação menor para um cliente novo
O BRIEFING

O produto funcionava bem. Difícil era colocá-lo em operação.

Cada novo cliente exigia bastante trabalho personalizado da nossa equipe. Precisávamos criar os elementos visuais, preparar os dados e adaptar a solução ao ambiente de cada empresa. Isso encarecia a implantação e dificultava a expansão do produto.

Cada tile era uma ilustração, desenhada camada por camada para cada cliente, então produzir um exigia alguém treinado para desenhá-lo. Do lado dos dados era igual: um desenvolvedor escrevia procedimentos para cada cliente novo.

A ideia era trazer esse trabalho para dentro do produto. Assim, o cliente poderia configurar a plataforma com facilidade, sem precisar lidar diretamente com a complexidade técnica do sistema.

ONDE COMEÇOU

Uma linguagem visual feita sob medida para cada cliente

O VisualCue apresentava dados em tiles personalizados, que combinavam ícones, cores e layouts. A linguagem visual era expressiva, mas difícil de reproduzir de forma consistente.

Eu vinha desenhando esses tiles pessoalmente desde 2013.

A personalização também se estendia à estrutura por trás da interface. Os dados precisavam ser preparados antes de chegar à plataforma, e até cálculos simples dependiam de desenvolvimento feito fora do produto.

Toque para ver em tamanho maior ↗ Cada cliente recebia tiles desenhados de acordo com seus dados e necessidades específicas.
Toque para ver em tamanho maior ↗ Os tiles eram desenhados camada por camada no Illustrator e exportados por meio de um script. Cada nova variação exigia repetir esse processo manual.

Conforme o VisualCue avançou para o mercado de call center, o produto evoluiu para CueFit — e sua linguagem visual precisava ficar mais focada e repetível.

CUEFIT

De tiles personalizados a um sistema visual reutilizável

Redesenhei a linguagem visual a partir de uma estrutura consistente. Assim, o mesmo sistema podia ser reutilizado em diferentes projetos, mantendo cada tile adequado ao dado que representava.

O trabalho foi decidir o que fixar e o que deixar aberto. O anel, os segmentos, os cantos e o centro viraram parâmetros com faixas definidas. O que um cliente podia expressar ficou mais estreito, e o tile virou algo que o usuário montava sem desenhar.

Toque para ver em tamanho maior ↗ O anel criou uma estrutura comum para os tiles, enquanto o conteúdo e o status variavam conforme cada projeto.

O Grupo NGN adquiriu o CueFit e a equipe responsável pelo produto. A partir daí, começamos a transformá-lo no que viria a ser o NGN Insights.

NGN INSIGHTS

O sistema visual passou a fazer parte do produto

Com a evolução do CueFit para NGN Insights, o sistema visual passou a fazer parte da própria plataforma. Os usuários podiam criar e configurar seus tiles sem depender de uma implementação feita pela equipe.

O editor é organizado do jeito que o tile é. Realtime, Insights, Corners, Labels e Tooltip são as partes do tile na ordem em que aparecem nele, e a prévia à direita se atualiza a cada escolha.

Toque para ver em tamanho maior ↗ O tile passou a ter áreas de conteúdo predefinidas: doze espaços para KPIs, quatro campos de texto e um indicador de status.
Toque para ver em tamanho maior ↗ O editor segue a anatomia do tile, seção por seção, com a prévia se atualizando conforme cada campo é preenchido.
IMPLEMENTAÇÃO

Simplificando a configuração dos dados

Tarefas que antes dependiam de desenvolvimento personalizado passaram a ser feitas visualmente dentro do produto. A interface permitia conectar, combinar e transformar dados, tornando a lógica do sistema mais acessível.

Toque para ver em tamanho maior ↗ Era possível conectar e configurar uma fonte de dados diretamente pela interface.
Toque para ver em tamanho maior ↗ O processo de configuração permitia mapear campos, tipos de dados e chaves.
Toque para ver em tamanho maior ↗ Os usuários podiam definir cálculos e comparações na própria plataforma, sem precisar solicitar uma etapa de desenvolvimento separada.
EXPERIÊNCIA DO AGENTE

A experiência do agente passou a fazer parte do produto

No NGN Insights, os agentes passaram a acompanhar seu desempenho com mais contexto, informações em tempo real e feedback dentro do próprio produto.

O centro do tile abrigava um desenho. Quando virou um espaço configurável, passou a abrigar uma fotografia. Um painel com trinta e seis agentes são trinta e seis fotos colocadas no mesmo espaço.

Toque para ver em tamanho maior ↗ Com a estrutura do tile definida, também foi possível incluir a foto do agente ao lado dos dados de desempenho.
EVOLUÇÃO DO PRODUTO deslize →
EtapaProdutoSistema visualImplementação
Ponto de partidaVisualCueArtístico / altamente customizadoTrabalho sob medida
Tornando repetívelCueFitSistema visual repetívelTrabalho sob medida
Tornando configurávelNGN InsightsSistema configurável no produtoConfiguração no produto
O NGN Insights em uso, fechando o case
RESULTADO

Onde isso foi parar

Montar um tile deixou de depender de um ilustrador treinado e passou para os próprios usuários do produto. A implementação de um cliente novo caiu de mais de um mês para pouco mais de uma semana.