UX/UI case — Roteiro Inclusivo: uma plataforma turística da cidade de João Pessoa com informações de acessibilidade para pessoas com deficiência física e visual

Em dezembro de 2020, defendi meu Trabalho de Conclusão de Curso de Tecnologia em Design Gráfico, pelo Instituto Federal da Paraíba.

O problema prático foi: De que forma o design pode contribuir com a inclusão de pessoas com deficiência física e visual nos espaços turísticos da cidade de João Pessoa?

Desk Research

O despreparo das cidades no setor turístico dificulta que o acesso ao turismo seja praticado por todos, por falta de uma boa infraestrutura, dessa forma, promover a acessibilidade garante que um local receba todas as pessoas sem a necessidade de intervenções feitas de última hora e sem causar transtorno e surpresas desagradáveis ao turista com deficiência.

Conforme o Censo do IBGE (2010), mais de 45 milhões de brasileiros apresentam algum tipo de deficiência. A Paraíba, que tem 27,8% da população formada por pessoas com deficiência, é o segundo estado do Nordeste com maior percentual nesse sentido, ocupando o quarto lugar no ranking brasileiro. João Pessoa engloba 26% dessa população, a cidade é considerada a terceira capital com maior número de deficientes, proporcional ao número de habitantes.

Objetivos

Destacamos os seguintes objetivos:

• Compreender as condições de acessibilidade que os pontos turísticos oferecem aos turistas com deficiência;
• Entender quais são as dificuldades enfrentadas por pessoas com deficiência física e visual ao visitarem pontos turísticos;

A partir desse objetivos, notou-se a necessidade de criar uma plataforma web turística da cidade de João Pessoa, com informações sobre a acessibilidade para pessoas com deficiência física e visual aos pontos turísticos mais visitados da cidade.

Pesquisa

Fizemos uma pesquisa quantitativa, aplicada através de um formulário online, direcionada para pessoas com deficiência e/ou acompanhantes, com objetivo de entender quais são as dificuldades enfrentadas nos espaços turísticos, quanto tempo e como programam suas viagens.

Depois de identificar o perfil e a média etária dos usuários, entrevistamos dois stakeholders chaves com intuito de colher insights para o projeto. Sendo eles uma deficiente física de 31 anos e um deficiente visual de 27.

Perfil

Com base na pesquisa com usuários, o perfil identificado tem a idade média entre entre 19 e 27 anos, sendo a maioria do gênero feminino. Mais da metade dessas pessoas levam em um mês para programar uma viagem. A maioria pesquisa a acessibilidade do local através de sites. Mais da metade afirma que a probabilidade de um local que planejaram para viajar não ser acessível é quase sempre. Com base nos dados levantados, criamos os seguintes cenários:

• Um (a) deficiente físico ou visual que viaja à cidade a trabalho e no tempo livre aproveita para conhecer os principais pontos turísticos da cidade;
• Um (a) deficiente físico ou visual está planejando uma viagem pelo nordeste mas não encontra muitas informações sobre os locais;
• Uma pessoa com deficiência física ou visual, moradora da cidade de João Pessoa, conhece todos os locais e já teve muitas dificuldades para acessar os locais.

Persona

Com base no perfil do usuário, através dados de pessoas reais, foram criados personagens ficcionais para auxiliar na visualização do comportamento e necessidades do nosso público alvo.

Análise de similares

Fizemos a análise de algumas plataformas, com objetivo visualizar as principais funcionalidades. As plataformas escolhidas não têm necessariamente o mesmo objetivo da plataforma desenvolvida.

Ideação

Utilizamos a técnica criativa brainstorming para liberar várias ideias para serem exploradas. Essa etapa foi feita em co-criação com usuários.

Mural de possibilidades

Com os insights obtidos a partir da análise de similares e o brainstorming, colocamos as ideias em um mural de possibilidades para ter uma visão mais ampla do que poderia ser incorporado ao projeto. Duas opções do mural, serão descritas com mais detalhes, como soluções com mais potenciais, enquanto as outras foram mantidas para que pudessem ser utilizadas ou não dentro do projeto.

Identidade visual

Nessa etapa foi desenvolvida a identidade visual, composta de cores, formas, tipografia e elementos visuais.

Cores

As cores foram escolhidas para transmitir uma sensação alegre e divertida.

Logotipo

O pássaro foi escolhido como símbolo para representar a visão, a autonomia e a liberdade. A tipografia utilizada para a marca foi a Paytone One Regular, ela não tem serifa, e apresenta curvas suaves, transmitindo a sensação amigável, humana e acessível.

Sitemap

O sitemap ajuda a visualizar as principais funções do site de uma forma objetiva e clara para entender o conteúdo mesmo sem acessar a plataforma. Também auxilia na construção do projeto, bem como na visualização das telas que devem ser construídas, e sua melhor organização.

Mapa de Fluxo

O mapa de fluxo ajuda a visualizar a interação que pode ser feita pelo o usuário, como essas interações se comportam e auxilia nos desdobramentos do projeto.

Protótipo de papel

O protótipo de papel ou de baixa fidelidade, é a alternativa de prototipação que pode ser feita em um tempo curto e com custo baixo, é a hora de aplicar ideias para testar o funcionamento e não precisa estar parecido com o produto final.

Wireframe

O wireframe é a fase onde é definida a estrutura com mais fidelidade do que será o produto final, sem detalhamento, sem uso de cores ou imagens. Nessa fase é possível visualizar de forma mais clara a hierarquia e funcionalidades das páginas.

Guia de estilo

Seguindo as cores e estilo que já foi definidas na etapa de criação da identidade visual, nessa etapa criamos um guia de estilo que vai compor a interface da plataforma.

Tipografia

A tipografia escolhida para textos da plataforma foi a Montserrat, uma tipografia não serifada, que por não ter prolongamentos é considerada mais acessível, sendo mais limpa e facilitando a distinção entre os caracteres.

Botões

Foram criados botões primários e secundários, com variações de tamanhos e cores para facilitar os momentos de decisão na navegação do usuário.

Iconografia

Com objetivo de deixar o conteúdo mais claro, foram criados alguns ícones seguindo os conceitos da identidade visual criada e referências de ícones já existentes. Os ícones foram aplicados na plataforma com descrição de texto para facilitar o entendimento.

Protótipo de alta fidelidade

Seguindo a estrutura criada no wireframe, aplicando a identidade visual e guia de estilo criada aplicados na interface, chegamos ao resultado da plataforma de alta fidelidade. Nessa fase foram seguidas algumas diretrizes da WCAG, com intuito de tornar a plataforma minimamente acessível.

Por motivos da pandemia mundial decorrente do Covid 19, não foi possível fazer o teste com usuários.

O protótipo não foi estruturado para mobile, algumas funcionalidades podem não funcionar quando acessado pelo celular.

Acessar o protótipo de alta fidelidade

Conclusões

O projeto contribuiu de forma significativa em sentido profissional e social. Sabendo o quanto é importante pensar em incluir todas as pessoas, o objetivo é contribuir de maneira positiva não só com o propósito de tornar as informações de acessibilidade dos espaços turísticos possíveis, mas também disseminar a importância da inclusão. Esperamos a oportunidade de ampliar a pesquisa para incluir mais pessoas, e aplicar testes com os usuários para melhorias.

O aprendizado durante processo nos mostrou o quanto é importante ouvir o usuário e conhecer suas dores para validar nossas ideias e tornar o projeto eficaz, bem como a importância de sempre estarmos conscientes da nossa responsabilidade de projetar de forma que seja acessível para todos.

O conceito e desdobramentos desse estudo, pode ser conferido clicando aqui.

Me encontre também no Linkedin.