Neste artigo, falo sobre meu processo de trabalho em um dos projetos de grande escala, reformulando a ferramenta interna da Probo (nós a chamamos de Cerebro ) para um melhor suporte ao cliente.

O que é Cérebro?

Cerebro é uma fonte única de verdade para todas as coisas Probo! É a ferramenta interna do Probo que possui várias seções, incluindo Criação de conteúdo (para criar e enviar conteúdo para o aplicativo), Tags (Criar tags de usuário e atribuir uma ação a essas tags), Painel e Usuários.

A Seção de Detalhes do Usuário é o banco de dados dos usuários, onde a equipe CX pode verificar as informações sobre as reclamações dos usuários e retorná-las ao usuário.

Para este artigo, você está vendo como redesenhamos a seção de detalhes do usuário do Cerebro.

O breve

Redesenhar a seção de detalhes do usuário no Cerebro para aprimorar a experiência do usuário e a produtividade da equipe de suporte ao cliente da Probo.

Entendendo o problema

A equipe de suporte usa o Cerebro para verificar as atividades dos usuários realizadas no aplicativo.

Para esta tarefa, primeiro identifiquei os principais fluxos de usuários e, em seguida, procurei problemas de UX neles:

Enquanto eu me sentava com a equipe de suporte para observar seus fluxos de trabalho e identificar problemas de usabilidade, resolvi alguns tickets sozinho. Isso foi durante a temporada do IPL, quando recebemos mais de 1.000 tíquetes por executivo da comunidade, portanto, a carga de trabalho deles era imensa.

Vê-los tão determinados a oferecer a melhor experiência de suporte para usuários probo mexeu comigo e me incentivou ainda mais a tornar sua experiência cotidiana melhor por meio do design.

Principais problemas identificados:

1. Fraca capacidade de escaneamento de informações: o principal trabalho dos usuários é obter informações do Cerebro, mas, olhando as tabelas, houve muito esforço cognitivo, pois eles tiveram que colocar muito foco para encontrar as informações necessárias na tela.
2. Navegação complexa: para alguns fluxos de usuários, a navegação era complexa e oculta.
3. Carga cognitiva aumentada: o design anterior não se alinhava com as leis de hierarquia e proximidade da Gestalt para reduzir a carga cognitiva dos usuários.
   Além disso, com determinados fluxos de usuários, os usuários precisavam lembrar informações de uma tabela e ir para outra tabela para comparar, o que aumentava o tempo para concluir uma tarefa.
4. A identidade da marca não está alinhada: a marca da Probo foi reimaginada há alguns meses, então o redesenho do Cerebro foi a oportunidade de se alinhar com a nova marca.

O aplicativo e o site da Probo foram reimaginados há alguns meses com uma nova marca, já era hora do mesmo nas ferramentas internas.

Vejamos o Antes vs Depois de algumas páginas:

Projetos - Antes vs Depois

Então, vamos detalhar esses redesenhos um por um.

Antes x Depois — Análise do Design

Seção Resumo do Usuário:
Esta seção consiste nas informações básicas dos usuários disponíveis, que são segregadas em três partes; informações semelhantes são mantidas juntas.

• As informações mais importantes são destacadas em frentes como detalhes e status do usuário.
• Priorização de ações: No design antigo, três CTAs estão presentes sem nenhuma hierarquia para ações primárias/secundárias.
  Também depois de analisar, fiquei sabendo que nenhum deles são CTAs ou ações primárias e, portanto, não precisam ser diretos e focados na tela. Os botões de ação são compostos por um botão chamado 'opções'.

• Barra de navegação lateral:
  em telas com tabelas de dados, o espaço horizontal é de extrema importância. Portanto, o design da barra de navegação lateral foi reinventado com botões de ícone ocupando um espaço mínimo.
• Se for necessária uma barra de navegação de tamanho normal, o usuário pode clicar no logotipo e expandi-la para a barra de navegação de tamanho normal com os botões Texto+Ícone.
  Sem expandir também, se os usuários precisarem mudar, eles podem passar o mouse sobre os ícones para ver o que significa:

Mas como a separação de guias facilitaria as comparações de dados entre tabelas em guias diferentes? Nós vamos cobrir isso em um tempo!

Agora mergulhando em mais alguns detalhes:

Otimizando as tabelas de dados para uma melhor UX:
As tabelas de dados têm uma tarefa a ser realizada — fornecer os dados necessários aos usuários rapidamente!
Para que esse trabalho seja feito, ele deve ter uma capacidade de digitalização rápida para encontrar informações relevantes.

Estes são os designs Antes vs Depois para as duas tabelas mais complexas - histórico de saldo e histórico de negociação

Para tornar a digitalização de dados mais fácil e rápida, geralmente 4 pontos são atendidos:

• Escaneamento rápido para encontrar informações relevantes por meio de codificação de cores e adição de hierarquia e proximidade ainformações separadas.
• Agrupando dados semelhantes
• Eliminando informações repetidas
• Reorganizando dados para comparação rápida

Como foi o desempenho?

O Redesign junto com algumas correções de bugs foi planejado para desenvolvimento e através dos resultados dos testes de usabilidade, espera-se aumentar a produtividade em 2x.

Como ainda está em desenvolvimento, não é possível compartilhar o desempenho final e os KPIs no momento, mas atualizarei aqui assim que for ao ar.

O que eu aprendi?
A maior parte do trabalho que fiz antes deste projeto estava relacionada à adição de novos recursos de design ao aplicativo do probo ou às páginas de destino do site.
Portanto, trabalhar em um conjunto de dados tão grande foi um desafio em si, aprendi muito sobre como o UX é um resultado direto de como a interface do usuário foi implementada.

Também para os entusiastas do design, aqui está o link para um artigo no site do grupo NN que me ajudou muito a entender e projetar tabelas de dados.

Ps, também aprendi a documentar o processo de design regularmente porque este estudo de caso me levou muito tempo para escrever

Qual é o próximo?

1. Explorando micro-interações, bem como estados vazios para adicionar pequenos prazeres entre todo o trabalho que não foi abordado agora devido a uma crise de tempo.
2. Explorando atalhos de teclado para usar a ferramenta, a partir de agora todos na equipe têm MacBooks (flex 101 ), portanto, é eficiente e fácil usar trackpads por enquanto.
3. Por enquanto, o redesenho apenas da seção de detalhes do usuário é feito, a próxima fase deve ser redesenhar todas as outras seções do Cerebro.

Um grande agradecimento à nossa incrível equipe de CX, eu literalmente invadi a sala deles pelo menos 5 vezes por dia durante este projeto, eles responderam a todas as minhas perguntas e dúvidas da melhor maneira possível e isso foi especialmente durante a temporada IPL, a mais movimentada época do ano!

Agradeço também à minha incrível equipe de design ❤️, bem como a todos os proprietários de produtos que me ajudaram com valiosos comentários e sugestões.

Obrigado por ler! Até breve com mais um estudo de caso

Diga oi para Nidhi no LinkedIn • Instagram • Twitter