Valora Bus um dos produtos da Valora uma Startup com soluções de precificação dinâmica.

Meu papel

Trabalhei como a única Designer de Produto, no modelo PJ, e meu desafio era reduzir a complexidade da plataforma para que os usuários pudessem conhecer todo o potencial da solução, alinhado as necessidades do negócio.

Contexto

Iniciei na equipe me familiarizando com o produto e com o time, procurei me informar sobre meus pares e já aproveitei para coletar dados que poderiam ser relevantes sobre o produto. 

Como primeira Product Designer do time fiz questão de compartilhar com os membros da empresa sobre como seria a minha atuação e me colocando a disposição de tirar dúvidas sobre todos os processos que seriam realizados. Em startup a horizontalidade prevalece e pode ser um artificio especial.

Algumas demandas já haviam sido mapeadas para que eu pudesse atuar, mas lembrando que tínhamos um desafio que precisava de minha atenção, então ficou acordado que algumas demandas mais urgentes seriam tratadas em paralelo.

Case

Desafio: Simplificar a plataforma para que clientes e usuários possam explorar e aproveitar todo o potencial da solução, de forma alinhada às necessidades do negócio.

Framework

Utilizei o framework Double Diamond como base para estruturar o processo de identificação e solução de problemas, com o objetivo de reduzir a complexidade da plataforma e permitir que os usuários explorassem todo o potencial da solução.

O Double Diamond foi fundamental para descobrir e definir os problemas que estavam impactando diretamente a experiência do usuário com o produto.

Feedbacks e demandas de design eram analisados e combinados com entendimentos como ponto inicial.

Descoberta

Na fase de descoberta (exploração) eu criei um mural para reunir o entendimento, onde se busca compreender o problema a ser resolvido, o contexto e as necessidades do projeto. Basicamente o que iria utilizar daqui pra frente e evoluir conforme o amadurecimento do produto.

Ferramenta: Milanote

Composto por

• Princípios de Design: Concepção do projeto.
• Meta: Definição de objetivos.
• Planejamento Criativo: Planejamento e conceituação.
• Branding: Paleta de cores, logo, tom de voz, personalidade e público-alvo.
• Plataforma: Proposta de valor, posicionamento, visual, performance e escalabilidade.

Definição

Mapa de empatia

Durante meu processo de coletar dados recebi da Product Owner: mapa de empatia, benchmarking, relatórios e outros arquivos sobre o produto.

Após a coleta do material existente, como documentos, protótipos e informações já disponíveis, executei atividades de estudo.

Screen flow

Como atividade de estudo inicial criei um screen flow. Criar um screen flow logo no início de um projeto é essencial porque ele ajuda a visualizar o fluxo de interação entre as telas do produto, mas também como uma excelente forma de dar o ponta pé para que em conjunto com o time pudéssemos alinhar nossa visão. Eu recebi um feedback positivo dos devs de Back-end que acharam interessante em ver como cada parte de suas entregas estavam interligadas, como elas eram tratadas e como o usuário as percebia visualmente.

O screen flow me ajudou a formular perguntas sobre diferentes aspectos da plataforma e a adotar a perspectiva do usuário.

User flow

Meu objetivo era simplificar a experiência do usuário, eliminando pontos de fricção e tornando o produto mais intuitivo e fácil de usar. Então, criei o user flow de todos os fluxos, também mapeados em screen flow, para:

• Visualizar o caminho ideal que o usuário deve seguir para concluir uma ação.
• Identificar possíveis frustrações e pontos de fricção na jornada do usuário.
• Detectar áreas de melhoria nos fluxos existentes, otimizando a experiência.

O diagrama inclui:

• Ações do usuário: como cliques, toques, seleção de opções ou preenchimento de campos.
• Pontos de interação: botões, links ou outras áreas clicáveis.
• Decisões do usuário: por exemplo, escolha entre diferentes opções ou rotas.

Pesquisa com usuários

Pra formular perguntas eu usei um modelo da Sarah Doody.

A equipe interna de operações, que era a principal usuária do sistema atuando em nome dos clientes, foi escolhida para participar de algumas etapas do processo. A equipe de Operações era responsável pelo atendimento ao cliente, abrir e monitorar cadastros da solução da Valora garantindo entrega de resultados.

Após a coleta das respostas do formulário, foi realizado uma seção qualitativa no formato de entrevista com cada usuário para que eu pudesse me aprofundar sobre as respostas e tirar dúvidas. Uma técnica que aprendi ao realizar o curso UX Research para iniciantes da Patricia Reiners. Depois os dados foram analisados para identificar fatores comuns e entender padrões, levando em consideração dados já obtidos sobre o produto e concorrentes.

Além de conseguir reunir dados para que as personas fossem criadas, que contribuíram para orientar o processo de tomadas de decisão, também consegui reunir dados sobre oportunidades, dores latentes a respeito da complexidade e insights. 

Personas

Por que isso é importante para a empresa? Entender o perfil do usuário do produto hoje dará as nuances do projeto para que seja entregue um produto rico para clientes.

Em busca de aprender e entender o perfil operacional do Valora Bus agrupei os resultados da entrevista em duas personas que representam dois perfis de usuários.

Perfis

• Estratégico
• Operacional

Análise heurística

Realizei análise heurística de Nielsen na plataforma como um todo para garantir que o design atual estava alinhado com os princípios de usabilidade, sendo muito relevante quando se trata de uma plataforma com um nível mais alto de complexidade e com o objetivo de simplificar. 

Observei alguns aspectos que podem ser ajustados para melhor aderência às heurísticas de Nielsen:

• Alta tecnicalidade: Relacionado à compatibilidade com o mundo real (2) e reconhecimento em vez de memorização (6).
  • Compatibilidade com o mundo real (2): Definições com jargões técnicos ou termos vagos podem criar obstáculos à compatibilidade com a linguagem e lógica dos usuários, porque a interface deve refletir o entendimento e o vocabulário do público-alvo.
  • Reconhecimento em vez de memorização (6): O sistema deve minimizar a necessidade de memorização, apresentando informações relevantes no momento certo e facilitando o reconhecimento de ações e comandos.
• Comportamentos não convencionais: Relacionado à prevenção de erros (5) e flexibilidade e eficiência de uso (7).
  • Prevenção de erros (5): A interface deve reduzir a ocorrência de erros por meio de interações previsíveis, confirmações antes de ações críticas e feedbacks claros sobre possíveis consequências.
  • Flexibilidade e eficiência de uso (7): O sistema deve permitir que usuários realizem tarefas de maneira eficiente, evitando fluxos excessivamente longos ou complexos e oferecendo atalhos e automações sempre que possível.
• Falta de feedback ao usuário: Relacionado à visibilidade do status do sistema (1) e ajuda os usuários a reconhecer, diagnosticar e corrigir erros (9)
  • Visibilidade do status do sistema (1): A interface deve fornecer feedback imediato sobre o status do sistema, informando claramente as ações em andamento e os resultados das interações do usuário.
  • Ajuda os usuários a reconhecer, diagnosticar e corrigir erros (9): O sistema deve oferecer mensagens de erro claras e orientações objetivas para que os usuários possam entender o problema e resolvê-lo rapidamente.

Matriz de priorização

Como o artigo da NN/g sobre priorização diz em sua introdução sobre a crescente lista de possibilidades quando se está atuando em projeto / produto , na Valora não foi diferente, o ambiente era propicio para a crescente lista de atividades e aprimoramentos, vale destacar que era extremamente incentivado, porém mantinha meu foco no desafio, conforme alinhamento, para conduzir as minhas ações e a matriz de priorização ajudava com impasses.

Ao utilizar o conceito da matriz de priorização, conseguia em parceria com a PO e o Chefe de Produto identificar com clareza o que precisava ser priorizado.

Contexto da Prioridade

Durante a análise das prioridades, com base em dados coletados e na pesquisa de usuário, conseguimos identificar que as atividades rotineiras da plataforma, especialmente aquelas realizadas por meio de cadastros, estavam entre os pontos críticos para os usuários e aspectos que poderiam ser ajustados para melhor aderência às heurísticas de Nielsen. Ao abordar esse problema, esperamos reduzir o tempo médio de cadastro e aumentar a satisfação do usuário e do cliente.

Com base nessa análise, concluímos que focar nas atividades rotineiras de cadastro seria uma das ações mais estratégicas, dado seu alto impacto e urgência. Isso nos permitirá obter melhorias significativas para os usuários em curto prazo.

Definição do Problema

A falta de uma experiência intuitiva e clara nas páginas de cadastro compromete a navegação tornando-a difícil e aumentando a chance de erros. Isso impacta diretamente a eficiência do usuário e a satisfação do cliente e do usuário diariamente.

Ideação

Arquitetura da informação

A arquitetura da informação define como os elementos da página são estruturados, hierarquizados e dispostos para facilitar o entendimento e a ação do usuário. Se ela não estiver bem planejada, o usuário pode sentir:

• Sobrecarga Cognitiva: Muitos campos ou informações confusas tornam o preenchimento cansativo.
• Dificuldade de Navegação: Elementos desorganizados geram atrito e aumentam a frustração.
• Falta de Clareza: Erros por preenchimento incorreto podem ser resultado de instruções pouco intuitivas.

Para explorar melhorias na clareza, intuitividade e eficiência do fluxo de cadastro, foi essencial olhar para aspectos como hierarquia visual, estrutura da informação e estrutura lógica dos formulários.

Hierarquia visual

versão atual página de cadastro

UI Tips for Better Forms

Ao analisar a versão atual das páginas de cadastro, identifiquei que seguiam um padrão de leitura em Z, mais indicado para páginas de navegação, mas menos eficiente para formulários complexos, que é uma das características das páginas de cadastros do produto.

Para formular uma abordagem mais intuitiva, explorei um modelo de leitura em F, que favorece o preenchimento fluido e linear, reduzindo dispersões e melhorando a orientação do usuário.

Estrutura da informação

A estrutura da informação define como as seções, menus, campos e fluxos de navegação são organizados para atender às necessidades dos usuários. Para facilitar a análise e a reestruturação inicial, utilizei recursos diretos, como Word para um rascunho, mapeando atributos, padrões visuais e funcionais. Uma abordagem prática para mapeamento preliminar.

Esse mapeamento inicial não apenas trouxe clareza à hierarquia e à organização dos elementos, como também serviu de ponto de partida essencial para compreender as dependências e estabelecer a base para a estrutura lógica. Assim, a análise contribuiu para alinhar o design e a funcionalidade, garantindo consistência e foco na usabilidade.

Estrutura lógica

A estrutura lógica do formulário impacta diretamente na redução do esforço cognitivo, na melhoria da usabilidade, além de minimizar frustrações e erros durante o preenchimento. Para explorar possibilidades de aprimoramento, analisei fluxos de usuário e realizei pesquisa com usuários.

Aspectos que se destacaram para serem investigados:

1.Sequência lógica e relacionamento entre campos

• Avaliei a ordem mais intuitiva para garantir que informações dependentes fossem preenchidas na sequência adequada.
• Identifiquei possíveis relações entre campos para evitar fluxos confusos ou redundantes.

2.Remoção de campos desnecessários

• Apliquei o princípio de minimizar a carga cognitiva, reduzindo frustrações e otimizando o tempo de preenchimento.
• Levantei oportunidades para remover campos, como “Empresa”, quando o sistema já possuía essa informação.

3.Agrupamento de informações relacionadas

• Explorei diferentes formas de organização para apresentar informações de maneira coesa (exemplo: separar “Dados Pessoais” de “Dados de Pagamento”).
• Realizei um card sorting com a Product Owner para validar a percepção de estruturação junto aos usuários internos (equipe de operação).

Design de interação

Na etapa de ideação de Design de Interação, foram analisados mapa de empatia, user flow, user research e personas para entender melhor suas necessidades e comportamentos.

Exploração de Melhorias

Durante as descobertas iniciais, realizei uma análise heurística como parte de uma auditoria de UX, do qual foi possível identificar oportunidades de melhoria, aspectos que poderiam ser ajustados para melhor aderência às heurísticas de Nielsen, e que se aplicam na experiência da página de cadastro. Como:

• Reconhecimento em vez de memorização (6): Evitando que o usuário precise lembrar de regras ocultas, deixando dependências e relações claras na interface.
  • Explorar conceito: de garantir que as restrições do sistema sejam refletidas de forma transparente na interface do formulário, para evitar erros e aumentar a clareza.
• Flexibilidade e Eficiência de Uso (7): Permitir que usuários usem atalhos para aumentar a eficiência.
  • Explorar conceito: da implementação de atalhos de teclado baseados em boas práticas de acessibilidade, garantindo suporte a navegação sem mouse e foco visível para preenchimento dos formulários.
• Ajudar os usuários a reconhecer, diagnosticar e corrigir erros (9): Oferecendo mensagens explicativas e soluções claras para que o usuário compreenda e resolva problemas rapidamente, sem frustrações.
  • Explorar conceito: de garantir acessibilidade implementando feedbacks claros e evitando campos desabilitados sem contexto, assegurando que todos os usuários, compreendam as ações disponíveis.

Desafio e frustrações dos usuários

Uma das principais dores identificadas no user research foi a falta de agilidade e produtividade no preenchimento de formulários, o que levou à exploração de soluções de automação.

Possível solução explorada: Automações de preenchimento através da comparação de componentes com bibliotecas consolidadas, como o Material Design, que oferece diretrizes alinhadas às boas práticas de usabilidade e às convenções estabelecidas no mercado do uso de automações.

Benchmarking

Para explorar oportunidades de melhoria e inovação, realizei um benchmarking ao longo do processo de design sempre que foi necessário buscar boas práticas, padrões reconhecidos e soluções já validadas. Essa pesquisa ajudou a identificar padrões, tendências e possíveis diferenciais competitivos que poderiam ser explorados no design da solução.

Os insights obtidos serviram como referência para nortear decisões estratégicas na experiência do usuário, dessa forma as soluções propostas estariam alinhadas às expectativas do público e ao mercado.

Prototipagem

Design de interação

Durante a fase de prototipagem, foquei em aprimorar a interação dos campos nos formulários para proporcionar uma experiência de usuário mais eficiente e intuitiva, com base nas explorações na fase de ideação. Implementei as seguintes definições para orientar o usuário, agilizar o processo de preenchimento e aumentar a produtividade conforme peculiaridades do produto:

1. Placeholders

• Heurística: Reconhecimento em vez de memorização (6) – Evitando que o usuário precise lembrar de regras ocultas, deixando dependências e relações claras na interface.
• Função: Guiar o preenchimento dos campos de maneira imediata e visível.
• Exemplo: Campo de pesquisar “Busque…” ou “Buscar produtos, marcas e mais”
• Desafios: Observei que o placeholder desaparece quando o usuário começa a digitar, o que pode causar confusão caso o usuário esqueça o que estava escrito inicialmente.
• Benefício: Esclarecer regras de preenchimento combinando com outros artifícios, como por exemplo com o uso de máscaras.

2. Textos de apoio

• Heurística: Reconhecimento em vez de memorização (6) – Evitando que o usuário precise lembrar de regras ocultas, deixando dependências e relações claras na interface.
• Função: Fornecer orientação adicional ou padrões específicos que precisam ser seguidos.
• Exemplo: Nome do cadastro é um campo do qual cada cliente vai decidir preencher de uma forma, no vamos sugerir um exemplo para que o nome o ajude a identificar o cadastro de maneira rápida.
• Benefício: Ao contrário dos placeholders internos, o hint text permanece visível enquanto o usuário preenche o campo, mantendo a orientação acessível e evitando confusões.

3. Mensagens

• Heurística: Ajudar os usuários a reconhecer, diagnosticar e corrigir erros (9) – Oferecendo mensagens explicativas e soluções claras para que o usuário compreenda e resolva problemas rapidamente, sem frustrações.
• Função: Proporcionar instruções complementares para campos mais complexos ou que exigem atenção especial. Exibir mensagens de erro no campo do qual é necessário ajustar de maneira imediata.
• Exemplo: Instruções de ajuda como “A senha deve ter 8 carácteres” e mensagens de erro como “Já existe uma viagem cadastrada para esse horário e rota.”
• Benefício: Melhora a compreensão de como preencher corretamente campos com requisitos específicos, oferecendo suporte adicional diretamente no formulário.

5. Atalhos

• Heurística: Flexibilidade e Eficiência de Uso (7) – Permitir que usuários usem atalhos para aumentar a eficiência.
• Função: Fornecer meios para que usuários realizem ações de forma mais rápida e eficiente, aumentando a produtividade. Através de atalhos de teclado permitindo que os usuários: Naveguem entre os campos de forma rápida; Acessem funcionalidades essenciais sem depender do mouse.
• Benefícios:
  • Rapidez na Navegação: Com atalhos de teclado, os usuários podem mover-se entre os campos e seções do formulário sem depender do mouse.
  • Acessibilidade: Atende às necessidades de usuários que preferem ou necessitam utilizar o teclado, oferecendo uma alternativa eficiente de interação.

4. Automação de Preenchimento

• Dor: Falta de agilidade e produtividade no preenchimento de formulários
• Função: Aumentar a eficiência dos usuários ao reduzir o tempo e o esforço necessários para preencher os formulários.
• Benefícios:
  • Agilidade: Com recursos como autocompletar, os usuários conseguem inserir informações mais rapidamente, acelerando o processo de cadastro.
  • Redução de Erros: As máscaras de entrada e validações em tempo real minimizam a possibilidade de erros, garantindo que os dados sejam inseridos corretamente.
  • Experiência Aprimorada: Uma interface que antecipa as necessidades do usuário torna a interação mais fluida e satisfatória.
• Características:
  • Máscaras de Entrada: Configurei máscaras que formatam automaticamente os dados inseridos, como códigos de identificação ou datas, garantindo consistência e reduzindo erros. Exemplo : dd/mm/aa ou 00:00
  • Validação de Entrada: Implementei validações de entrada com base em convenções e padrões já estabelecidos. Por exemplo, para campos como CNPJ, utilizei regras de validação consolidadas, que seguem as normas oficiais e são amplamente aceitas. Nenhuma validação foi criada do zero; todas foram baseadas em métodos e padrões já existentes, garantindo confiabilidade e consistência nos dados. Exemplo : podemos considerar erro de digitação do nº CNPJ 12.345.678/9012-34 e a validação exibe no subtexto de apoio “CNPJ inválido”
  • Autocompletar: Incorporei sugestões baseadas em entradas anteriores do usuário ou em dados salvos, seguindo critérios bem estabelecidos, facilitando o preenchimento rápido e preciso dos campos. Exemplo:  O usuário começa a digitar “Rua da Palmeira” – sugestões de autocompletar aparecem como “Rua da Palmeira, 123 – Centro, Rio de Janeiro – RJ” e “Rua da Palmeira, 456 – Tijuca, Rio de Janeiro – RJ”.

Essas melhorias foram guiadas por boas práticas consolidadas de design, garantindo benefícios como:

• Usabilidade: A combinação de placeholders, textos de apoio, mensagens, atalhos e automações de preenchimento com intuito de melhorar significativamente a clareza, a orientação e a rapidez no preenchimento dos formulários.
• Acessibilidade: Manter as instruções sempre visíveis e acessíveis beneficiou usuários com diferentes níveis de habilidade, garantindo uma experiência inclusiva.

Arquitetura da informação

Dando continuidade em arquitetura da informação, que iniciei em ideação, na fase de prototipagem trabalhei em dois tipos de páginas de cadastro com base nos insights levantados anteriormente na fase de ideação e feedbacks considerando as definições de design de interação, necessidade do usuário e complexidade. Pude então estabelecer para testar os seguintes tipos de formulários: o formulário de várias etapas (multi-step) e o formulário de página única. Ambas as versões atendem aos aspectos de:

• Hierarquia visual: Modelo de leitura em F.
• Estrutura da informação: Adaptabilidade para estrutura composta por topo, corpo, seções e campos.
• Estrutura lógica: Clara sequência lógica evitando fluxos confusos ou redundantes,  mínima a carga cognitiva e possiblidade de agrupamento de informações relacionadas.
  

1.Formulários de várias etapas

Prós

1. Menos sobrecarregador: Dividindo o formulário em etapas menores, os usuários podem se sentir menos intimidados em comparação com um formulário longo de uma só vez.
2. Melhor usabilidade: Facilita a navegação e proporciona preenchimento gradual das informações, evitando que o usuário desista por conta de um formulário muito longo.
3. Feedback contínuo: Os usuários podem receber feedback ou validação em cada etapa, ajudando a corrigir erros antes de prosseguir.
4. Dados mais organizados: Ajuda a coletar dados de uma maneira mais estruturada, permitindo a segmentação lógica das informações.

Contras

1. Mais tempo para completar: Pode demorar mais para preencher, o que pode frustrar os usuários que preferem uma experiência mais rápida.
2. Navegação complexa: Caso não seja bem projetado, a navegação entre etapas pode se tornar confusa, levando o usuário a desistir.
3. Problemas técnicos: Se houver falhas na conexão ou problemas técnicos, os dados podem ser perdidos antes de concluir todas as etapas.
4. Dificuldade em visualizar o todo: O usuário pode ter dificuldade em ver todas as informações preenchidas de uma vez só e pode precisar voltar a etapas anteriores ou mudar de aba para conferir o que foi preenchido.rio pode ter

2.Formulários de etapa única

Prós

1. Mais rápido para completar: Os usuários podem preencher todas as informações de uma só vez, tornando o processo mais ágil.
2. Visualização completa: Permite que os usuários vejam todas as perguntas e informações necessárias de uma vez só, o que facilita o entendimento do que está sendo solicitado.
3. Navegação simples: Não há necessidade de passar por várias etapas ou clicar em “Próximo” para avançar, o que simplifica a navegação.
4. Menos chances de perder dados: Como todas as informações são preenchidas em uma única página, há menos risco de perder dados devido a falhas na conexão ou problemas técnicos entre etapas.

Contras

1. Sobrecarga de informações: Pode parecer intimidante ou sobrecarregador para o usuário ter que preencher muitas informações em uma única página.
2. Menos orientação: A ausência de etapas pode levar à falta de feedback ou validação em tempo real, aumentando a chance de erros.
3. Menor taxa de conclusão: Usuários podem desistir de completar o formulário se ele parecer muito longo ou complicado.

Design Visual (UI)

Com base nas explorações da fase de ideação e nos insights coletados no design de interação e arquitetura da informação, evoluí os protótipos garantindo alinhamento com as necessidades dos usuários e boas práticas de usabilidade.

Design System

Utilizei o design system, do qual estive trabalhando em sua construção, para garantir consistência, eficiência e escalabilidade em nosso processo de design. Um design system é um subproduto que funciona como uma coleção de componentes reutilizáveis, juntamente com diretrizes claras sobre como usá-los.

O objetivo do design system é unificar a aparência e a sensação do produto, facilitando a manutenção e a expansão do design. Outro ponto importante é que ele ajuda a melhorar a colaboração entre designers e desenvolvedores, garantindo que todos estejam na mesma página.

Garante benefícios como

Consistência: A adoção de padrões claros e diretrizes do design system em todos os campos, alinhados às boas práticas de usabilidade, para aprimorar a experiência geral.

Campos individuais

Os campos do formulário passaram por ajustes para refletir as definições da etapa de design de interação. Além desses ajustes, também foi revisado a anatomia para seguir boas práticas e convenções.

UX/ UI tips: A guide to creating world class forms

Novos componentes foram criados para comportar os ajustes na anatomia e elementos visuais para materializar visualmente as definições de design de interações como o placeholder, texto de apoio, dica, mensagem e outros.

Também nessa etapa revisei os status dos componentes e variações. Foi fundamental garantir após ajustes que cada campo mantivesse o padrão e a consistência do produto seguindo as diretrizes do design system, como por exemplo no caso das cores.

Os componentes passaram por feedback, iterações e testes de usabilidade através de cenários de cadastro para garantir que os novos componentes fossem intuitivos e eficientes. Após validados eles foram incluídos no design system.

Como resultado, conseguimos criar um produto coeso e uniforme que atende às necessidades dos usuários, mantendo a flexibilidade para futuras adaptações e melhorias. O uso do design system, aliado à criação de novos componentes, proporcionou uma base sólida para o crescimento contínuo do produto.

Prototipagem Rápida

Os protótipos desenvolvidos variavam estrategicamente conforme a necessidade do projeto. Para testes com usuários, foram criados protótipos em alta fidelidade, proporcionando uma experiência próxima da solução final e permitindo validar fluxos completos e aspectos visuais. Já os protótipos média fidelidade foram utilizados em situações específicas para testar pequenas interações ou validar suposições, conceitos e funcionalidades. E a atividade de prototipagem rápida era realizada para criar e testar versões iniciais de uma interface, componentes ou funcionalidades para validar conceitos antes da implementação final.

Ferramenta: Figma

A prototipagem rápida foi essencial para validar e refinar ideias, bem como as interações de preenchimento do formulário, incluindo microinterações e a multifuncionalidade dos campos (ex: texto livre, seleção de opções predefinidas e utilização de atalhos).

Média fidelidade

Criei duas versões com abordagens diferentes, com um que se aproximava do layout de duas colunas semelhante ao atual, mas ambos visando comportar desde do formulário mais complexo ao mais simples, explorando também alternativas para suprir peculiaridades que ainda estavam em discussão e buscando validar boas práticas. A principal diferença entre as versões foi:

• Formulário de etapa única: com foco em promover agilidade com seções claras e proporcionando uma experiência mais orientada, sem comprometer a organização dos blocos de campos.
• Formulário de várias etapas: com foco em minimizar o esforço cognitivo e ruído visual, quebrando a complexidade em etapas separadas em abas com possibilidade de retorno para a etapa anterior.

Com uma versão em média fidelidade de cada tipo de formulário recolhi feedbacks com a colaboração do time, incluindo stakeholders, para avançar para próxima etapa.

Alta fidelidade

Com base nos feedbacks coletados anteriormente, ajustei o design para melhor atender a esses requisitos na etapa seguinte e insights obtidos foram incorporados ao novo design em alta fidelidade, permitindo validar novas soluções e iterar com base nas percepções dos usuários. O design foi refinado com melhorias na hierarquia visual, garantindo maior clareza e acessibilidade. Também foram testadas diferentes abordagens para a definição prévia de agrupamento de campos, buscando reduzir a complexidade e otimizar a experiência do usuário.

Uma terceira versão que foi incluída para fornecer uma experiência equilibrada entre agilidade e esforço cognitivo, que também se distância do layout atual de duas colunas, considerando o contexto de uso e as necessidades dos usuários.

A partir dos feedbacks coletados das 3 versões em alta fidelidade, analisei os pontos fortes de cada uma para seguir com a versão que melhor aderiu aos usuários, realizar ajustes e refinar conforme feedback.

Com a versão que melhor aderiu as necessidades dos usuários, realizei ajustes e no Figma pude utilizar os recursos da ferramenta como o de plugins para realizar alguns testes e refinar, aperfeiçoando detalhes da experiência do usuário.

Um dos testes mais interessantes, conforme o feedback do CTO da empresa, foi o de atenção (attention insight) do plugin de comportamento Visual Eyes. O plugin evidenciou um problema que foi identificado através de testes com a versão atual das páginas de cadastro e também auxiliou para orientar a tomada de decisão do ajuste a ser feito.

• Problema da versão atual em produção: O formulário possuía o componente de tooltip, que é um excelente artificio para auxiliar o usuário, porém durante os testes percebemos e validamos com o plugin que o componente passava despercebido. Nesta etapa de prototipagem pudemos testar variações com o plugin antes de ajustá-lo para tornar sua presença mais evidente.
• Componente Tooltip: Utilizado para fornecer explicações adicionais sobre os campos a serem preenchidos. Essas dicas atendem a critérios específicos para garantir clareza e usabilidade, ajudando os usuários a entenderem melhor cada seção do formulário e a preencherem as informações corretamente. Dessa forma, os usuários têm uma experiência de uso mais rica e autônoma.
• Solução: Ajustes de cor, tamanho e formato de ícone do componente tootip.

Teste de usuário

A equipe de operações, profundamente familiarizada com a plataforma, teve um papel central em testes.

Realizei uma rodada de coleta de feedbacks utilizando os protótipos de média fidelidade e, posteriormente, uma segunda rodada de feedback com o protótipo em alta fidelidade, para então passar para a fase de teste com um fluxo mapeado na versão ajustada e refinada em alta fidelidade da que melhor aderiu as necessidades dos usuários.

O teste para validar a versão final foi a realização de uma tarefa em um dos cadastros que tem como característica um nível superior de complexidade e para validar as decisões de design foram considerados o tempo para a realização da tarefa, porém não foi o critério principal pois os usuário estão mais habituados com o design antigo, então foi considerado critérios complementares:

• Taxa de erros: Se os usuários cometem menos erros no novo formulário. Isso pode indicar clareza e usabilidade.
• Satisfação do usuário: Feedback é importante para entender se o novo formulário é mais intuitivo.
• Número de dúvidas levantadas: Um formulário mais claro pode gerar menos perguntas ou dificuldades.

Durante os testes, foi possível validar o design, algumas suposições e, como resultado positivo, também identificamos oportunidades valiosas. Os próximos passos ficaram claros: implementar os ajustes necessários e avançar com a entrega.

Entrega

Design Final

O design final é uma combinação das duas versões de página única que foram desenvolvidas em alta fidelidade. Para destacar os principais elementos que sustentam essa proposta, a seguir os tópicos que detalham as decisões de design adotadas:

• Experiência que busca fornecer informações para orientar o usuário em duas abordagens: as essenciais em formato fixo e o uso do tooltip aprimorado para informações adicionais.
• Formulário em modo de leitura em F que possibilita a navegação de atalhos de forma intuitiva e prática, que também contribui para redução da sobrecarga cognitiva.
• Estruturado com definições sólidas e consistentes seguindo boas práticas e convenções.
• Composto por campos agrupados e divididos em seções priorizando a lógica adequada para uma experiência de preenchimento intuitiva, clara e eficiente.

Apoio a implementação

Para atender às novas definições das páginas de cadastro e seus formulários, colaborei com os desenvolvedores na busca por uma biblioteca de componentes que fosse capaz de incorporar essas definições e, ao mesmo tempo, acelerar o processo de desenvolvimento. Nosso produto utilizava campos criados manualmente, o que demandaria ajustes individuais em cada um deles. Identificar uma solução que atendesse ao produto e eficiente era, portanto, essencial.

Realizamos diversos testes com as bibliotecas pré-avaliadas, abrangendo aspectos como performance e compatibilidade tecnológica, considerando que o produto utilizava React. Após essas validações, conseguimos selecionar uma biblioteca que atendesse às nossas necessidades, garantindo alinhamento com as novas diretrizes de usabilidade, acessibilidade, consistência visual e eficiência no desenvolvimento. A biblioteca escolhida foi a Ant Design, pouco conhecida, mas muito competente.

Ant Design

Optamos por utilizar o Ant Design em vez do Material Design devido à sua flexibilidade e capacidade de atender às peculiaridades do produto, que ainda estava em processo de amadurecimento. O Ant Design oferece maior modularidade e customização, permitindo que os componentes sejam adaptados às nossas necessidades específicas, como a integração com tecnologias existentes (React) e o alinhamento com padrões já definidos no produto.

O sistema de design do Ant Design apresenta uma abordagem robusta para aplicações corporativas, priorizando tabelas, formulários complexos e layouts densos, que eram requisitos críticos para nossa solução. Enquanto o Material Design é altamente reconhecido por sua consistência estética, o Ant Design se destacou por sua adequação técnica e flexibilidade na construção de interfaces adaptadas às demandas do projeto.

Handoff

O processo de handoff design envolveu a documentação detalhada no Figma, com todas as informações necessárias para a implementar a estrutura base das páginas de cadastro, que seria replicada, conforme os alinhamentos feitos com a equipe sobre a versão aprovada da solução. Composto por:

• Arquivos de design
• Componentes
• Links úteis

Tudo para garantir que todas as partes envolvidas tivessem acesso aos dados essenciais para a execução.

Em complemento, foi criado no Notion um modelo com orientações para ser usado no processo de criação de novas páginas de cadastro, para que atendessem a critérios específicos, permitindo melhorias contínuas e garantindo escalabilidade. Esse modelo visava padronizar a implementação de páginas de cadastro, incluindo blocos de informações reutilizáveis, e assegurando a consistência e a adaptabilidade para o futuro.

Lançamento e Comunicação

Antes da entrega subir para produção, um comunicado formal foi enviado por e-mail aos pontos focais do cliente, seguido de reuniões para alinhamento. O objetivo foi garantir alinhamento sobre as atualizações e planejar uma implementação estratégica, minimizando qualquer impacto no dia a dia dos usuários e dos clientes. Essa abordagem proativa permitiu uma transição suave e bem coordenada, garantindo que a entrega fosse implementada em fases de forma eficiente e sem interrupções significativas.

Acompanhamento

Para medir o impacto das entregas e identificar melhorias, realizava acompanhamento utilizando ferramentas como Hotjar e Google Analytics duas vezes por mês. Essas análises me permitiam observar o comportamento dos usuários ao interagirem com a solução e, de forma assíncrona, recolhia feedback da equipe de operações e dos clientes.

Os dados coletados foram organizados no Notion institucional, separados por mês e categorizados por páginas ou funcionalidades priorizadas para análise. Após cada coleta adicionava os dados e conforme necessário atualizava ou incluía um plano de ação com próximos passos, garantindo que as melhorias fossem implementadas de forma ágil e eficaz.

A combinação de dados quantitativos (provenientes de ferramentas analíticas) e qualitativos (feedback direto e Hotjar) foi essencial para identificar novas oportunidades e ajustes que poderiam aprimorar ainda mais a experiência do usuário e o desempenho da solução.

Melhoria

Como mencionado anteriormente, para este produto foram mapeadas duas personas, cada uma com necessidades específicas. Para atender à demanda de um perfil mais estratégico, foi introduzida uma melhoria que consiste em um modo consulta rápida em formato de apenas de leitura (read-only) em cadastros salvos, visando aumentar a eficiência e competitividade desse perfil. Essa melhoria permite a visualização rápida das informações, facilitando análises e, ao mesmo tempo, incentivando o uso pleno do produto, um dos nossos objetivos de negócio.

Com essa proposta o usuário pode optar por visualizar uma versão resumida e essencial do cadastro salvo, permitindo determinar de forma rápida se uma edição é necessária ou se a consulta é suficiente. Eventualmente, essa versão evoluiu para um modo de visualização de dados ainda mais simplificado na listagem de cadastros e uma mais avançada de uma interface de dashboard, oferecendo uma experiência mais rica e funcional para os usuários.

Desdobramentos

Esta entrega gerou diversos desdobramentos significativos. No âmbito de UI Design, tivemos a adoção de uma biblioteca escalável, o Ant Design, permitindo a replicação eficiente das páginas de cadastro conforme a documentação e posteriormente possibilitou também novas funcionalidades. Já no âmbito de UX Design, novas interações foram incorporadas no fluxo de cadastro para aprimorar a experiência e oferecer mais suporte durante o uso da plataforma. Com o amadurecimento do entendimento, em UX tivemos mais um desdobramento que vale destacar!

Uma das personas, a persona com perfil estratégico, foi o que me fez olhar para esta oportunidade ao combinar com amadurecimento sobre as dores de nossos usuários no fluxo de cadastro. Identifiquei que dentro de um perfil estratégico podemos ter dois tipos de comportamentos, sendo um regular e outro eventual e que ambos podem compartilhar das dores do nosso perfil operacional. Porém, apesar do novo usuário passar por treinamento se este não se torna regular, este usuário teria uma curva de aprendizado mais longa, que pode ser desgastante se não assistida corretamente. Foi identificada então uma oportunidade de reduzir chamados e diminuir essa curva e quando observado o novo usuário ele também pode ser beneficiado por esta oportunidade.

Solução Helper Assistant: Inspirado em tours guiados, proporcionando aos usuários uma experiência de navegação detalhada e intuitiva. Ele permite que os usuários recebam orientações mais detalhadas, sejam guiados passo a passo através das etapas, que obtenham suporte diretamente na interface, que suas dúvidas sejam esclarecidas e que possam utilizar a plataforma com facilidade, garantindo que possam utilizar a plataforma de forma independente, conforme objetivos de negócio.

Essas iterações não apenas reforçaram nossos princípios de design, mas também resultaram em uma experiência mais intuitiva, eficiente e funcional para todos os usuários, alinhada ao nosso desafio principal.

Referências

Form design best practices – https://coyleandrew.medium.com/form-design-best-practices-9525c321d759

UX Checklist Series: Form Design – https://www.seerinteractive.com/insights/ux-checklist-series-form-design

Form UI design: do’s and don’ts – https://medium.com/uxparadise/form-ui-design-dos-and-don-ts-480b5a69f8bf

Don’t Use The Placeholder Attribute – https://www.smashingmagazine.com/2018/06/placeholder-attribute/

UI Designer’s Guide to Creating Forms & Inputs – https://medium.com/design-with-figma/ui-designers-guide-to-creating-forms-inputs-b6516f366a93

Using Prioritization Matrices to Inform UX Decisions – https://www.nngroup.com/articles/prioritization-matrices/