Wikipédia Concept Design

Eu, como estudante/workaholic de interfaces digitais (e mutante x-men nas horas vagas), adoro um desafio, pense como eu amo o seguinte cenário:

Eu, uma mesa, um briefing, vários dados/pesquisas, uma caneta e uns bloquinhos.

Adoro montar fluxos, definir interações e organizar coisas desorganizadas! Por isso mesmo, o desafio abaixo foi um prato cheio. Vamos lá!


Desafio

Sendo um site mundial tão relevante e complexo, fui desafiada no curso Master Interface Design do Aela.io, à elaborar um estudo de redesign da Wikipédia. Como a Wikipédia é enorme, tracei os seguintes objetivos:

  • Fazer o redesign focado no usuário geral (e não nos contribuidores);
  • Não fazer uma reformulação abrupta para que o usuário não sinta o contraste tão grande;
  • Melhorar a hierarquia e organização da informação, navegação e tornar o site visualmente mais atrativo.

Foco de Design

Arquitetura da informação/Design de Interação/Visual Design


Processos

Os processos seguidos neste estudo foram:

  • Análise da Wikipédia
  • Criação de Personas
  • Jornada do usuário
  • Pesquisa de features e referências visuais
  • Sitemap
  • Sketches
  • Wireframes
  • Protótipo
  • Interface final

Desafios e Restrições

Um desafio deste projeto foi não possuir acesso a pesquisas de usuários reais e internas do Wikipédia. Com essa restrição, passei pelos caminhos possíveis. Falei com alguns usuários reais da Wikipedia que tive acesso e simulei a jornada do usuário de acordo com as dificuldades coletadas.


Análise da Wikipédia

Após a análise, os principais problemas identificados na Wikipédia foram:

  • Menu confuso;
  • Informação que poderia ser secundária na home, estando em destaque;
  • Texto, em geral, cansativo e não atrativo;
  • Portais com navegação cansativa e sem padronização.

Personas

Identifiquei 3 personas principais:

  • O usuário que é redirecionado pelo Google.
  • O usuário que vai diretamente à Wikipedia para procurar algo.
  • O público mais jovem, que vai especificamente para o trabalho na escola ou faculdade.
Criação de personas

Jornada do usuário

As principais percepções de melhorias vindas da jornada do usuário foram:

  • Destacar Wikinews (isso pode ajudar trazer o usuário diariamente ao site para acompanhar as notícias);
  • Hierarquizar e padronizar melhor o site como um todo;
  • Adicionar recurso de salvar artigos no perfil do usuário;
  • Deixar a navegação pelos portais mais intuitiva e organizada;
  • Definir melhor a estrutura dos artigos, para que a leitura seja fluida e agradável.

Sitemap

Desenvolvi o sitemap com a missão de deixar a navegação mais fluida e organizada. Depois que o sitemap é concluído, é mais fácil começar a desenhar e pensar nas telas.

4 áreas macro foram separadas: header principal, header secundário, sidebar e footer.


Sketches


Interface Final

O menu foi dividido em duas partes:

Header
Tem as funções mais secundárias para o usuário, além do perfil, que está localizado na parte da tela em que o usuário já está acostumado.

Sidebar
Possui as funções mais utilizadas para navegação pelo site (portais, outros projetos e configuração).

Como a tela inicial da wikipédia possui muita informação, os tópicos foram colocados em boxes, deixando mais organizados e mantendo, quando possível, textos que são links em azul, lembrando a Wikipédia como é hoje.

Na versão mobile, o sidebar é acessado através da navbar, ficando acessível durante toda a navegação.
Sidebar aberto

Perfil

O perfil do usuário possui três principais funcionalidades: favoritar, salvar em uma pasta específica ou grifar parágrafos de artigos. Dentro do perfil, o usuário pode: editar a nota, arrastar para cima e para baixo, transferir de favoritos para salvos e descartar o artigo.

Portais

Hoje, a estrutura dos portais do Wikipédia são complexas, sem consistência e difícil de navegar. Nesta proposta, foi inserida uma caixa de navegação. Dessa forma, o usuário pode escolher qual filtro pesquisar e navegar pela linha do tempo, mapa ou sessões relacionadas ao portal.

Artigos

Na página de artigos, o sumário é fixo no scroll, na parte superior da tela, no desktop e no mobile.

O usuário tem três alternativas de localização através do sumário:

  • Se localizar, pela atualização do sumário através do scroll, em qual tópico ele está no momento;
  • Ir para o próximo tópico clicando nas setas;
  • Abrir o sumário e vê-lo completo.
Exemplo de página de artigo.
Exemplo de um artigo com uma grade de imagens e vídeos.

Navegue no protótipo:

Desktop: https://marvelapp.com/7j1g914/screen/38526965
Mobile: https://marvelapp.com/5jhihg8/screen/38704503

Para ver mais sobre meu trabalho, clique aqui :)


Amanda Damasceno, faz parte da comunidade Aela, como aluna 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 da Amanda e da comunidade Aela? Lembre-se de nos seguir aqui no Medium e assine nossa newsletter para receber novidades por email.