Redesign de uma plataforma para pessoas com deficiência feito para o projeto Apoie uma ONG, organizado pelas comunidades Vagas UX e Jovens UX e UI.

🚨 Problema: falta de informação sobre acessibilidade em espaços físicos.

No Brasil são aproximadamente 46 milhões de pessoas com alguma deficiência. Esse universo soma em torno de R$ 245 bilhões de clientes em potencial, mais do que o PIB (Produto Interno Bruto) de alguns países.

Mesmo assim, grande parte dos estabelecimentos e das plataformas digitais não estão preparados para atender a esse público. Apenas 4% das empresas consideram questões como a diversidade em suas inciativas e a maioria dos sites não seguem as boas práticas de acessibilidade. O problema se estende também para os espaços públicos. Segundo o IBGE (Instituto Brasileiro de Geografia e Estatística), apenas 4,7% das calçadas são acessíveis.

Além de todos esses desafios, sites de avaliações, com o objetivo de compartilhar opiniões de pessoas em espaços físicos, tem pouca informação sobre a acessibilidade desses lugares, o que exclui as pessoas que dependem desse recurso para frequentar um espaço com autonomia.

Fontes:

• PCDs são excluídos de comércios não inclusivos e donos deixam de lucrar

• UX, deficiência e um mercado emergente

• Empresas perdem bilhões de reais por não terem aplicativos acessíveis a PCDs

✅ Solução: melhorar as funcionalidades da plataforma Sem Barreiras para que as pessoas com deficiência possam encontrar, cadastrar e compartilhar suas experiências em estabelecimentos e lugares públicos.

🎯 Objetivo: aumentar a confiança ao sair de casa e diminuir a frustração com a falta de acessibilidade.

🚨 Importante saber: a plataforma Sem Barreiras já existia, o que propomos foi melhorar a usabilidade e experiência da pessoa usuária.

Equipe: Júlia Albuquerque como Product Designer e UX Researcher, Thomas Tarnowshi como Product Designer , Tuane Oliveira como Ux Writer e Victor Nunes como Product Designer.

Metodologia:

Usamos o método do diamante duplo (double diamond) para nos guiar. Isso significa que iniciamos com a descoberta e definição do problema para então seguirmos com o desenvolvimento e, por fim, a entrega.

Press enter or click to view image in full size

Descoberta

Pesquisa com as pessoas usuárias

🎯 Objetivo: entender os principais desafios enfrentados por pessoas com deficiência na busca por um lugar que atenda às suas necessidades.

• O uso da pesquisa qualitativa: para conhecer com profundidade as dores, expectativas e o perfil das pessoas com deficiência, optamos pela entrevista qualitativa.

• Como conduzimos as entrevistas

Tipo: Remoto

Duração: de 15 a 20 minutos

Participantes: 6

• Trechos da entrevista

Insights

• As maiores dores que encontramos foram:

1. Sentimento de exclusão ao frequentar espaços com pouca acessibilidade

2. Frustração ao chegar em um local que informa ser acessível, mas não é

Definição

O que propomos resolver

Após analisarmos os dados, entendemos que nosso principal problema era diminuir a frustração das pessoas com deficiência na hora de visitar algum lugar. Desta forma, concentramos nosso objetivo em construir uma plataforma que diminuísse esse sentimento e trouxesse segurança na hora de sair de casa.

Com as informações que coletamos, criamos nossa persona e a jornada dela até um espaço físico que realmente fosse acessível. Essa etapa foi importante, pois nos guiou durante todo o desenvolvimento.

Persona

Descrição da persona, perfil, biografia, motivações, objetivos, frustrações, personalidade, uso de tecnologias e aplicativos mais acessados.

Jornada da pessoa usuária

Jornada da pessoa usuária para ir até um local acessível.

Desenvolvimento

Análise de competidores

Nesta etapa verificamos as boas práticas de UX e de acessibilidade em vários aplicativos com propósitos semelhantes. A análise foi importante para definirmos estratégias assertivas em relação ao desempenho da plataforma.

Nosso foco foi identificar se os aplicativos tinham funcionalidades que contribuíam para que nossa persona completasse a jornada com sucesso.

Tabela com a avaliação heurística das funcionalidades: favoritar, adicionar fotos, cadastrar local, mapear locais, acessibilidade. Os aplicativos foram: Cittamobi, Guia de Rodas, Turismo Acessível, Sem Barreiras.

Avaliação heurística

Como mencionamos, o Sem Barreiras já era uma plataforma em funcionamento, mas com pouca usabilidade. Para entendermos melhor os pontos críticos que precisavam ser melhorados para garantirmos a acessibilidade, fizemos uma avaliação com a ferramenta Lighthouse.

79% de performance, 82% de acessibilidade, 92% de boas práticas, 79% de SEO e nada de PWA.

Os principais problemas que identificamos foram:

🚫 Inputs sem Label

🚫 Contraste baixo com o background

🚫 Ordem do headline sem hierarquia

Cada um dos pontos mencionados foram considerados durante o design da nova plataforma. Assim, construímos soluções com base nos seguintes critérios:

✅ Definição e documentação do labels nos inputs

✅ Validação do contraste das cores nos diferentes contextos

✅ Alinhamento da hierarquia do headline no style-guide

Protótipo de baixa fidelidade (Wiraframe)

Com todas as informações coletadas, a próxima etapa foi decidir sobre o desenvolvimento. Inicialmente, optamos pela abordagem para celular (Mobile First). Pensamos qual seria o fluxo necessário para gerar a melhor experiência e construímos o desenho esquemático dele (WireFlow):

Desenho esquemático do fluxo do usuário para celular.

A partir disso, tivemos insights importantes, como:

💡 O comportamento de busca é extremamente importante para gerar uma boa experiência

💡 É necessário mapear o momento em que o login é solicitado na plataforma

💡 Faltou a etapa de recuperação da senha

No entanto, conversamos com um representante da ONG, por meio do VagasUX, e chegamos a conclusão que o ideal seria focar no aperfeiçoamento da plataforma já existente por falta de baixo recurso financeiro. Por isso, mudamos o projeto para um desenvolvimento de site (Progressive Web Apps).

Partimos, então, para a construção de wireframes para web de média fidelidade.

Guia de estilo

O guia de estilo foi importante durante o processo de ideação para mantermos a consistência do design.

Criamos o guia de estilo para facilitar o processo de ideação e mantermos a consistência do design.

Entrega

🔗 Acessar protótipo navegável

Protótipo

Finalmente chegamos ao nosso protótipo de alta fidelidade. Os pontos que focamos para tornar a plataforma fácil de navegar, atrativa e ao mesmo tempo que atendesse ao objetivo da pessoa usuária, foram:

• Barra de pesquisa na home

A pessoa pode buscar por lugares acessíveis na própria página inicial, uma lista de lugares aparece para ela escolher e verificar as avaliações.

Fluxo de busca por um local

• Cadastrar lugares

No fluxo para cadastrar lugares tem 3 etapas obrigatórias:

1. Cadastrar o endereço do lugar

2. Informar os itens de acessibilidade disponíveis para cada deficiência

3. Confirmar o cadastro

Além disso, é possível adicionar fotos, mas essa etapa é opcional. Se a pessoa optar por isso, é obrigatório fazer uma descrição da imagem.

Fluxo de cadastro de um novo local

• Avaliar acessibilidade dos estabelecimentos

As avaliações são feitas por tipo de deficiência: visual, motora, auditiva, neurodiversa. A pessoa usuária pode clicar em curtir para informar se o local realmente tem as opções de acessibilidade mencionadas, além de acrescentar novas opções. Caso contrário, é só clicar em não curtir.

Fluxo para avaliar a acessibilidade

• Comentários na página de avaliação

A ideia do chat foi aumentar a confiança de que o lugar realmente tem o que a pessoa precisa para poder ir com segurança e gerar um sentimento de comunidade entre as pessoas usuárias.

Fluxo para fazer novo comentário

Teste de usabilidade

Com o intuito de melhorar a experiência, fizemos um teste de usabilidade no modo virtual e assistido ao vivo. Ele foi feito em dupla, enquanto uma pessoa do time conduzia a outra fazia anotações das respostas e expressões.

Deixamos três tarefas para a usuária:

1. Buscar por um local

2. Se cadastrar na plataforma

3. Cadastrar um novo local

Fizemos as seguintes perguntas em cada tarefa:

1. O que você entendeu dessa tela?

2. O que você acha que vai conseguir fazer nesse site?

3. Dê uma nota de 1 a 5, sendo 1 muito ruim e 5 muito bom

4. Você mudaria ou acrescentaria algo nessa tela?

Percebemos alguns pontos durante o teste, um deles é em relação a tela do menu. Colocamos duas telas de exemplo de como o teste de usabilidade nos ajudou a colocar um botão de login mais acessível e de fácil compreensão.

A pessoa entrevistada não conseguiu entender que o boneco dentro do circulo era a área para logar ou se cadastrar e sugeriu colocar um botão com a palavra escrita indicando a ação.

Imagem antes do teste de usabilidade:

Login no header representado por um boneco — antes do teste de usabilidade

Imagem após o teste de usabilidade:

Login no header representado por um botão com o texto Login — pós teste de usabilidade.

Aprendizados

Durante todo o processo de design aprendemos bastante sobre acessibilidade e a importância dela em todas as etapas. Isso contribuiu para aplicarmos e defendermos os conceitos em nosso trabalho formal.

Entendemos que acessibilidade não é uma causa, mas sim um direito e todos nós podemos ser impactados por ela. Quando tornamos os serviços e produtos acessíveis, democratizamos o acesso, garantimos autonomia e facilitamos a vida de todo mundo.

Pensar em acessibilidade é pensar no coletivo. E esse pensamento vamos levar para todos os produtos que trabalharmos de agora em diante.