O terceiro projeto do bootcamp Ironhack UX/UI Design

O time

E dessa vez o time, bom, não tem time!
É um projeto solo.

Sobre o projeto

Melhorar nossas habilidades de interface do usuário. Para isso, tivemos que escolher um aplicativo móvel relativamente conhecido. Então, para ver o que poderíamos melhorar.

Então optei por trabalhar na versão mobile do aplicativo Discord.

Fiz essa escolha porque, como muitos dos meus colegas Ironhackers, sou usuário deste aplicativo e devo dizer que a versão móvel não é muito amigável.

Tivemos que escolher entre 3 e 7 páginas para trabalhar. Então eu passei pelo aplicativo e fiz minha escolha com base em minhas próprias frustrações, mas também com base nos elementos dessas páginas para ter diferentes aspectos da interface do usuário para trabalhar (menu, perfil, cartões…)

E especialmente este menu muito, muito longo…

Análise Visual do Concorrente

Como o Discord é basicamente um app para gamers, fui ver o que os concorrentes ofereciam de parecido e/ou diferente.

As paletas de cores

Aqui estão as paletas de cores usadas por esses três concorrentes

E aqui está o do aplicativo móvel Discord

análise heurística

Após essas pequenas pesquisas, é o retorno do nome muito selvagem da análise heurística.

Novamente seguindo as dez heurísticas de usabilidade mais populares para design de interface do usuário e identifiquei e anotei em uma tabela os erros heurísticos que encontrei.

Pesquisa secundária

Eu também queria saber mais sobre a marca, então fui fazer algumas perguntas ao meu melhor amigo Dr. Google.

E pude ver que Discord havia desenvolvido um Sistema de Design que eu estava ansioso para estudar.

Você pode encontrá-lo aqui na parte inferior da página.

A primeira coisa que me impressionou é que a paleta de cores do Design System é completamente diferente daquela usada no aplicativo móvel…

O que eu quero fazer

Reconecte o aplicativo com o sistema de design
Corrija todos os erros de acessibilidade
Simplifique e reorganize este menu muito, muito longo…
Adicione inclusão

Reconecte-se com o Design System

Para isso, simplesmente peguei a paleta de cores e a fonte presentes no documento.

Ginto Nord para a marca
Whitney para o texto

A assinatura do Nitro parece estar no centro do marketing do Discord, mas não há vestígios dela no sistema de design, então optei por usar o Ginto Nord para identificar o Nitro, mas aplicá-lo em itálico para dar o efeito de movimento e velocidade que esse nome sugere.

Corrija todos os erros de acessibilidade

Aqui, trabalhei principalmente nos erros de contraste seguindo as recomendações do Design System e verificando regularmente o contraste, o tamanho dos ícones e os textos usados.

Simplifique e reorganize este menu muito, muito longo…

Para este item, simplesmente mudei esta longa lista para um menu sanfonado. Também coloquei de volta a opção de sair que estava bem no final da 1ª aba do novo menu.

Também optei por retrabalhar uma parte da página de perfil com este layout para o apelido que com meu modelo mental queria clicar nele para modificá-lo (o que obviamente não era o caso…)

Adicionar inclusão

Para esse objetivo, tenho que admitir que não sabia como ou o que fazer de tanto que esse assunto é extenso.

Então tive a ideia de adicionar um tema de cores diferente com o “Blurple” oficial do Discord como tema padrão, depois um tema rosa e dois temas com cores mais neutras.

E também modifiquei um ícone de foguete (bem masculino) para um ícone mais neutro e mais adequado ao seu propósito.

Sobreposição de atividades

Também reformulei a seção de jogos para torná-la mais legível e arejada, modificando o layout das cartas.

Visão geral do antes e depois

Aqui estão os links para os dois fluxos de protótipo se você quiser testar o menu sanfona e o ícone do gamepad com sua sobreposição.

primeiro link

segundo link

O que aprendi com este projeto?

Eu me diverti muito no projeto, gostei muito de mergulhar na interface do usuário e aprender mais sobre o Figma.

Percebi também que, embora neste projeto estivéssemos realmente focados em UI, as habilidades que aprendi em UX nos dois projetos anteriores também foram úteis: análise visual da concorrência e pesquisa secundária que me levou ao Design System.

Sinta-se à vontade para deixar um comentário se tiver alguma sugestão sobre o que eu poderia ter feito melhor ou apontar quaisquer erros que eu possa ter cometido.
Obrigado por ler.