O que aprendemos redesenhando o Instagram:

Para quem não nos conhece, somos a equipe de design dentro da Vizir – mesmo sendo uma pequena porção dentro de vários devs por aqui –  e como designers, temos a missão de alinhar o Design com o Desenvolvimento. Certo dia, percebemos que poderíamos fazer mais do que o nosso trabalho do dia a dia, poderíamos como designers, encontrar nossos próprios “Problemas do Design” e nos desafiar: se fôssemos trabalhar com um App que é muito usado, o que poderíamos fazer de diferente? O que poderíamos melhorar em termos de Usabilidade e Interface? Tomamos como desafio então, escolher um aplicativo conhecido no mercado e fazer uma análise de como poderíamos repensá-lo como um todo.

Mas qual App trabalhar?

Como prega o bom e velho Design, sempre olhamos pelo belo, mas também não esquecemos de analisar dados, pois o Design também é responsável por entregar muito mais do que uma imagem bonita aos olhos, o Design precisa que este “Belo” seja comprovado com números de download ou tempo de navegação. Pesquisamos então, quais eram os Aplicativos mais baixados, no caso, nos atemos ao número de download para o sistema iOS. Encontramos dados da Exame e vimos que em 2017, os 5 aplicativos mais baixados foram respectivamente: Bitmoji, Snapchat, YouTube, Messenger e Instagram.

Dentre esta gama de opções acabamos optando pelo Instagram, por termos familiaridade com a aplicação dentro do time da Vizir e também através do Zen Voting, mas optamos por focar na sua versão desktop, onde é possível ver uma grande diferença na performance, tanto da usabilidade quanto do layout em si.

Após a escolha

O segundo passo foi verificar se encontrávamos exemplos de outros aplicativos que também usavam dessa sinergia entre “mobile e desktop”, um dos mais conhecidos atualmente é o Whatsapp, a versão desktop cumpre a tarefa de transmitir a mesma função, do mobile, para o desktop. Apesar da versão desktop do Instagram ser parecido com o mobile, ele não é muito fiel ao aplicativo, como a distribuição de algumas funcionalidades: os “stories” por exemplo, que são mantidos na lateral da tela enquanto no app ele fica na parte superior, além da ausência de algumas delas: como as mensagens diretas, opção de curtir e responder comentários e etc. Isso prejudica a performance do aplicativo quanto ao seu usuário mas também faz com que pessoas deixem de usá-lo pela falta de praticidade e de elementos que se encontram na versão mobile.

Entendemos que por muitas vezes, nós como designers, tomamos determinadas decisões para que a utilização de uma aplicação seja priorizada em um determinado device, mas entendemos que poderíamos atender alguns usuários (grandes Marcas, por exemplo).

O Desafio

O primeiro e grande desafio foi identificar o que poderíamos efetivamente alterar e que traria um ganho para a aplicação, em termos de usabilidade e design. Afinal, é o Instagram. Trabalhar com uma aplicação tão conhecida, que o próprio time utiliza diariamente, poderia nos levar ao óbvio, então o famoso “outside the box” – ou seja sair do comodismo –  foi colocado em pauta o tempo todo durante as conversas de brainstorm, para conseguirmos fazer uma análise crítica, com embasamento em Heurísticas e Boas Práticas de Design e não apenas no que gostamos ou deixamos de gostar em termos visuais.

Metas:

• Sair do comodismo
• Deixar o desktop mais próximo ao mobile possível
• Usuário não precisar recorrer ao celular

Entendendo o Aplicativo

O Instagram (lançado em 2010) é uma rede social de compartilhamento de fotos e vídeos, hoje em dia o aplicativo possui em média 400 milhões de usuários ativos em sua plataforma, além de ser utilizado por 48,8% das empresas e ser a segunda rede social mais usada no mundo, ficando atrás apenas do Facebook.

Além disso o instagram dá a liberdade dos usuários compartilharem suas fotos em outras redes sociais como facebook, twitter, tumblr e flickr aumentando a sua influência pela internet (dados da DMR Business Statistcs e da Omnicore Agency).

Os Problemas

Após uma análise do aplicativo, listamos os principais pontos de atenção encontrados e eles foram:

• Não possui direct message
• Não é possível curtir ou responder comentário
• Não é possível fazer troca de perfil
• Não possui opção de seguir na notificação
• O Stories no sidebar

Importante ressaltar que pensamos que são pontos de atenção/problemas, dado que alguns detalhes que existiam no mobile, não existiam na versão desktop, e entendemos que ter nas duas versões da aplicação, poderia trazer um ganho e atender usuários que poderiam usufruir dessas features independente do meio que estivessem acessando.

Sobre as mudanças

Após listarmos os problemas, decidimos que algumas mudanças seriam feitas nessa primeira análise, até mesmo pensando que se fôssemos fazer uma rodada de teste com usuários, não teríamos um retrabalho extremo pois teríamos partido de um MVP:

• Reorganizar os componentes do header
• Reposicionamento do stories
• Adcionar direct messages
• Opção de seguir nas notificações
• Opção de troca de perfil
• Reposicionamento das informações do perfil
• Sugestão de quem seguir

• Busca: Na timeline, ao clicar no ícone de busca, o header desaparecerá e será ocupado só por ele. Assim que o usuário começar a digitar sua respectiva busca, as categorias aparecerão embaixo para ele filtrá-la como deseja, se é uma pessoa, uma tag ou um local, por exemplo.

• Notificação: Nas notificações agora é possível visualizar as curtidas agrupadas, assim como no app.

• Seu perfil: A principal mudança feita no perfil foram as informações do usuário no side bar, pois queríamos um layout mais clean e com melhor visualização das fotos. Fizemos duas versões, a primeira com os ícones de ver fotos salvas e configurações abaixo das informações do usuário e com sugestões pra seguir.

Já a segunda versão possui o reticências no canto superior do sidebar, onde lá se encontra as fotos salvas, as configurações e outros. Além do que você tem a opção de fechar as sugestões caso você não queira vê-las.

• Perfil de uma pessoa que você não segue:

Aprendizado

Pensando na utilização da aplicação, identificarmos estes itens e então sugerimos novas versões, a serem testadas com os usuários, pode oferecer um fluxo de navegação para eles que seja mais satisfatório no que diz respeito a atender as necessidades com aquele meio, independente de qual device ele esteja com acesso no momento e fazendo com que ele se sinta mais confortável com a aplicação. Mas todo esse trabalho de análise de uma aplicação, deve sempre levar em consideração Heurísticas, Boas práticas de design e usabilidade, para que não se desvirtue o olhar para algo pessoal e sim, para um resultado que tenha embasamento e siga realmente um caminho que seja mais adequado ao usuário. E o principal: fazer rápido, para testar rápido e se falharmos, tudo bem, pelo menos aprendemos qual caminho não devemos seguir.

Além disso, esse exercício cria, para empresa, a idéia de que seu produto precisa sempre inovar, não apenas no quesito de funcionalidade, mas também na experiência que quer passar para o cliente tanto no layout quanto no fluxo e como experiência final, como experiência de marca, para tornar o usuário um propagador da aplicação, quase que uma propaganda gratuita.

Projetos como esse mostram que não precisamos nos ater apenas às atividades do dia-a-dia, – isso quando falamos de nós, equipe de Design, designers –  que é possível sair da nossa zona de conforto e nos surpreender pois em todo aplicativo há sempre itens a serem melhorados, e o exercício que fizemos, ajuda o designer à melhorar não só o app, mas o olhar como profissional de design e praticar o que sabe.

Esse post foi realizado pelo time de design da Vizir: Heloisa Souza, Carol Chang, Fernanda Ishimoto e Priscila Sonnesso.