Reimaginando apps do Facebook | UX & UI Case

Acesse o site de demonstração visual clicando aqui.

Ideação e Justificativas

O Facebook é detentor de várias plataforma digitais líderes em seus respectivos segmentos, e todos trabalham no pilar da sociabilidade das pessoas. Uma empresa como tal, precisa ter um trabalho extenso de estratégia, principalmente alinhado ao marketing e UX, no qual ambos garantem que nenhuma plataforma vá “canibalizar” outra. Desta forma, este case foi desenvolvido reimaginando os conceitos (atualmente confidenciais) de construção das três principais plataformas do Facebook: Instagram; WhatsApp; e Facebook. Esta leitura provém de um trabalho de expansão de portfólio, por Paulo Carmo, fazendo jus a ideia de reimaginação da experiência do usuário. O trabalho de UI e UX Writer estão disponíveis aqui.

Neste caminho de reimaginação é necessário entender muitos pontos ocultos destas plataformas. As pesquisas e feedbacks diretos de tais não são publicados e, por isso, a análise é feita pelo ponto técnico utilizando os aplicativos e webapps. O acesso às plataformas é muito simples, todas gratuitas, e não há verificação de cadastro, assim, tornar-se um usuário para fazer análise é algo que ninguém vá encontrar dificuldade (dificilmente alguém passará por isso sem ao menos já ter conta em alguma das plataformas).

A nova experiência reimaginada deverá garantir que os usuários tenham a percepção de que os aplicativos provêm da mesma empresa, e que cada um seja único. Além de uma experiência para o usuário, esse desenvolvimento também serve de forma estratégica pelo lado da empresa, onde o Facebook já declarou que deseja que os usuários tenham percepção de que os aplicativos pertencem a ele e maior transparência (https://www.tecmundo.com.br/redes-sociais/144665-whatsapp-instagram-terao-novos-nomes-referencia-facebook.htm). Tal estratégia levaria anos de implementação a passos curtos, dada a complexidade e importância das plataformas.

Os elementos visuais e a hierarquia de informação devem possuir uma estrutura similar, mas que fique claro que todos possuem objetivos diferentes. Desta forma, as plataformas receberam a seguinte classificação:

  • Instagram, focado em disseminação de conteúdo e visualização pelo usuário;

  • WhatsApp, centralizado na comunicação visual (texto, imagens, vídeos, emojis e etc) e oral (ligações, áudios e videochamadas);

  • Facebook, imerso nas interações individuais e coletivas;

Resumindo: Instagram - conteúdo; WhatsApp - comunicação; Facebook - interação;

Neste ponto, deverá fazer sentido aquilo que muitos usuários sempre se perguntaram: “um dia vai virar uma plataforma só?”. A resposta provavelmente é não. As plataformas devem incrementar experiência a partir do momento em que você instala um outro aplicativo do Facebook, caso fosse o contrário, existiria somente uma única plataforma com muitas funções, das quais muitas seriam esquecidas ou desconhecidas. O aplicativo seria pesado e, provavelmente, o usuário prefere postar um story  no Instagram, por que se postar no Facebook vai vir aquela tia perguntar “mas não arranjou emprego ainda?”. Essas plataformas possuem públicos diferentes, e o certo é deixar cada um em sua plataforma. Mesmo se houvesse uma unificação, o Facebook teria grande dificuldade técnica com todo esse imenso banco de dados e a comunicação criptografada do WhatsApp. As personas seriam muito difíceis de serem feitas e o setor de marketing ia sofrer excessivamente com isso. Uma plataforma que tenta agradar a todos acaba não agradando ninguém. Tendo isso em mente, nada disso foi alterado. 


Objetivos

  • Reimaginar três plataformas de forma similares e únicas;

  • Pensar numa estratégia de unificação visual para a empresa e marcação “from FACEBOOK”;

  • Criar wireframe dos aplicativos;

  • Simpatizar com cada usuário e fazer ele se alinhar à plataforma e a plataforma à ele;

  • Implementar um visual estruturado e moderno;

  • Repensar as plataformas em telas diversas, incluindo proporções atuais, em ascensão e tendência;

  • Criar uma dinâmica de experiência de uso linear e concisa;

  • Abandonar design industrial.

Especificações

  1. Todas as plataformas deverão ter modo noturno;

  2. Os wireframes deverão ser construídos utilizando padrão de iPhone, da Apple;

  3. Os wireframes receberão influências de design system de iOS e Android, mas deverá ser algo novo e evolutivo, que possa deixar a marca Facebook clara;

  4. Poderão ter elementos similares;

  5. O arquétipo de linguagem para todas será “O Sábio”, pois, proverá uma linguagem clara, onde, as plataformas serão defensoras do conhecimento, liberdade, e comunicação;

  6. O cabeçalho de cada app será composto por: Logo ou marca nominativa, função destaque e abas;

  7. A parte inferior do aplicativo terá uma função de calor (conhecido como local de melhor alcance dos dedos).


Instagram

As telas criadas em wireframe: início (Home page), menu e perfil de outra pessoa.

  1. A página inicial será focada em conteúdo, dividido em 4 abas;

  2. A barra de menu inferior será dividida em: pessoal, conteúdo e comunicação (DM);

  3. O botão de conteúdo (que se refere a página inicial) deverá possuir o seguinte atalho: ao estar já na página inicial, clicando sob o ícone desta seção será aberta a câmera, que poderá ser utilizada para o story ou o feed;

  4. A seção pessoal será um menu lateral que abrirá preenchendo quase toda a tela;

  5. As notificações serão “interações” e aparecerão de forma resumida no menu da seção pessoal;

  6. O menu será composto de atalhos diversos, antes, espalhados pelo app;

  7. A tela inicial será focada em conteúdo, por isso, serão ocultos a quantidade de curtidas e comentários;

  8. As postagens serão inseridas dentro de blocos, com textura no padrão iOS, para unir nome de usuário, conteúdo e legenda;

  9. Uma postagem com múltiplos conteúdos deverá seguir o padrão carrossel;

  10. Dentro do bloco do conteúdo, o mesmo deverá vir antes do nome do usuário, mantendo tal como prioridade;

  11. A função destaque será a de criação de novas postagens para o feed ou story;

  12. A função de calor será o menu inferior, o atalho para câmera e diversos atalhos que possam ser inseridos.


WhatsApp

As telas criadas em wireframe: início (Home page), Status e conversa.

  1. As mudanças deverão ser sutis;

  2. A carga visual deverá ser menor e com a remoção de vários elementos;

  3. A função destaque será a de iniciar uma nova conversa (abrir a lista de contatos);

  4. A função de calor será a de pesquisa de conversas, contatos e conteúdo textual dentro dos Status dos contato.


Facebook

As telas criadas em wireframe: início (Home page), editor para nova publicação e aba interações.

  1. Todas as abas deverão ser de interação, com exceção da última, que deverá ser uma seção pessoal e de atalhos;

  2. Deverá remover a palavra “notificações” e substituir por “interações”;

  3. As abas deverão ser dinâmicas e adaptar as quais são mais utilizadas por cada usuário;

  4. Informações sobre quantidade de reações e comentários deverão estar de fácil acesso visual;

  5. As publicações deverão possuir resumo dos comentários ou comentários destaque;

  6. Cada publicação possuirá uma moldura com uma cor destaque, para unir a parte textual, multimídia (caso tenha) e nome do usuário que postou;

  7. Na publicação, no topo do bloco deverá constar o nome do usuário primeiro, mantendo tal informação como prioridade, para que seja cumprido o objetivo de ser focado em interações (através de pessoas);

  8. O espaço da função destaque será dividido pela função de pesquisar e a de abrir o aplicativo Messenger (também do Facebook);

  9. A função de calor será o botão de abrir a tela do editor de nova publicação.


Wireframes 

Acesse aqui o trabalho visual.

Para uma experiência de melhor, recomenda-se a utilização e acesso por computador.


Obrigado por ter lido até o fim, você é incrível!

Vamos trocar conhecimento, todos são bem vindos (inclusive o J.J. Abrams).

InstagramTwitterLinkedIn


#ux #facebook #redesignconcept #newwhatsapp #newinstagram #newfacebook

92 visualizações