WisOpt Design System – Estudo de caso UX

Saksham Sinha Blocked Unblock Seguir Seguindo 26 de dezembro de 2018

Um estudo de caso sobre o processo de design do aplicativo WisOpt.

O que é o WisOpt?

O WisOpt ( Wisdom Optimization ) é uma equipe do Instituto SRM de Ciência e Tecnologia, KTR, sob a Diretoria de Engenharia e Tecnologia. Ele fornece um aplicativo móvel e web simples para comunicação rápida e contínua entre alunos e faculdades de uma maneira organizada e profissional.

Em suma, o WisOpt é um aplicativo que ajuda professores e alunos a se conectarem, ajudando os professores a fazer upload de participações, compartilhar material de estudo, fazer anúncios em grupo e receber feedbacks na forma de enquetes e pesquisas. A visão do WisOpt é Empowering Educator. Destina-se a tornar o processo de aprendizagem e conseguir um emprego para um aluno de uma forma divertida e interativa.

Entrei no WisOpt quando descobri uma falha na página de inscrição do aplicativo, onde meu amigo achou um pouco confuso criar uma conta. Eu entrei em contato com o WisOpt sobre minhas habilidades e minha capacidade de melhorar a experiência do usuário do aplicativo e ser contratado como um Junior UI / UX Designer.

Tarefa atribuída

Quando entrei, os membros da equipe estavam trabalhando para criar um aplicativo completamente novo com alguns novos recursos para aumentar o envolvimento do usuário. O objetivo era recriar o sistema de design do WisOpt para que, quando alguns novos recursos fossem adicionados, ele fosse configurado na aplicação. Os objetivos que estávamos tentando alcançar eram:

  • O aplicativo exigia uma aparência nova e fresca (esteticamente agradável) para os usuários.
  • O aplicativo precisava ser generalizado para configurar todos os recursos a serem adicionados no futuro – como a visualização da participação.
  • O aplicativo parece completamente diferente no Android e no iOS. Eles precisavam de um design para ser a união de ambas as plataformas.
  • Melhore a experiência do usuário do aplicativo para concluir uma tarefa com menos esforços.

Pesquisa sobre os usuários

Eu, juntamente com o meu Senior UX Designer, Alan Christian , fiz uma pequena pesquisa sobre as necessidades dos usuários. Descobrimos que alunos e professores atuais usam o WhatsApp para se comunicar e compartilhar material de estudo. O outro concorrente foi o Google Sala de aula. Depois de entrevistar alguns dos alunos da faculdade, criamos a seguinte Persona do Usuário –

Persona do usuário

Rohan Dutta (21 – Chennai – Estudante – Solteira)

Mentalidade do usuário

“Adoro usar um aplicativo na minha mão para acessar rapidamente minha participação, pontuações de testes e conhecer o anúncio do professor em um único lugar.”

Ambiente do usuário

  • Rohan é um estudante universitário do segundo ano que gosta de explorar novas tecnologias e gosta de discuti-las com sua faculdade.
  • Sua faculdade começa às 8 da manhã e vai até as 5 da tarde.
  • Ele usa o WhatsApp para contatar suas faculdades para pedir dúvidas ou por quaisquer outras razões.
  • Ele usa o Google Chrome para baixar arquivos PDF de materiais de estudo.

Objetivos do usuário

  • Rohan gosta quando ele consegue acessar informações sobre as aulas e o anúncio dos professores.
  • Ele quer aprender uma nova habilidade para se candidatar a estágios e empregos.
  • Ele precisa de um portal de fácil acesso para manter um registro de sua presença e pontuação no teste e visualizá-los rapidamente.

Paleta de cores

Mantendo a sensação de “ educação ” do aplicativo em mente, decidimos optar por Blue (# 006ff3) como a cor principal do aplicativo. As cores secundárias que escolhemos são Verde (# 0dc533) e Laranja (# fd7837). Para o certo e errado, nós fomos pelo mesmo verde e vermelho (# fd4159).

Tipografia

A fonte Type que usamos no aplicativo é o peso Nunito in Semibold e Bold. Deu uma sensação de infantilidade e profissionalismo ao mesmo tempo.

Processo de design

Começamos listando os recursos que queríamos ter no aplicativo –

  • Lista de salas de aula (tela de bate-papo)
  • Calendário (para conhecer as atividades e eventos na faculdade)
  • Página de perfil com vitrine de habilidade
  • Tela de bate-papo em andamento com uma resposta (tela separada)
  • Visualizando lista de alunos em uma turma
  • Atendimento e Cartão de Pontuação
  • Polling e Survey (tipo MCQs e QnA)

Listamos a tarefa que precisamos realizar e criamos um diagrama de Fluxo do Usuário dividido em três tipos de usuários – Professores, Pais e Alunos.

O objetivo era ter em mente a experiência do usuário do aplicativo. A estética do aplicativo não deve distrair os usuários para realizar qualquer tarefa. Por exemplo, quando um professor fez um anúncio no grupo sobre um teste amanhã, os alunos devem ver claramente essa mensagem mais importante primeiro e, em seguida, ir para a seção de resposta do tópico para fazer perguntas. Cada anúncio na tela de bate-papo em andamento é um tópico em que a resposta é aberta em uma nova tela. O segmento de anúncio exibe a resposta mais recente de qualquer aluno na mesma tela para aumentar o envolvimento do usuário.

Fluxo do usuário do aplicativo inicialmente

Mantivemos em mente o Design de Material do Android e o Design de Interface Humana do iOS e tentamos projetar os wireframes de forma que o App parecesse igual em ambas as plataformas.

Wireframes

Esta foto é tirada durante os primeiros dias de sessões de brainstorming para projetar o protótipo UI.Paper de anúncio para testes (projetos de baixa fidelidade)

Designs de alta fidelidade

Projetamos os modelos de alta fidelidade no Adobe Photoshop, pois ficamos confortáveis com o Windows, e o Adobe XD não pôde ter o suporte ao Plugin Zeplin durante esse período.

Criar enquete e pesquisa

Anúncio e Respostas

Descrição do Grupo e Resultado das Pesquisas

Desenvolvimento

Nós então encaminhamos os mockups através do Zeplin para os desenvolvedores codificá-los. Enquanto isso, discutimos quais são os elementos que podem ser alterados de acordo com a experiência do desenvolvedor e, em seguida, atualizamos a primeira nova versão do App na Google Play Store e na App Store.

Além disso, tivemos muitas iterações e mudanças com as avaliações dos usuários e os testes que fizemos e o processo ainda está em andamento com o objetivo de manter as necessidades e metas dos usuários como a meta central a ser alcançada.

Design atual do aplicativo de trabalho com algumas iterações