Transformando um curso de UI em uma interface funcional

Transformando um curso de UI em uma interface funcional

Criação de um aplicativo mobile para reprodução do curso uiBoost e interação entre aluno e professor, com foco em consistência visual e usabilidade.

Criação de um aplicativo mobile para reprodução do curso uiBoost e interação entre aluno e professor, com foco em consistência visual e usabilidade.

Criação de um aplicativo mobile para reprodução do curso uiBoost e interação entre aluno e professor, com foco em consistência visual e usabilidade.

Cliente
Cliente

uiBoost

uiBoost

Indústria
Indústria

Educação

Educação

Meu papel

UI Designer

Papel

UI

Ano
Ano

2024

2024

Desafio

01

  1. Adaptar a experiência do curso para o ambiente mobile


  2. Garantir navegação intuitiva mesmo com conteúdos longos


  3. Manter a identidade visual do curso de forma coesa

Abordagem

02

Análise inicial

01

Análise do briefing e fluxos no Figma.

Estudos

02

Mapeamento das principais interações e telas do app.

Benchmark

03

Estudo de padrões em apps consolidados de ensino, como Duolingo, Skillshare e YouTube, para entender boas práticas de navegação em ensino e consumo de conteúdo.

Conjunto de 25 telas do app mobile UI Boost, apresentando o fluxo completo de uso: onboarding com ilustrações e mensagens motivacionais, login por e-mail, inserção de código de acesso com feedback visual, dashboard com progresso do curso e módulos, busca de aulas com histórico e resultados, player de vídeo com descrição e comentários, além da área de perfil do aluno. A interface tem layout escuro, cores vibrantes, tipografia clara e navegação inferior fixa.

Solução

03

  1. Tela de onboarding com proposta do curso


  2. Módulos com progresso, aulas em vídeo e comentários


  3. Buscador com histórico e resultado, além de perfil do aluno com opções de personalização

Conjunto de 25 telas do app mobile UI Boost, apresentando o fluxo completo de uso: onboarding com ilustrações e mensagens motivacionais, login por e-mail, inserção de código de acesso com feedback visual, dashboard com progresso do curso e módulos, busca de aulas com histórico e resultados, player de vídeo com descrição e comentários, além da área de perfil do aluno. A interface tem layout escuro, cores vibrantes, tipografia clara e navegação inferior fixa.

Resultados

04

Protótipo

01

Protótipo funcional com mais de 15 telas interativas.

Protótipo

01

Protótipo funcional com mais de 15 telas interativas.

Destaque

02

Destaque formalizado entre a turma pela interface.

Destaque

02

Destaque formalizado entre a turma pela interface.

Ilustrações

03

Aprendizado prático na criação de ilustrações isométricas no Figma.

Ilustrações

03

Aprendizado prático na criação de ilustrações isométricas no Figma.

Aprendizados

05

Aprendi a equilibrar identidade visual e usabilidade em um produto educacional mobile. A prática me ajudou a consolidar decisões de layout, hierarquia e padrões em um universo até então pouco explorado por mim.

Aprendi a equilibrar identidade visual e usabilidade em um produto educacional mobile. A prática me ajudou a consolidar decisões de layout, hierarquia e padrões em um universo até então pouco explorado por mim.

Aprendi a equilibrar identidade visual e usabilidade em um produto educacional mobile. A prática me ajudou a consolidar decisões de layout, hierarquia e padrões em um universo até então pouco explorado por mim.