Grupo 7857.png
Grupo 7858.png

Melhorando a usabilidade dentro da interface visual da plataforma MONETIZZE.

Problema apresentado: Um dos problemas que temos nessa interface é o fato de alguns usuários se *cadastrarem e ficarem perdidos* após este passo não sabendo o que fazer.

 

Desafio proposto: Como melhorar a interface da plataforma incentivando os usuários a se cadastrarem de forma ativa?

Análise da plataforma existente: Após fazer algumas Análises de Heurísticas conseguir identificar alguns problemas na interface como: Falta de organização e consistência nas informações, sem uma orientação visual deixando a interface um pouco confusa, cores não condizentes, falta de hierarquia das informações, falta de feedbacks para ajudar aos usuários e sem prevenção de erros.

Link da plataforma: https://app.monetizze.com.br/login

Etapa de pesquisa e entendimento: Para propor uma melhor solução resolvi entender mais sobre a empresa e os seus concorrentes (Hotmart e Eduzz), assim como pesquisa em outras referências visuais de interfaces com o intuito de compor melhor a solução criada através da interface visual.

 

Mood board.png

Fluxo de navegação: Após essa análise resolvi reestruturar o fluxo de navegação mapeando a plataforma desde a área de login até a área de gerenciamento da plataforma, para entender a jornada que o usuário percorreria ao navegar pela plataforma.

 

Site map (fluxo de navegação).png

Etapa de ideação e proposta de solução: Após desenhar vários rascunhos e refinamento das telas resolvi partir para elaboração do protótipo em alta fidelidade, o intuito é melhorar a interface, tornando mais intuitiva, colaborando com a diferenciação no uso das cores, identificando melhor os pontos mais importantes ao serem navegados pelos os usuários, tornando a interface o mais minimalista possível. Em complemento, além de criar uma nova hierarquia das informações, dando um direcionamento visual, desenhei uma aba como uma espécie de gamificação para induzir ao novos usuários a completarem seus cadastros, assim como o exemplo feito no linkedin.

 

Wireframe em baixa fidelidade.png
Style guide.png
mockup.png
Tela de login.png
Tela de cadastramento.png
Home.png
Resumo financeiro.png

Aprendizados: Todo processo passa por várias etapas de evolução, por tanto, devemos ficar sempre atentos às melhorias contínuas, pois o mercado muda, as pessoas mudam.

​Ferramentas usadas: Adobe XD, Miro e Whimisical