Fototeca: Estudo de Caso
Evidência do Problema
Ao trabalhar na manutenção diária do site da Fototeca de Pindamonhangaba percebi que o mesmo não é totalmente responsivo, o que dificulta o acesso dos usuários, tendo como a melhor opção o acesso através do desktop. Além da responsividade, entendi também que existem outras melhorias a serem aplicadas no projeto, entre elas:
Com esse insight, resolvi projetar um estudo de caso para entender a opinião dos usuários, suas experiências e expectativas com o site e para validar/invalidar hipóteses e analisar possíveis melhorias a serem implementadas.
Veja abaixo os prints do site antes do meu estudo de caso.
No final dessa página você terá acesso a minha solução em forma de protótipo de alta fidelidade.
O Projeto
O projeto foi desenvolvido utilizando a metodologia de Double Diamond (Diamante Duplo) do Design Thinking.
Eu escolhi esse método por duas razões:
- O método tem como objetivo mapear os estágios convergentes e divergentes dentro do processo de design, com a intenção de encontrar uma solução real e assertiva para a empresa.
- Não é um processo linear, sendo possível retornar às etapas durante o desenvolvimento. A ordem pode variar de acordo com a necessidade do projeto.
Escopo do Projeto
A metodologia Double Diamond é composta por 4 fases principais, são elas: Descobrir, Definir, Desenvolver e Entregar. Para que o projeto funcionasse da melhor forma possível, criei no trello todas as fases.
Fase 1: Descobrir
Essa fase tem como objetivo a pesquisa e análise. Nela eu fiz o brainstorm e logo em seguida criei a matriz CSD, o desk research e as pesquisas quantitativas e qualitativas.
Através da observação e análise dos insights da pesquisa pude analisar e concluir os pontos de melhorias a serem inseridos no projeto.
Nessa etapa eu pude trabalhar a criatividade na elaboração de ideias para possíveis soluções e melhorias para o site. É importante lembrar que agora é o momento certo para liberar a imaginação. Se sentir travado ou com medo de propor uma ideia não é uma opção.
Essa chuva de ideias proporciona insights ricos e inovadores para o projeto.
Abaixo é possível visualizar algumas ideias do meu brainstorm:
- Para fazer o usuário se interessar mais em acessar o site, talvez seria interessante inserir um sistema de gameficação;
- Inserir um Blog para o site onde pessoas poderão comentar e nesse blog, colocar nota do autor no final;
- Melhorar os joguinhos que já tem no site;
- Fazer uma timeline com eventos históricos da cidade;
- Botões de compartilhar posts e fotos nas redes sociais;
- Um lugar especial onde o usuário pode inserir a própria foto no site. O administrador do site poderá escolher se a foto entra ou não no acervo;
No futuro, após pesquisas qualitativas e quantitativas, pude validar as boas ideias e definir partes do projeto.
Como a matriz CSD é um framework voltado para ajudar o designer na resolução de problemas, entendi que ela seria útil nessa etapa do processo.
Em resumo, para criar os dados da matriz, respondi as seguintes perguntas: O que nós já sabemos a respeito? Quais são as nossas hipóteses? (o que supomos saber?) e O que não sabemos sobre? (quais perguntas poderiam ser feitas?).
Esse é o momento ideal para levantar hipóteses e dúvidas para as pesquisas, que serão sanadas durante os questionários.
Abaixo é possível visualizar algumas certezas, suposições e dúvidas da minha matriz CSD:
Certezas:
- Pessoas que ainda não conhecem o site e desejam conhecer;
- Museu virtual traria visibilidade e maiores acessos para o site;
- Site responsivo: Segundo a análise da CNN, mais de 92 milhões de brasileiros acessam a internet apenas pelo celular;
- Aba de perguntas frequentes para pesquisas escolares;
- Ações pedagógicas, vídeo aulas, atividades e jogos;
- Fazer login no site para certificado de vídeos assistidos;
- Incluir plugin para acessibilidade.
Suposições:
- Site em outras línguas (multinacional);
- Organizar imagens: são dispostas de uma maneira confusa;
- Criar museu virtual 3D para experiência online de um museu físico com informações importantes clicáveis em cada imagem;
- Mapa do museu físico no site;
- Criar redes sociais (instagram, linkedin e pinterest) para um marketing melhor;
- Criação de um novo logo na horizontal;
- Inserir uma aba de personalidades importantes da cidade.
Dúvidas:
- O site tem acesso só no Brasil ou pessoas de fora também acessam?
- Fazer agendamento de visitas no Palacete 10 de julho através do site?
- Para criação do museu virtual, precisará de investimento. Compra de plugin, fotos 360 e etc;
- Sistema de assistir todas as video aulas e ganhar certificado do site para ganhar pontos escolares;
- As imagens do site podem ser compartilhadas nas redes sociais?
- É possível criar um novo logo?
- Usuário comum subindo foto é bom ou ruim?
- Um site com 3 línguas, precisa de instalação de plugins diferentes para LGPD?
- Inserir concurso cultural de fotografia?
Com o brainstorm realizado e a Matriz CSD criada, pude iniciar o processo de pesquisa.
Nesse método de pesquisa, pude coletar informações pré-existentes publicados por terceiros sobre um determinado assunto para que a análise e a decisão em cima dos dados seja tomada de forma estratégica. Isso funciona porque ao longo do processo, surgem insights que ajudam na interpretação dos padrões dos principais comportamentos dos usuários.
Na Fototeca coletei informações de 1 ano de acesso ao Google Analytics, dados do IBGE e pesquisa de concorrentes.
Alguns dados importantes encontrados no Google Analytics:
- Como muitos usuários descobrem o site através da pesquisa orgânica no google, é interessante estruturar um site responsivo e com SEO organizado para manter essa consistência;
- As páginas mais importantes do site da Fototeca são: A página inicial, a galeria de fotos, os resultados de buscas, a tag de separação por ano e sobre a Fototeca. Essas páginas devem ser mantidas no redesign;
- Criar um redesign para o site onde ele mantenha uma média alta de retenção e retorno de usuários novos e antigos ao site. Ideias como Museu virtual, Login para assistir vídeo aula e ganhar certificado de participação são interessantes;
- A hipótese do site em outras línguas não foi validada pois cada lugar tem a sua própria fototeca e o investimento seria muito alto. Levando em consideração que cada local tem sua fototeca, seria desperdício de dinheiro e trabalho;
- Atualmente o site não tem menores de 25 anos de idade. Vejo como uma importante missão criar conteúdo voltado para menores também. Tem diversos usuários entre 25 e 65, o que faz a ideia do certificado de participação de curso validada;
- A maior parte dos usuários atuais do site acessam através do android, windows e IOS. Sendo a maior parte dos usuários que utilizam celular e desktop como dispositivo de pesquisa. A responsividade e acessibilidade se torna um fator mais importante ainda nesse cenário;
- O navegador Chrome é o principal navegador de uso dos usuários, seguido do android webview/samsung internet e safari/Safari in app. A compatibilidade com esses 3 navegadores deve ser excelente. Edge e Firefox estão entre os últimos mas ainda são usados;
- Como a maioria dos usuários acessam o site através de telas nos tamanhos principais de 412x915, 1366x768, 800x600, 1920x1080, 412x892, 360x800, 385x854, elas devem ser as principais telas de design totalmente responsivo. Nelas a atenção deve ser redobrada, mas é importante não esquecer das outras telas;
Alguns dados importantes encontrados no IBGE e HandTalk (Site de tradução automática para linguas de sinais):
- De acordo com o censo de 2022, no Brasil existem 203.080.756 pessoas, 44.411.238 estando no estado de São Paulo e 165.428 na cidade de Pindamonhangaba;
- Segundo o site HandTalk, ao analisar uma pesquisa feita pelo censo IBGE de 2022, foi descoberto que quase 19 milhões de pessoas com 2 anos ou mais possuem algum tipo de deficiência, representando um total de 8,9% da população brasileira. Dentre elas, 47,2% são pessoas com 60 anos ou mais, ou seja, aproximadamente 8,8 milhões de pessoas;
- De acordo com o censo do IBGE de 2010 (a última versão recente da pesquisa de deficiência), eu fiz um comparativo de PCD (pessoas com deficiência) entre São Paulo, Pindamonhangaba e Brasil. É possível observar que 132.321 pessoas em São Paulo, 1.544 pessoas em Pindamonhangaba e 3.337.351 pessoas no Brasil tem pelo menos uma das deficiências investigadas no censo;
Abaixo é possível ver o comparativo entre as 3 principais deficiências encontradas na pesquisa:
Com a Matriz CSD e o Desk Research finalizados, comecei a trabalhar a pesquisa externa. Separei a pesquisa em 2 grupos:
Grupo 1: Stakeholders
Grupo 2: Usuários comuns: Alunos, professores e moradores da cidade e estados próximos.
Algumas análises da pesquisa quantitativa com o público geral:
- A experiência do Google Maps é parecida com a experiência do museu virtual, onde pessoas poderão acessar e andar pelos cômodos procurando por imagens e clicando nas informações desejadas. 66,7% das pessoas deram nota 4 e 5 para a pergunta, sendo o número 5 a maior nota. Isso valida a hipótese de que pessoas gostam desse tipo de experiência imersiva no site e que, se feito da forma correta, pode funcionar.
- 85,7% do público respondeu que utiliza o celular como meio principal de acesso à internet e 9,5% responderam que utilizam o computador e 4,8% responderam que utilizam o notebook. Essas respostas fazem sentido quando comparadas as respostas do Google Analytics, tornando a hipótese de tela e dispositivo válidas.
- 33,3% do público geral tem entre 18 e 24 anos, 38,1% tem entre 25 e 34 anos, 14,3% têm entre 35 e 44 anos e 9,5% tem entre 45 e 54 anos. Essa informação valida a hipótese anterior de que é preciso pensar em maneiras de trazer um público mais jovem para o site fazendo com que tenha integração com escolas e manter o público atual entre 18 e 54 anos;
- 85,7% estão entre pessoas que acessariam o site com uma certa frequência caso ele tenha blog ou talvez acessariam com frequência. Isso valida a hipótese de que o site pode ser uma fonte de informação interessante para todos como posts, notícias relacionadas a fotografia histórica, pinda e região, posts sobre apoiadores do projeto como um todo, além de ajudar com o SEO da página e trazer mais usuários organicamente;
- 90,6% responderam que tem vontade de conhecer eventos históricos e personalidades marcantes da cidade e região, fazendo a hipótese de criar conteúdo relacionado a essa área é interessante, além de aba de perguntas frequentes para SEO para que usuários retornem ou usuários novos encontrem o site;
- 95,4% responderam que estão entre o grupo de pessoas que compartilham artigos e imagens em suas redes sociais com alguma frequência. Isso valida a idéia de criar conteúdos para o site que sejam compartilháveis para que amigos de amigos conheçam o site através das redes sociais. A hipótese de botões de compartilhamento de imagens e posts é validada;
- 66,7% das pessoas responderam que gostam de fotografar lugares históricos/importantes e postar imagens nas redes sociais com uma certa frequência. 90,5% das pessoas responderam que participariam de concursos relacionados a fotografia para ganhar certificado. Isso valida a hipótese de criar um espaço para amantes da fotografia histórica possam fazer parte do acervo de imagens, criando concursos fotográficos presenciais e os 3 primeiros ganhadores terão as imagens no site com o nome e links para contato;
- 90,5% responderam que não sabiam que Pindamonhangaba possuía um site com materiais gratuitos, vídeo aulas e Jogos. 81% das pessoas também responderam que se existisse um site com conteúdos interativos, recompensa de certificado para realização de cursos etc, eles acessariam o site com mais frequência. Essa informação valida a necessidade de criar conteúdos que façam pessoas conhecer o site, como com aplicação de SEO e interações como Museu virtual, curso com certificado para escolas e faculdades, concursos culturais etc e também valida a ideia de trazer algo voltado a gameficação de recompensa no projeto;
- 4,8% responderam que possuem deficiência visual. Levando em consideração os dados da pesquisa do IBGE, acessibilidade e responsividade é importante para o site como um todo;
As respostas das pesquisas qualitativas não poderão ser inseridas aqui por questão de confidencialidade.
Com as respostas, comecei a observar e analisar os dados. Nesse processo pude comparar com dados anteriores da Matriz CSD e Desk Research com os dados da pesquisa externa.
Fase 2: Definir
Essa fase tem como objetivo buscar os resultados das análises da fase anterior e aplicar na construção de personas, mapas de empatia, análise competitiva de acordo com as 10 heurísticas de Nielsen, a jornada de usuário, o sitemap e a conclusão e análise de pontos de melhorias.
Após a análise e os insights de toda a pesquisa, eu tive uma ideia melhor de quem são os atuais usuários e quem poderá vir a ser parte desses dados. Para transferir os usuários de apenas números e em um modelo de pessoas reais, criei personas.
Acredito que elas ajudam o designer a olhar o projeto com mais humanidade, não só números.
Exemplo de uma persona criada no projeto: Jonathan Moraes, tem 37 anos.
Comportamentos e Hábitos:
- Descrição: Pai da Laura, estudante do 9º ano do ensino fundamental II. Jonathan é fascinado pela história do Vale do Paraíba e do país como um todo e por esse motivo decidiu estudar história. Sempre que pode, gosta de pesquisar mais sobre a região e levar esse conhecimento para a sala de aula.
- Quais atividades realiza no seu tempo livre? No seu tempo livre, gosta de ler e estudar sobre as maravilhas do Vale do Paraíba e Região. Sempre encontra coisas novas e gosta de conversar sobre isso com pessoas que tem o mesmo interesse através das redes sociais.
- Descreva suas principais frustrações: Como história é um assunto muito nichado e muitas pessoas vêem como estudo e não forma de entretenimento, sua maior frustração é não encontrar pessoas que gostam do mesmo assunto que ele.
- Descreva seus objetivos: Encontrar pessoas que gostam de conversar sobre história, imagens históricas, notícias de uma forma leve e divertida.
- Quais as principais acessos para busca de informação? Redes sociais, sites, blog e google;
- Em qual dispositivo a persona mais utiliza a internet? Celular, notebook e computador
- Como a persona prefere receber informações (e-mail, redes sociais, blogs, etc.)? Para Jonathan, é interessante receber informações de todos os meios possíveis como email, redes sociais, blogs etc.
- Se já utilizou o site, quais foram suas impressões? Jonathan já utilizou o site da Fototeca mas ele encontra dificuldade em acessar através do celular, ele sente que o site pe melhor em telas maiores. Por esse motivo, ele gostaria que o site fosse feito em um modelo que pudesse satisfazer sua necessidade de pesquisar em um celular de qualquer cômodo da casa ou até mesmo na rua. Ele também gostaria que o site possuisse mais interação, mais informação e uma organização melhor das imagens e seus autores. Como professor, Jonathan gostaria de conseguir passar para seus alunos o site de forma que eles sintam interesse em continuar a manter o uso do site com interações diferentes para tarefas.
Objetivos e Desafios:
- Descreva sua persona, seus hábitos e comportamento no dia a dia: Jonathan trabalha de segunda à sexta, das 08:00am ao 12:00pm e das 14:00 às 18:00 dando aula para alunos do ensino médio, mas conhece também professores que dão aulas para ensinos fundamentais e que também sentem a mesma necessidade que ele.
- Quais seus objetivos principais no site? Estudar mais e levar seus alunos para o site como forma de ensino. Jonathan também sonha em mostrar para a filha Laura como a história é interessante e como é importante aprender e gostar de estudar essas partes do nosso passado.
- Qual desafio ela enfrenta no dia a dia que o site pode ajudá-la a solucinoar? O site poderia ter mais conteúdo, tanto para professores quanto para alunos. O site poderia ter formas melhores de visualizar imagens e principalmente utilizar em telas menores para acessar em qualquer lugar, dentro ou fora de casa.
- Quais os tipos de informações ela procura online? História de Pindamonhangaba e região, personalidades marcantes, entrevistas com personalidades marcantes, história da prefeitura e dos apoiadores etc
A persona do projeto tem diversas informações, criei 5 no total.
Ao entender melhor o perfil dos usuários do site como persona, criei um mapa de empatia para compreender melhor seus comportamentos e seus hábitos no geral. E para que pessoas que não puderam participar do processo anterior de criação, tenham uma ideia melhor do público. O mapa de empatia é um documento focado nos sentimentos, dores e ganhos do usuário respondendo perguntas como: O que o usuário fala/faz? O que o usuário ouve/escuta? Quais são suas dores? Quais são suas motivações?
Exemplo do mapa de empatia do Jonathan criado no projeto:
- Nome e Idade: Jonathan Moraes, tem 37 anos.
- Profissão: Professor de história
- Localização: Pindamonhangaba/SP
- Frase: "Eu preciso de um site no qual eu pudesse aprender, compartilhar conhecimento e levar conteúdo com mais interatividade para sala de aula, um espaço onde meus alunos tenham interesse em aprender e motivação (como certificado de participação) para continuar".
FALA & FAZ (Comentários, comportamentos):
- Da aula e estuda história;
- Procura meios alternativos para levar para sala de aula e instigar o aprendizado dos alunos;
- Gostaria de um espaço para comentar, compartilhar conhecimento e estudar;
- Acredita que um site interativo com museu virtual, certificado de participação e concursos culturais vai fazer diferença na sociedade;
- Compartilha conteúdos/imagens importantes em suas redes sociais;
DORES (Frustrações, obstáculos):
- Se frustra ao não encontrar facilmente pessoas que gostam do mesmo assunto para conversar;
- Se frustra ao não conseguir uma maneira de fazer a filha a se interessar mais por história;
- Seu obstáculo é encontrar conteúdos dinâmicos e criativos para ensinar;
- Encontrar um site com conteúdos tanto para professores quanto para alunos;
OUVE & VÊ (O que a família/amigos dizem):
- Vê a necessidade de levar conteúdo interativo e dinâmico para a sala de aula;
- Ouve alunos reclamando de apenas ter textos como fonte de estudo;
- Ouve colegas de trabalho com a mesma frustração, vontade de encontrar modos interativos e novos de levar conteúdo para a sala de aula;
- Vê/Ouve a filha não se interessando por história;
MOTIVAÇÕES (Necessidades, objetivos:
- Necessita de um blog de conteúdos históricos;
- Necessita de um espaço livre para conversar sobre história, imagens históricas;
- Gostaria de um museu virtual para apresentar em sala de aula e instigar aprendizado;
- Tem o objetivo de oferecer conteúdos diversos e dinâmicos para aprendizado;
- Tem objetivo de oferecer um ponto na nota no final do semestre para quem tiver um certificado de participação em um site com conteúdos históricos;
Construí 5 mapas de empatia no total.
Após estabelecer as personas do projeto, suas características principais, suas dores e motivações, eu fiz uma análise competitiva para entender o que os concorrentes diretos e indiretos estão fazendo de positivo e analisar se é válido inserir no projeto.
Fiz a análise utilizando as 10 heurísticas de Nielsen. Ela ajuda o designer a analisar as funcionalidades, performances e objetivos dos sites citados anteriormente.
Fiz a análise competitiva com 3 empresas, abaixo é possível visualizar uma das análises:
- Empresas concorrentes direta ou indiretamente: IPHAN
- Visibilidade do status do sistema: Tem uma estrutura organizada, utiliza o breadcrumb para localização, é possível visualizar o formulário de seleção, existe o menu (superior, lateral e rodapé com informações), utiliza paginação, é possível visualizar a informação da quantidade de registros encontrados e possui um título principal de página.
- Compatibilidade entre o sistema e o mundo real: Utiliza linguagem simples e objetiva adequada ao público e utiliza ícones conhecidos no mundo real
- Controle e liberdade para o usuário: Tem uma navegação fácil, o usuário tem controle de suas ações através do formulário de seleção, breadcrumps e paginação. O rodapé possui diversas informações para o usuário se entender;
- Consistência e padronização: Tem padrão de cores, tipografia e texto. As páginas estão no mesmo padrão de organização. A única parte que não se adequa a heurística são os icones que possuem padrões diferentes;
- Prevenção de erros: O site não possui auxilio a prevenção de erros;
- Reconhecimento em vez de memorização: Existe o padrão do breadcrump, paginação, tipografias e cores. Não se encaixa na heurística porque os formatos dos ícones não possuem padrão.
- Eficiência e flexibilidade de uso: Possui fácil navegação entre as páginas e possui 5 botões de acessibilidade para deficiências diferentes
- Estética e design minimalista: Esse ítem não entrou na heurística pois possui espaçamentos uniformes com informações próximas as bordas, fontes muito pequenas, rodapé com muitas informações que podem atrapalhar o entendimento e com cores que não tem muito contraste. Menus com muitas informações, o que pode deixar o usuário com mais dúvidas. Os botões de compartilhamento nas redes sociais não funcionam;
- Ajude os usuários a reconhecerem, diagnosticarem e recuperar-se de erros: Não existe prevenção de erros;
- Ajuda e Documentação: Possui páginas de ajuda e acesso a informação.
A Jornada do Usuário faz o mapeamento do processo de interação entre o usuário e o site. Ele percorre o caminho detalhado que o usuário faz para atingir determinado objetivo.
Na jornada criei os objetivos do usuário, suas ações, seus pensamentos e suas emoções.
Deixei o usuário no centro das atenções, ele é o protagonista e o meu papel é criar a história ilustrada pelo ponto de vista do protagonista.
Ao escolher as personas que serão utilizadas na jornada do usuário, é necessário responder perguntas como: “Qual experiência pela qual a sua persona está passando e interagindo?” e “é um produto novo ou uma nova atualização?”.
A partir desse momento, foi possível estabelecer o cenário do ponto A ao ponto B que a persona irá percorreu.
Etapas de interação da Jornada do Jonathan:
"Nunca vi esse site, será que é novo? Vou acessar aqui"
"Que legal. uma fototeca online!"
"Que legal, quero conhecer mais sobre isso"
"O que precisa para ser voluntário? Vou procurar"
"Gostei, vou tentar ser voluntário "
"Gravei as aulas, vou enviar"
"Vou enviar a emenda para aprovação no site"
"Opa, já posso compartilhar o link com meus alunos e conhecidos"
Para criar o Sitemap retornei às etapas anteriores, li novamente os documentos e organizei exatamente os requisitos que foram validados para implementar no site. Após essa nova análise, é compreendi melhor os resultados.
Fase 3: Desenvolver
Essa fase tem como objetivo o primeiro momento do desenvolvimento, a criação do sketch (desenhos) das telas e a escolha de tipografia e cores.
Fase 4: Entregar
Essa fase tem como objetivo a entrega do protótipo de alta fidelidade, a análise dos pontos levantados pelo cliente e a inserção dos pontos de melhoria, caso seja entendido que é essencial para o projeto.
Abaixo você pode observar como os slides da página inicial serão apresentados.
