Start

Start

UX, UI, arquitetura da informação, HTML, CSS(SCSS)

Intro

A empresa precisava passar um client de LMS nativo para webapp, de forma que ele fosse responsível, leve e de rápida implantação. A ideia é que esse processo de produção fosse o mais curto possível para testarmos a ideia.

Definimos um MVP, cujo mapeamento final gerou esse montante de telas:

Mapeamento e wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.

Premissa

Essa primeira versão:

  • O ciclo do produto resume-se em: logar e consumir conteúdo.
  • Faríamos um mínimo de e-mails de comunicação com o usuário: cadastro na plataforma/recuperação de senha, inclusão em curso/turma e conclusão de curso
  • Não incluiria alguns tipos de conteúdo, como HTML, infográfico e outros.
  • Toda parte social seria feito, caso o produto fosse valido.

Execução

Wireframe

O wireframe serviu para fazer alguns ajustes nas telas do aplicativo nativo.

Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Mapeamento e wireframe inicial do Start.
Wireframe inicial do Start.
Cores

Por ser um produto white label, as cores principais mudam de clientes para cliente. Além delas, existem as cores de apoio para situações particulares da interface.

Tipografia

Nesse projeto usei: Fire Sans para títulos e Roboto para o corpo de texto.

Amostra da fonte Fira Sans usada para títulos.
Amostra da fonte Fira Sans usada para títulos.
Amostra da fonte Roboto usada para títulos.
Amostra da fonte Roboto usada para o corpo de texto.
Tablet, orientação paisagem
Tela do Start.
Tela do Start, em orientação paisagem.
Tela do Start.
Tela do Start, em orientação paisagem.
Tela do Start.
Tela do Start, em orientação paisagem.
Tela do Start.
Tela do Start, em orientação paisagem.
Tela do Start.
Tela do Start, em orientação paisagem.
Tela do Start.
Tela do Start, em orientação paisagem.
Tela do Start.
Tela do Start, em orientação paisagem.
Tablet, orientação retrato
Tela do Start.
Tela do Start, em orientação retrato.
Tela do Start.
Tela do Start, em orientação retrato.
Tela do Start.
Tela do Start, em orientação retrato.
Tela do Start.
Tela do Start, em orientação retrato.
Tela do Start.
Tela do Start, em orientação retrato.
Tela do Start.
Tela do Start, em orientação retrato.
Tela do Start.
Tela do Start, em orientação retrato.

Final

O layout simples e direto funciona de forma responsiva

Utilizamos poucas imagens para que seu carregamento fique ainda mais leve, focando na parte principal: o conteúdo a ser consumido pelo aluno.

Mockups
Simulação do Start.
Simulação do Start em iPad, orientação paisagem.
Simulação do Start.
Simulação do Start em celular.