Homem sorrindo com o celular

Como usei minhas habilidades para melhorar a experiência de uso interface do aplicativo Microsoft Outlook?

Problema apresentado: Recentemente o aplicativo da Microsoft vem apresentando alguns problemas, por esse motivo usei algumas abordagens de UX e UI para guiar em uma melhor proposta de solução de problemas.

 

Desafio proposto: Como eu poderia melhorar a interface visual e o sistema de navegação criando uma boa usabilidade, garantindo uma melhora na experiência de uso dos usuários da plataforma?

 

Pesquisa e Análise: Ao fazer uma análise heurística listei os problemas encontrados dentro do sistema funcional assim como no aspecto visual.

 

  • Falta de consistência visual no aplicativo;​

  • Baixo contraste nas informações;

  • Não possui feedbacks através de micro interações para as ações dos usuários;

  • O aplicativo apresenta uma interface não minimalista com excesso de informações desnecessárias;

  • Falta de uma orientação visual para ajudar os usuários em suas ações;

  • Falta de visibilidade de status, indicando para onde o usuário deveria ir;

  • Pesquisa feita através da Play Store e App Store:

 

Percebi que 30% dos usuários reclamam de:

 

  • Lentidão do aplicativo;

  • Excesso de informações;

  • Desorganização das informações;

  • Funcionalidades desnecessárias;

  • Sistema de filtragem ruim;

  • Desorganização de pastas sem interatividade e sem direcionamento.

Pesquisas com os usuarios.png
Telas atuais do APP outlook.png
Crazy ´8s  e Fluxo de navegação.png

Etapa de definição: Após mapear essas e outras informações, precisei definir o objetivo final e para isso usei uma técnica chamada HWM que detalha melhor os problemas apresentados.

  • Como poderia melhorar o sistema de visualização dos usuários indicando onde estão e para onde irão?

 

  • Como poderia reduzir o número de informações desnecessárias ajudando a ter uma interface mais fluida?

 

  • Como poderia definir um sistema de filtragem e organizar as pastas causando uma boa experiência de uso.

 

Essas e outras perguntas foram feitas para nortear melhor os problemas.

 

Etapa de ideação: E para ajudar na concepção e construção de uma nova interface​ visual, resolvi buscar várias referências visuais para ajudar a compor a revitalização da plataforma.

Moodboard.png

Wireframe: Após desenhar as telas, resolvi usar a técnica do crazy’8 s para o refinamento das telas.

Rascunhos.png

Protótipo: A partir do refinamento das soluções desenhadas desenvolvi um fluxo de navegação definindo a hierarquia das informações e criando guias de estilos para definir

As cores, tipografia e botões usados na interface, criando um padrão consistente para o uso das informações.

 

​Teste de usabilidade: Ao enviar o teste para algumas pessoas, coletei informações relevantes para a melhoria da interface.

Guia de estilo-Microsoft Outlook.png
MVP – 2.png
MVP.png
MVP – 1.png

Aprendizados: Durante o processo de construção tive alguns aprendizados, tais como: economia de tempo, ser objetivo nas propostas, trazer clareza aos usuários priorizando as informações mais importantes. 

Obrigado!

 

Ferramentas usadas: Adobe XD, Photoshop e Google Docs.

Simulação do protótipo em funcionamento.

E-mail: w.bruce2015@outlook.com

Whatsapp: (31) 99313-6197

© 2021 by Wesley Bruce