Sou Jack Green, UX designer na DoiT, e vim falar sobre algumas mudanças e decisões de design na reformulação de uma funcionalidade que já temos: o Ramp plans.
O Ramp plans mostra visualmente o progresso do cliente em relação ao compromisso de gastos com AWS ou Google Cloud, ajudando a acompanhar os gastos e identificar ajustes necessários.
Para extrair o máximo do potencial dessa funcionalidade, o time de produto decidiu trazer algumas melhorias. Fiz uma auditoria de design do que já existia para mapear problemas de usabilidade e também do design visual.
Captura de tela do Figjam durante a fase de pesquisa
Usando o recurso de notas do Figjam (mostrado acima), marquei pontos que precisavam de discussão e identifiquei áreas-chave para melhoria. A partir daí, usei esse material como base para conversar com o product manager e o lead developer, considerando as percepções e feedbacks deles, baseados em sua experiência e nos retornos dos clientes.
Nessa sessão, definimos os principais focos de atuação:
- Melhorar a visibilidade das informações principais
- Atualizar o backend para deixar os dados mais confiáveis
Sabemos, por meio de pesquisas com usuários e do contato dos stakeholders com os clientes, quais informações são mais relevantes para o usuário. Com isso em mente, queríamos apresentá-las de forma clara e fácil de absorver.
Atualizar o backend não é uma tarefa de UX, mas impacta diretamente a experiência de uso do ramp plan. Quando os dados são mais confiáveis, isso gera confiança e evidencia de imediato o valor da funcionalidade.
A primeira área de melhoria que quero destacar é a lista na página de ramp plans. Antes, ela vinha em formato de tabela.
Como era a página de visão geral do ramp plan antes das mudanças de design
Uma tabela não funciona bem nesse contexto porque:
- A quantidade de conteúdo na página se limita a 1 ou 2 ramp plans; a lista não cresce
- Não há hierarquia no conteúdo, o que dificulta a leitura dos detalhes
- Faltam algumas informações importantes na tabela
- É preciso clicar no ramp plan para entender o que está acontecendo
Por isso, troquei o layout de tabela por cards:
Como ficou o ramp plans depois das mudanças de design
O layout em cards trouxe os seguintes benefícios:
- As informações principais ficam mais legíveis
- O usuário não precisa clicar no ramp plan para ver todas as informações principais
- Uma hierarquia mais atraente e equilibrada visualmente
Levamos esse mesmo estilo de apresentar informações-chave para a visão detalhada do ramp plan.
Inserimos cards com os principais detalhes no topo da página para categorizar, organizar e destacar informações relevantes para o usuário, que antes não apareciam ou eram difíceis de identificar em meio a tantos dados.
A visão de detalhes atualizada do ramp plans
Uma das novidades foi a janela de detalhamento do gasto total. Ela permite que o usuário aprofunde a análise dos gastos em um diálogo compacto, sem quebrar o fluxo nem precisar recorrer a outras áreas do DoiT Console. Essa funcionalidade em específico foi um pedido de um account manager que lida com clientes todos os dias. Segundo ele, isso traria muito mais detalhe e insight para o cliente.
A janela de detalhamento do gasto total
Como sempre, desde o lançamento estamos monitorando ativamente os comportamentos e padrões de uso para identificar possíveis problemas ou novas melhorias.