Valora Bus um dos produtos da Valora uma Startup com soluções de precificação dinâmica.
Contexto
Trabalhei como a única Designer de Produto, no modelo PJ, e meu desafio era diminuir a complexidade da plataforma para que os usuários pudessem conhecer todo o potencial da solução alinhado as necessidades do negócio.
Preparo
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 desafio que iria enfrentar.
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. Minha intenção era já iniciar a fomentação da cultura de designer para que todos pudessem ter a visão de como era possível construir uma experiência de valor com a participação de todos, mesmo que me medidas diferentes. Em startup a horizontalidade prevalece e pode ser um artificio especial.
O começo
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.
Descoberta
Na fase de exploração 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.
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.
Screenflow
Screenflow foi importante não só para que eu conhecesse melhor o produto, sua extensão, ferramentas, redundâncias e a complexidade, mas também como uma forma de dar o ponta pé para que em conjunto com o time pudéssemos alinhar nossa visão, como por exemplo 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.
Com o screenflow em mãos me facilitou em formular perguntas sobre diversos aspectos da plataforma, me ajudou a me colocar no lugar do usuário, que nunca viu uma solução assim, para que eu pudesse levantar hipóteses.
Mapa de empatia
Entre a coleta de dados recebi pela Product Owner o mapa de empatia, um benchmarking, relatórios e outros.
Personas
- Por que isso é importante para a empresa? Entender o perfil operacional do usuário da plataforma hoje dará as nuances do projeto para que seja entregue um produto rico para clientes externos.
- A ideia é que a personalização de uma função por meio da persona cria psicologicamente uma impressão mais duradoura.
- Você desejará desenvolver várias personas para garantir que explore todas as necessidades de sua base de usuários.
Planejamento:
- Pesquisa por formulário com equipe de Operações
- Análise das respostas
- Análise de competidores
- Estudo de padrões
- Identificar fatores comuns
Entrevistados:
Dado que os clientes externos ainda não sentiam confiança em utilizar a plataforma de forma autônoma, a equipe interna de operações, que era a principal usuária do sistema, foi escolhida para participar de algumas etapas do processo. A equipe de Operações era responsável pelo atendimento ao cliente, abrir e monitorar viagens que são precificadas pela solução da Valora garantindo entrega de resultados.
Júlia N: Executa atividades pertinentes ao atendimento, estruturação de pedidos e criação de viagens para precificação.
Felipe V: Executa atividades pertinentes a abertura da tabela de pricing e criação de macros.
Wesley S: Analista de Dados focado em BI e de entrega dos resultados.
Rayssa N: Executa atividades pertinentes ao atendimento, estruturação de pedidos e criação de viagens para precificação.
Vinicius C: Executa atividades pertinentes a abertura da tabela de pricing e criação de macros.
Pra formular perguntas eu usei um modelo da Sarah Doody.
Além de conseguir reunir dados para que as personas fossem criadas, que contribuíram para orientar tomadas de decisão, também consegui reunir dados sobre oportunidades, dores latentes a respeito da complexidade e insights.
Em busca de aprender e entender o perfil operacional do Valora Bus agrupei os resultados em duas personas.
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. Para isso, criei o user flow para mapear e otimizar cada etapa da interação do usuário com o produto.
Análise heurística
Realizei análise heurística para garantir que o design atual estava não só alinhado com os princípios de usabilidade, mas também com as necessidades reais dos usuários com base nas personas, pesquisas e mapa de empatia.
Como resultado da análise mapeie melhorias que foram dividas em duas partes estrategicamente inicialmente. Essas heurísticas me ajudaram a identificar problemas de usabilidade, como complexidade desnecessária, falta de feedback ao usuário, inconsistências, entre outros.
A Solução
Como no próprio 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 aprimoramentos, porém meu olhar para o desafio conduzia as minhas ações e a matriz de priorização ajudava com impasses.
Ao utilizar a matriz de priorização, conseguimos identificar com clareza o que precisava ser priorizado, conforme alinhado com a PO e o Chefe de Produto.
Contexto da Prioridade:
Ao analisar as prioridades, identifiquei que as atividades rotineiras da plataforma, realizadas principalmente através de formulários, estavam causando frustrações aos usuários devido à falta de organização e tratamento adequado das informações.
Identificação do Problema:
Esses formulários não seguiam uma estrutura lógica ou intuitiva, o que dificultava a navegação e o preenchimento, resultando em uma experiência de usuário ineficaz e propensa a erros.
Antes de começar a desenhar as telas, primeiro abordei o problema inicialmente fora do Figma.
Não apenas me concentrei em estruturar os formulários, mas também em garantir que o fluxo de trabalho para os usuários seja o mais eficiente possível, utilizando as pesquisas, levantando as automatizações possíveis em comparações com bibliotecas como Material Design e um design que respeita as boas práticas e convenções estabelecidas.
Entrega
Para os campos do novo formulário do produto foi necessário definir uma anatomia que contribuísse para alcançar uma maior eficiência melhorando também aspectos de usabilidade e acessibilidade.
Então defini que além de trazer o placeholder (conhecido como ux tips) dentro do campo para preenchimentos repetitivos, também em alguns casos inclui placeholder externo (conhecido como hint text) para campos que exigiam padrão ou cautela, pois ao ativar o campo com placeholder interno ele desaparece, e inclui também subtexto de apoio (conhecido como helper text) de acordo com a complexidade do que deveria ser preenchido.
O momento de desenhar as telas chegou e com ele os testes de usuário. A equipe de operações que estava profundamente familiarizada com a plataforma protagonizaram os testes, uma rodada com protótipo de média fidelidade e posteriormente uma rodada com protótipo de alta fidelidade.
Consegui validar algumas hipóteses e tive a grata surpresa de registrar insights, e os próximos passos eram: fazer ajustes e entregar.
Versão Alta Fidelidade
Handoff
O handoff consistia em documentação escrita com o que foi alinhado com o time sobre a versão aprovada da solução e informações pertinentes para que a implementação fosse um sucesso, protótipos, fluxos, telas, componentes definidos e links úteis. Também foi criado um modelo documentado no Notion do time para criação de novos formulários que atendesse a alguns critérios.
Evolução
Como comentado anteriormente para este produto foi mapeado duas personas, para atender a especificidade do perfil mais estratégico foi acrescentado um grupo de dados de apenas leitura (read-only) de uma seção do qual trataria ainda mais eficiência de acordo com este perfil, possibilitando análises rápidas e facilitando alterações, também buscando a os incentivar-los a utilizar o potencial da plataforma para serem mais competitivos, que mais tarde essa versão evoluiu para um modo de visualização mais avançado inclusive em formato dashboard.
Insight
Esta entrega teve vários desdobramentos, como no caso da implementação que criamos uma biblioteca escalável que tinha como base a Ant Design para que pudesse ser replicado as seções do formulário conforme documentação, mas em termos de entrega de design dois novos componentes foram adicionados ao fluxo do usuário: um para que pudéssemos receber, acompanhar e oferecer suporte o Helper Assistent (inspirado em tour guiado), e outro que traria uma explicação adicional sobre os campos a serem preenchidos o Tooltip (conforme critérios).
Próximos passos
Antes de subir as mudanças foi enviado um comunicado por e-mail, foi realizado reuniões nossos ponto focais do lado do cliente e planejamos a implementação de forma que não fosse impactar o dia o dia dos usuários.
Realizei o acompanhamento da entrega utilizando a plataforma Hotjar que me permitia ver os usuários utilizando a solução e de forma assíncrona recolhi feedback da equipe de operações e dos clientes.
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/