QuickLessons

QuickLessons

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

Intro

Durante meu período de trabalho no QuickLessons, devenvolvi:

  • UX Drops: pequenas melhorias para aprimorar a experiência do usuário;
  • Apresentações para toda a equipe sobre design centrado no usuário;
  • Documentos que suportaram a ênfase no usuário, como:
    • fichas com personas;
    • questionários quali e quantitativos;
    • roteiros para entrevistas.
  • Pesquisas contextuais.

O maior e mais bacana desafio foi de iniciar o processo de resenho do produto.

Premissa

A partir de feedback de usuários recolhidos pelo suporte e pesquisa com nossos clientes, definimos algumas premissas:

  • Trabalharíamos somente a biblioteca HTML, uma vez que identificamos que o foco de nossos clientes estavam em cursos para dispositivos móveis e design responsivo. Outras bibliotecas receberiam apenas manutenção e suporte.
  • Uso de tecnologias mais recentes para melhorar a performance e as interações, além de acelerar a codificação do produto.
  • A primeira área a ser trabalhada seria a edição de cena. As áreas de edição do curso e edição da cena seriam trabalhadas em outro momento.
  • A interface do QL deveria ficar mais leve e simples, com um ar contemporâneo.
  • A edição de cena deveria ser algo divertido de se fazer. Deve haver um empoderamento do usuário sobre os elementos que aparecem na cena, sem pecar pelo excesso de opções e blank state dos concorrentes.

Execução

Cores

Como o produto já tinha um bom tempo de mercado, o azul foi mantido como cor principal, porém com menos saturação. Um forte cor contrastante para ser usada como cor ativa e diversos cinzas de apoio completam a plaheta.

Tipografia

Decidi por um par de tipografias mais atuais que a usada anteriormente: Montserrat para títulos e Hind para o corpo de texto.

Amostra da fonte Montserrat usada para títulos.
Amostra da fonte Montserrat usada para títulos.
Amostra da fonte Hind usada para títulos.
Amostra da fonte Hind usada para o corpo de texto.
Wireframe
Tela do Quicklessons.
Wireframe do Quicklessons
Tela do Quicklessons.
Wireframe do Quicklessons
Tela do Quicklessons.
Wireframe do Quicklessons
Tela do Quicklessons.
Wireframe do Quicklessons

Final

Uma versão de edição de cena foi lançada para público meses depois, quando foi testada e aprovada. O retorno dos clientes sobre a nova abordagem de edição de cena foi fantástica.

Video de demonstração
Mockups
Simulação do Start.
Simulação do QuickLessons em iMac.
Simulação do Start.
Simulação do QuickLessons em notebook.
Telas em desktop, tela cheia
Tela do Quicklessons.
Tela do Quicklessons
Tela do Quicklessons.
Tela do Quicklessons
Tela do Quicklessons.
Tela do Quicklessons
Tela do Quicklessons.
Tela do Quicklessons
Tela do Quicklessons.
Tela do Quicklessons