SalvaVias
Projeto desenvolvido no curso de UX Design do Google.
Introdução
Em abril de 2025, iniciei o desenvolvimento do SalvaVias, um projeto de UX com foco em ajudar pessoas em situações de emergência a acessarem informações e rotas seguras de forma rápida e confiável.
A proposta era clara: construir uma solução digital que pudesse fazer a diferença na vida de quem precisa agir rapidamente diante de desastres naturais, como enchentes e deslizamentos.
Minha função
Atuei como Designer de UX, sendo responsável por toda a parte de pesquisa, construção de wireframes, prototipação e testes de usabilidade.
O problema
Durante emergências climáticas, muitas pessoas não sabem para onde ir ou como agir. A desorganização e a falta de acesso a informações confiáveis agravam a situação de quem já está em risco. Três pontos principais surgiram com destaque durante a etapa inicial:
- Dificuldade para encontrar informações rápidas e confiáveis
- Sobrecarga cognitiva em momentos de estresse
- Falta de previsibilidade, que gera ansiedade e paralisa a tomada de decisão
Pesquisa com usuários
Realizei uma pesquisa online para entender melhor os comportamentos e necessidades em contextos de desastre. Os participantes destacaram a importância de:
- Navegação simples e rápida
- Visibilidade de alertas em tempo real
- Informações claras e diretas
- Interface acessível mesmo sob pressão
Personas e Jornadas
Com base nos dados coletados, criei duas personas principais:
Rosângela – Professora aposentada
Acessa o app por um computador emprestado e precisa entender se já pode retornar ao seu bairro com segurança.
"Quero saber se o meu bairro está seguro. Só assim posso decidir voltar."
Antônio – Pedreiro autônomo
Utiliza o app pelo celular e precisa encontrar um abrigo rapidamente para proteger sua família.
"Preciso achar um abrigo agora. Não posso ficar rodando sem rumo com minha família."
Estrutura do Design
Wireframes de papel
A tela inicial traz um mapa com localização do usuário e atalhos visuais para busca de abrigos, registro de incidentes e chamadas de emergência. Funções como alertas e clima foram organizadas numa segunda tela com botão de alternância.
Wireframes digitais
- Atalhos agrupados próximos à barra de busca
- Alternador de modo (Mapa / Cards) centralizado na parte inferior
- Botões de ação nos cantos da tela para acessibilidade visual
Protótipo de Baixa Fidelidade
A partir dos wireframes, desenvolvi um protótipo navegável no Figma, testando o fluxo completo de uso.
Estudo de Usabilidade
Estudo remoto não moderado com 5 participantes. As tarefas incluíam busca por abrigo, registro de incidente e leitura de alertas. Após a navegação, os usuários responderam à Escala SUS.
Resultados:
- Melhorias no fluxo de registro de incidentes
- Ausência de feedback claro ao concluir ações
- Dúvidas sobre elementos nos alertas em tempo real
Iterações e Mockups
Registro de incidentes
Substituí o campo de digitação de endereço por um botão de localização automática.
Confirmação de envio
Adicionei uma tela de feedback visual para confirmar o envio do incidente.
Alertas e votações
Simplifiquei os botões de denúncia e ajustei o sistema de votação nos marcadores.
Protótipo de alta fidelidade
Acessibilidade
- Interface em modo escuro, economizando bateria
- Contraste revisado conforme padrões de acessibilidade
- Ícones adicionados aos botões com texto, como os atalhos de pontos de interesse e tipos de incidente
- Escala tipográfica ajustada para leitura rápida
Design Responsivo
Adaptei o layout para mobile, tablet e desktop, respeitando os diferentes contextos de uso.
O registro de incidentes foi mantido apenas no mobile, pensando em quem está em campo.
Lições e próximos passos
O que aprendi
- Consolidação de técnicas de pesquisa e testes
- Maior fluidez na prototipação e iteração
- Prática real de responsividade e consistência visual
O que vem a seguir
- Filtro por tipo de incidente
- Votação em registros já existentes
- Função “mochila de emergência” com itens essenciais
