App e Site responsivo – ReNovAção
ReNovAção. App e Site Responsivo.
Visão geral do projeto: ReNovAção é uma organização sediada no Rio de Janeiro focada na reintegração de egressos de todos os gêneros. Oferece assistência jurídica, educacional e psicológica nos modos online e presencial. O app tem foco nos usuários (egressos do sistema prisional) e o site responsivo acrescenta ao seu foco de público alvo, cidadãos que querem contribuir com o projeto de forma financeira e/ou com sua mão de obra. Duração: novembro e dezembro de 2024.
O problema: Egressos do sistema prisional muitas vezes são marginalizados, com dificuldade de conseguir ocupação de trabalho, seu psicológico bastante abalado pelo que passou no sistema prisional e pelo preconceito encontrado aqui fora. A meta: Oferecer um aplicativo com o suporte necessário a este grupo que muitas vezes encontra apenas portas fechadas.
Minha função: Designer de UX responsável por todas as etapas do processo de criação. Responsabilidades: Condução de entrevistas, wireframes em papel e digitais, protótipos de baixa e alta fidelidade, estudos de usabilidade, estudo de acessibilidade, iteração e design responsivo.
Compreendendo o usuário: ● Pesquisa com usuários ● Personas ● Declarações de problema ● Auditoria competitiva Ideação
Através de entrevistas com 7 usuários criei mapas de empatia para entender melhor suas necessidades. Pude notar que egressos do sistema prisional procuram não só por trabalho após a nova chance, mas também por acolhimento emocional e busca por conhecimento profissional, alé, de apoio jurídico para finalizar seus processos.
Persona: Augusto. Definição de problema: Augusto é um contador que precisa ser reintegrado à sociedade e provar que é um cidadão de bem porque já cumpriu sua pena perante à justiça.
Persona: José Henrique. Definição de problema: José Henrique é um pedreiro que precisa ser reintegrado à sociedade e ser admitido em um emprego com carteira assinada pois a justiça lhe concedeu liberdade condicional.
Através de auditoria de alguns órgãos e organizações com a mesma finalidade consegui me embasar e perceber fragilidades para desenvolver o app ReNovAção.
Ideação: Fiz uma atividade de ideação para conseguir abraçar as fragilidades que encontrei na auditoria competitiva. Meu foco foi oferecer o suporte necessitado pelo público alvo oferecendo segurança e acolhimento.
Iniciando o design: ● Wireframes digitais ● Protótipo de baixa fidelidade ● Estudos de usabilidade.
Wireframe digital: Após a fase dos esboços, a ideia para o app focou em fornecer todas as opções possíveis para que o usuário encontrasse sua necessidade com velocidade. Cada serviço acompanhado de um ícone.
Antes dos testes de usabilidade, criei um protótipo de baixa fidelidade que conectou o fluxo do usuário para agendar consulta com advogado e/ou consultar seu processo. Link para oprotótipo de baixa fidelidade.
Link para acessar o protótipo de baixa qualidade.
Estudo não moderado. Brasil, remoto. 7 participantes. 20 a 60 minutos.
Descobertas do estudo de usabilidade: Usuários querem salvar de alguma forma os resultados da consulta e o comprovante de agendamento. Usuários querem acesso à localização e rota para atendimento presencial. Usuários querem receber notificações no app.
Refinando o design: ● Mockups ● Protótipo de alta fidelidade ● Acessibilidade
Mockups: Com base nos estudos de usabilidade, inseri ícone de notificações.
Mockups: Com base nos estudos de usabilidade, inseri ícones de compartilhamento/salvamento e lista de documentos.
Mockups: Também inseri link para Google Maps com localização e “como chegar”.
Imagem com mockups.
O protótipo de alta fidelidade seguiu o mesmo fluxo de usuário do protótipo de baixa fidelidade, incluindo alterações de design feitas após o estudo de usabilidade. Link para o protótipo de alta fidelidade.
Link para acessar o protótipo de alta fidelidade.
Considerações de acessibilidade: – Botões de narrador, pois nem todo usuário é alfabetizado e/ou possui seu próprio celular adaptado. – Títulos com tamanhos e fontes diferentes para facilitar a hierarquia. Combinação de cores e letras testadas no https://color.adobe.com/pt/create/color-contrast-analyzer
Design responsivo: ● Arquitetura da Informação ● Design responsivo
Este é um momento importante; criar a melhor estratégia de navegação. Após muitas pesquisas, esta arquitetura foi a que se mostrou mais eficiente para a navegação. (imagem do sitemap)
Designs para celulares, tablets e computadores otimizados para atender às necessidades específicas do usuário de cada dispositivo.
Conclusões e Próximos passos
Conclusões: Impacto: As atualizações pós pesquisa com usuários foram super aprovadas pelos usuários e sentidas até mesmo pelos que não haviam percebido alguns detalhes. O que aprendi: Este estudo mostrou que usuários não alfabetizados e sem celular também são usuários em potencial.
Próximos passos: Nova atualização do protótipo de alta fidelidade baseadaem nova rodada de teste. Testaro site responsivo também com novos usuários.