UX/UI Designer
Meu papel
Jun - Set 2023
Prazo
Montage de API
Redesign de uma ferramenta interna de criação e documentação de APIs, com foco na simplificação de fluxos complexos e melhoria da experiência para usuários técnicos e não técnicos. O projeto buscou equilibrar usabilidade, eficiência operacional e restrições de custo, transformando uma ferramenta com alto índice de reclamações em uma solução mais intuitiva, organizada e funcional.
Direcionamento
Estratégia
Objetivos do redesign • Escopo UX/UI • Restrições • Oportunidades de melhoria
Entendimento
Empatia
Benchmarking • Proto-personas (Aluno e Gestor) • Jornadas • Principais dores
Estrutura e Problema
Definição
Problemas centrais de UX • Arquitetura da informação • Funcionalidades por perfil • Sitemap
Exploração de Soluções
Ideação
Fluxos • Wireframes low-fi • Gamificação • Padrões de interação
Design e Prototipação
Prototipação
Objetivos do redesign • Escopo UX/UI • Restrições • Oportunidades de melhoria
Validação e Ajustes
Testes
Avaliação heurística • Revisões • Iterações • Aprendizados
Estratégia
Sobre o projeto
Contexto
A Montagem de API é uma ferramenta interna criada para integrar Negócios, Desenvolvimento e CQ no processo de criação de Web APIs.
Com a expansão do uso para perfis não técnicos, a ferramenta passou a apresentar limitações de usabilidade que impactaram diretamente a eficiência das equipes.
Com a expansão do uso para perfis não técnicos, a ferramenta passou a apresentar limitações de usabilidade que impactaram diretamente a eficiência das equipes.
Problema
A interface apresentava fluxos complexos, falta de feedback claro e organização pouco intuitiva, gerando confusão durante a montagem das APIs.
Do ponto de vista do negócio, isso resultava em alto volume de reclamações internas e baixo retorno sobre o investimento inicial, exigindo um redesign com custo controlado e equipe reduzida.
Solução
Conduzi um redesign focado em simplificação de fluxos, melhoria da hierarquia visual e clareza nas interações.
A proposta buscou reduzir carga cognitiva, tornar o sistema mais acessível a diferentes níveis técnicos e gerar impacto rápido sem comprometer recursos.
Minhas Contribuições
Conduzir o redesign completo da interface.
Reestruturar fluxos e arquitetura da informação.
Refinar a hierarquia visual e padrões de interação.
Tornar a experiência mais intuitiva para públicos não técnicos.
Garantir viabilidade dentro das limitações de time e orçamento.
Antes
Estrutura e Problema
Cenário Atual
As dificuldades enfrentadas pelos usuários apontam para a necessidade de melhorar a experiência do usuário como um todo, ao passo que as frustrações do time de negócios destacam a importância de alcançar objetivos claros, como a redução de custos. Por conta disso, precisamos identificar áreas comuns, como simplificar processos complicados e incentivar a colaboração entre equipes. Um redesign eficiente deve trazer benefícios tanto para os usuários quanto para a empresa, buscando um equilíbrio entre suas necessidades e metas.
Frustrações dos Usuários:
- Interface com foco na experiência do usuário.
- Falta de feedback para guiar as ações dos usuários.
- Componentes que causam confusão.
- Processos complexos para usuários não técnicos.
- Dificuldade em visualizar as ações realizadas, sem opção para escolher quando visualizar ou não.
- Confusão durante a montagem dos dados da API.
Frustrações de Negócios:
- Ferramenta interna com muitas reclamações dos colaboradores.
- Primeira versão não atendeu às expectativas.
- Considerável esforço interno nas versões iniciais, mas ainda assim não alcançou o resultado desejado.
- Necessidade de redesign com baixo custo, dado que se trata de uma ferramenta interna e com uma equipe para desenvolvimento reduzida, e foco na interface.
Entendimento
Usuários
Entendendo os Usuários
As dificuldades enfrentadas pelos usuários apontam para a necessidade de melhorar a experiência do usuário como um todo, ao passo que as frustrações do time de negócios destacam a importância de alcançar objetivos claros, como a redução de custos. Por conta disso, precisamos identificar áreas comuns, como simplificar processos complicados e incentivar a colaboração entre equipes. Um redesign eficiente deve trazer benefícios tanto para os usuários quanto para a empresa, buscando um equilíbrio entre suas necessidades e metas.
Jornada do Usuário
Para compreender e abordar diretamente o problema em questão, foi elaborada uma jornada do usuário com o objetivo de identificar as etapas em que os usuários enfrentavam mais dificuldades. A partir disso, entender na onde deveriam ser as nossas mudanças.
Jornada do Usuário
Entendimento
Usuários x Negócio
Encontrar um equilíbrio entre as necessidades dos usuários e do negócio não representou um desafio significativo, pois ambas as partes entenderam a urgência das mudanças e reconheceram os problemas da ferramenta atual.
Embora tivéssemos restrições de prazo, a complexidade da interface demandava várias alterações. Após discussões, a equipe de negócios concordou que um redesign completo, mantendo as funcionalidades, pois valia o investimento a longo prazo.
As mudanças na interface não foram um obstáculo, pois, sendo uma demanda interna, a flexibilidade em relação ao prazo foi maior.
Necessidades dos Usuários:
- Maior feedback para orientar as ações dos usuários.
- Uma melhor hierarquia visual.
- Simplificação dos processos.
- Melhorias na responsividade da tela.
- Melhoria na visualização em tempo real das ações realizadas.
Necessidades do Negócio:
- Implementação de uma solução moderna e atual.
- Inicialmente, poucas mudanças no layout.
- Consideração de custo a curto e longo prazo.
- As alterações precisavam ser principalmente na parte de listagem, pois é a parte que mais causa confusão.
- Não mexer na funcionalidade da ferramenta, apenas no visual.
Estrutura e Problema
Problemas
A fim de nos dar uma ideia melhor sobre quais as partes que iria demandar maior atenção e das principais dificuldades enfrentadas pelos usuários, dividimos os problemas em duas categorias: Problemas Simples (laranja) e Grandes Problemas (vermelho).
Antes
Depois
Problemas Simples
- Interface com componentes que podem gerar confusão.
- O label "Salvar" do botão não está alinhado com sua ação dele.
- Ordem confusa na lista.
- Ausência de label no dropdown.
- Botões da topbar sem descrição, exceto quando o cursor está sobre eles.
Grandes Problemas
- Ferramenta interna, porém com muitas reclamações dos colaboradores devido à complexidade e interface confusa.
- Hierarquia da lista extremamente confusa.
- Pouca descrição e feedback das ações.
- Dificuldade em criar e editar itens na lista.
- Problemas de responsividade comprometendo a visualização da aba à direita.
Design e Prototipação
Soluções
Soluções Encontradas
Com base nas informações coletadas, iniciamos as alterações na interface, sintetizando os insights em uma proposta de design que busca equilibrar e atender às principais necessidades de ambas as partes envolvidas.
Evolução do Design
Durante o processo de design, exploramos diversas opções e alternativas para as telas, buscando encontrar a solução que melhor atendesse às nossas necessidades e às expectativas dos usuários. Essa evolução gradual nos permitiu refinamento até alcançar o resultado final.
Versão 1
Versão 2
Versão Final
Design e Prototipação
Telas finais
Após analisar todas as informações, iniciamos as alterações finais na interface, sintetizando os insights em uma proposta de design que busca equilibrar e atender às principais necessidades de ambas as partes envolvidas.
01
Nome e Descrição
Essa etapa do redesign foi relativamente simples, envolvendo apenas ajustes visuais e correções na hierarquia das informações.
Antes
Depois
02
Dados Controller
Nesta fase, além das mudanças visuais e de componentes, revisamos os labels dos botões para que reflitam melhor suas funções. Também reorganizamos a ordem das listas, destacando os itens mais recentes.
Antes
Depois
03
Dados Action
Nesta fase, além das mudanças visuais e de componentes, revisamos os labels dos botões para que reflitam melhor suas funções. Também reorganizamos a ordem das listas, destacando os itens mais recentes.
Antes
Depois
03.1
Lista
No componente de lista, foi onde dedicamos mais tempo e atenção, pois era onde surgiam as maiores confusões para os usuários. Para resolver todos os problemas identificados, foi necessário realizar um redesign completo, mantendo a mesma lógica da lista anterior, porém tornando tudo mais claro para o usuário.
Antes
Depois
Antes
Depois
04
Visualização da API
Para resolver os problemas de responsividade e visualização da interface em monitores de diferentes tamanhos, implementamos a visualização em tempo real da API como uma sobreposição. Os usuários agora têm também a opção de visualizar e editar simultaneamente, garantindo uma experiência mais consistente e responsiva.
Antes
Depois
Design e Prototipação
Resultados Finais
O projeto teve como objetivo simplificar a interface e tornar a ferramenta acessível tanto para usuários experientes em APIs quanto para perfis menos técnicos.
Após o redesign, observamos uma melhora perceptível na experiência de uso, com maior clareza nos fluxos e redução de dúvidas operacionais. O tempo de onboarding de novos colaboradores diminuiu, facilitando a integração entre áreas.
Para usuários recorrentes, houve ganho de eficiência na execução de tarefas e maior fluidez na montagem das APIs, tornando o processo mais ágil e previsível.
Validação e Ajustes
Próximos Passos
Objetivos
Com os ganhos obtidos no redesign, o próximo passo é escalar as melhorias para as demais etapas do processo, garantindo consistência e fluidez em toda a jornada.
Também será implementado um acompanhamento contínuo de métricas para monitorar eficiência, redução de erros e abandono de fluxo.
Também será implementado um acompanhamento contínuo de métricas para monitorar eficiência, redução de erros e abandono de fluxo.
Métricas para validar o impacto
Percentual de usuários que finalizam o processo sem interrupções.
Quantidade de tentativas incorretas ou retrabalho por etapa.
Duração total para finalizar o fluxo.
Identificação de pontos críticos com maior evasão.
