Estudo de caso: redesign da Wikipédia
Comecei este projeto me perguntando "O que eu conseguiria melhorar na experiência da Wikipedia?". Foi aí que eu resolvi estudar todo o processo de Ux e produto. O que levou cerca de 3 meses de trabalho, do começo ao fim entregando uma experiência redesenhada da Wikipedia. Tudo isso, sem perder a identidade e a experiência visual de enciclopédia que nós já conhecemos.
A Wikipédia deu suas caras ao mundo lá em Janeiro de 2001, e desde então sofreu mínimas melhorias, ouso dizer que ela se tornou até mais complexa com os anos.
De fato, é um site bem antigo com seus 17 aninhos de idade. E de lá pra cá a internet e o modo como nós a usamos mudou muito. Lá atrás, os monitores tinhas resoluções bem reduzidas, a internet era bem lenta (Fax modem e linhas ocupadas, lembram?), nada de Smartphones, Tablets, Smart Tvs, SmartWatches e quase nem se falava de inteligência artificial. O CSS e HTML também eram bem mais "rudimentares", naquela época quem reinava era o "todo-poderoso" Macromedia Flash (bate aí quem sente saudades o/…. Não, ninguém…?). Beleza, vamos seguir…
A Experiência do Usuário
Hoje em dia esse é o termo da moda. Pensar em como vai ser toda a experiência de um produto através da perspectiva do usuário. O que esse cara acha do produto? Como ele interage? Ele tem dificuldades para acessar? E o que podemos melhorar na vida desse usuário quando ele usa nosso produto?
Fazer perguntas, na minha opinião é a skill mais básica, mas também a mais importante que um designer deve ter. É uma das formas mais poderosas e efetivas de se conseguir sabe o quê? Respostas (valeu capitão óbvio…). Mas é sério, às vezes a gente esquece o quão importante é fazer essas perguntas, pior ainda, muitas vezes a gente acha que já sabe tudo.
Então, esse meu projeto foi baseado em perguntas, tanto para as pessoas quanto para mim mesmo. Sempre tendo em mente o que o produto tem a oferecer e melhorar.
O que eu estou buscando aqui
Quando eu comecei eu já tinha alguns objetivos na cabeça, mas alguns apareceram durante o projeto. Basicamente o que eu queria era:
- Que fosse simples, fácil de se navegar e adaptável para outros dispositivos;
- Explorar e estudar o processo de UX Research e como ele impactaria no design final;
- Estudar e experimentar alguns aspectos de UI;
- Criar uma experiência de produto confortável.
Como foi a minha abordagem?
O bom e o que "poderia melhorar"
Eu comecei analisando o site que está no ar hoje. O que daria para ser melhorado? O que já é bom? No geral e de forma bem superficial eu acho que o visual poderia ser melhor, mas o que mais? Tem qualquer coisa na experiência que poderia ser melhor? Então, eu comecei a pontuar alguns aspectos que eu considerei importantes para serem melhorados.
Depois dessa minha análise inicial, eu já tinha uma lista bem interessante de coisas que poderiam sofrer uma evolução.
Resumindo: coisas como hierarquia de conteúdo, experiência de leitura, uma barra de busca mais destacada, além de alguns outros detalhes menores que em conjunto tornariam o produto melhor.
Note que eu não uso a palavra "ruim" ou "errado" nesse contexto. Eu acho a Wikipédia um produto incrível, de verdade! E eu acho que muitos bons designers trabalharam muito bem na criação da Wikipédia. Então, seria no mínimo injusto eu usar essas palavras. Como meu mentor da Aela.io, Felipe Melo diz: "Não tem certo ou errado até que você tenha implementado e visto os resultados."
O protagonista dessa história: o usuário
Eu conversei com algumas pessoas e perguntei para elas o que achavam da Wikipédia. No fim, criei 4 personas que eu vejo como os principais tipos de usuários que a Wikipédia tem. E também mapeei suas jornadas ao usar a ferramenta.
Nessa parte, eu descobri uma coisa bem interessante: as pessoas não confiam no conteúdo da Wikipédia. O que será que aconteceu? E além disso, parece que eles não confiam na forma que o conteúdo é alimentado no site.
Basicamente o que acontece é que qualquer um pode escrever lá, e no fim você nem sabe quem escreveu. São pessoas totalmente anônimas que podem tranquilamente alterar palavras e frases quando bem quiserem (isso é até meio assustar, não?)
Eu até poderia sugerir alguma mudança na arquitetura nessa parte de inserir conteúdo (hmmm… talvez eu faça isso), porém, meu objetivo aqui é a interface e a experiência. Assim, como a interface pode ajudar trazer confiança para esse produto?
Dessa forma, para os próximos passos eu deixei algumas coisas em mente para que essa experiência fosse mais confiável:
- Foco no conteúdo;
- Os autores não podem mais ser anônimos;
- O visual deve refletir confiança;
- Buscar referências em produtos que o usuário sente confiança ao navegar.
Depois do usuário, vem o produto
A experiência que eu buscava criar deveria ser simples e com um visual atraente, mas confiável. Então, eu acredito que a minha Wikipédia deveria ser uma mistura desses dois caras:
"A Wikipédia deve ser um mecanismo de busca para o conhecimento." Essa foi uma frase que estalou na minha cabeça depois de toda essa parte de pesquisa. E ela resumia bem o que eu buscava. Então deixei isso bem anotado para as próximas etapas.
Meu objetivo aqui foi repensar a experiência das páginas principais do site. Assim, eu escolhi a Home, a Home de Portais e a página de Artigo com suas principais interações.
Comecei desenhando o mapa do site destas páginas, tentando simplificar e mapear onde o usuário poderia ir e também algumas partes do site como o header e o footer. Dessa forma, todas aquelas listas de links, ferramentas e configurações ficariam organizadas nesses lugares.
E aí a coisa começou a sair do papel na etapa de Wireframes. Depois que eu os criei, reservei um tempo para pontuar tudo o que eu considerei melhorias na hierarquia de conteúdo e nas funções. Então, eu percebi que para a Home e a Home de Portais, seria interessante pensar neles como se fossem complementares entre si.
Nesse ponto, eu fiz um "treco" que chamei de "Níveis de Conteúdo". Basicamente, seria listar em níveis de importância o que viria em primeiro lugar, em segundo, terceiro e assim por diante dentro de cada página. Assim, na Home o primeiro nível seria a busca, o segundo os botões dos portais e terceiro seria um artigo em destaque. Já uma Home de Portais teria como primeiro nível as subcategorias e logo depois já viria o artigo em destaque, biografia e assim por diante.
Esse pensamento fez com que fosse bem mais fácil colocar as coisas na ordem que elas deveriam estar. Tá aí a hierarquia que eu procurava! :)
Por enquanto eu já estava bem satisfeito com os Wireframes, então, eu deixei algumas coisinhas pra pensar na hora do Visual Design.
Agora vem a diversão: Visual!
Aqui eu não vou me alongar tanto por que eu acredito que as imagens devem falar por elas mesmas. Porém, existem alguns pontos que eu queria citar antes de passar pelo design:
- Blocos de conteúdo (tipo cards, mas maiores) tornam bem fácil e claro por ordem nas coisas;
- Agora a Wikipédia começa te fazendo uma pergunta antes de você perguntar pra ela;
- O globo possuí uma animação que deve responder à algumas de suas interações;
- Títulos grandes e espaços brancos. Um pouco de respiro!
- Nada de vários hiperlinks azuis no meio do texto, agora eles são muito mais sutis;
- Textos com respiros e área para leitura.
Home
Portal de Artes
Busca & Índice
Artigo
Últimos "dizeres"
Bem, esse foi meu projeto de Redesign Wikipedia.
Foi um desafio beeeeem interessante e bem divertido também. Com ele eu consegui aprender muita coisa nova, mas a aprendizado continua, não é mesmo? Então, se você que teve paciência de ler esse texto até aqui e quiser bater um papo, fique à vontade pra me adicionar nas redes ou me mandar um e-mail. Vai ser um prazer conversar com você!
Email: victor.rosato@outlook.com
E um último obrigado à todos da comunidade Aela.io e principalmente os mentores por me ajudarem a me tornar um designer melhor. =)
Victor Rosato, faz parte da comunidade Aela, como aluno do bootcamp Master Interface Design. Nossos alunos, são estimulados a compartilharem conhecimentos e aprendizados através de textos aqui no Medium.
Quer acompanhar os próximos artigos do Victor e da comunidade Aela? Lembre-se de nos seguir aqui no Medium e assine nossa newsletter para receber novidades por email.
