Lacrei Saúde
2025
A Lacrei Saúde é uma plataforma que facilita a conexão entre pessoas da comunidade LGBTQ+ que precisam de atendimento clínico a profissionais da saúde. Atuei como UI/UX Designer voluntária entre Janeiro e Maio de 2025.
Contexto
As telas de pagamento da Lacrei Saúde, principalmente as de PIX, estavam sobrecarregadas com textos auxiliares e elementos como o QR Code.
Isso se tornava um risco para o futuro: ao duplicar ou alterar essas telas, inconsistências poderiam surgir e impactar negativamente a experiência do usuário e o trabalho da equipe de design.
A demanda
Em mais conversas com a equipe, foi sugerida a criação de um componente único e reutilizável para os métodos de pagamento por PIX e Cartão, com o objetivo de padronizar o uso desses elementos na interface, facilitar manutenções futuras e reduzir erros de implementação.
O processo envolveu conversas com a equipe de design da Lacrei Saúde, onde atuei liderando a análise, concepção e documentação do componente.
O que eu fiz
Entendimento do fluxo
A primeira etapa foi entender como o fluxo de agendamento e pagamento funciona. Analisei como o pagamento via PIX e cartão era apresentado atualmente e identifiquei pontos críticos de inconsistência visual e funcional.
Benchmark e análise de boas práticas
Para o Cartão, analisei plataformas conhecidas e vi que os inputs são mais intuitivos para os usuários. A partir disso, mantive a estrutura já existente e desenvolvi estados de erro nos campos, garantindo que os usuários tivessem um feedback em casos de preenchimento incorreto.
Para o PIX, o desafio foi maior: a maioria das interfaces de pagamento exigem que você faça uma compra para serem visualizadas. Usei aplicativos de banco para gerar QR Codes reais e simular o comportamento. Descobri que, ao contrário do cartão, a interface do PIX não exige interações complexas, apenas exibição clara e acessível dos dados.
Criação e entrega do componente
Criei uma nova página na Marsha, o Design System da Lacrei Saúde para prototipar, testar e documentar o novo componente de pagamento.
Desenvolvi tanto a versão desktop quanto a versão mobile, garantindo responsividade e adaptabilidade em diferentes dispositivos. Defini nomenclaturas claras e padronizadas, além de estruturar a anatomia dos elementos que compõem o componente.
A documentação do componente inclui modos de uso, exemplos de aplicação e a descrição completa da sua anatomia e estrutura.
Após realizar testes internos e ajustes baseados na integração do componente com o restante das telas da plataforma, publiquei oficialmente o componente na biblioteca da Marsha.
Lições aprendidas
Um componente claro e bem documentado pode evitar muitos problemas futuros para a equipe de design e desenvolvimento.
Testes simples e improvisados (como gerar QR Codes reais) podem oferecer grandes insights.
Documentação não é só uma etapa final, é parte essencial da entrega em projetos de UI.