Case — Sebrae Play | Janaina Marangon

Case 01 · Plataforma · Desktop

Sebrae Play

Sou responsável pelo design da plataforma Sebrae Play. O trabalho acontece em entregas independentes, cada uma com seu próprio problema, fluxo e validação. Escolha uma entrega para ver o processo.

Meu papel

Product Designer responsável pela plataforma

Plataforma

Web desktop

Entregas

3 publicadas aqui

Entregas

Sebrae Play · Entrega 01

Página de coleções

Contexto

Qual era o problema e por que essa entrega foi priorizada.

O que eu fiz

Pesquisa, fluxo, decisões de interface e validação.

Resultado

O que mudou para o usuário e para o negócio.

Próxima entrega: Menu →

Sebrae Play · Entrega 02

Reestruturação do menu desktop

Um menu mais enxuto, com hierarquia clara e espaço para crescer, para que o usuário encontre o que precisa sem se perder entre opções.

Ano 2025

Design Janaína Marangon e Thaís Guimarães

Apresentação completa (PDF) ↗

01 · Problema

Um menu poluído e sem espaço para crescer

Partimos de cliques e mapas de calor do Crazy Egg e de pesquisas anteriores, que já apontavam atritos na navegação.

Excesso de opções

Experiência poluída e cansativa.

Hierarquia confusa

Difícil localizar conteúdos rapidamente.

Pouca escalabilidade

Sem estrutura para novos conteúdos e categorias.

Header ocupando 1/3 da tela

Em 1280px, dificultava ver o resto da página.

02 · Objetivos

O que o novo menu precisava resolver

Reduzir a carga cognitiva

Consolidar opções para o usuário achar o que precisa mais rápido.

Hierarquia clara

Destacar seções principais, como Cursos, e agrupar o secundário em mega menus.

Acessibilidade e legibilidade

Mais contraste, fontes e ícones maiores, áreas de clique adequadas.

Navegação persistente

Header fixo ou dinâmico, com as ações principais sempre à mão.

Busca e descoberta

Busca em destaque, com sugestões e filtros rápidos.

03 · Pesquisa e diagnóstico

Heurística, dados e benchmarking

→Análise heurística do menu atual: excesso de cliques, nomes pouco claros e baixa organização visual.

→Dados quantitativos do Crazy Egg: cliques, áreas de calor e caminhos de navegação.

→Benchmarking de menus em plataformas de conteúdo e streaming.

Mapas de calor

Pesquisa DOT

Pontos de melhoria

Excesso de itens · menu sobrecarregado

Hierarquia confusa · sem prioridade entre opções

Acessibilidade visual · ícones e textos pequenos, pouco contraste

Rótulos genéricos · nomes pouco intuitivos, como “Momentos” e “Habilidades”

Menu não persistente · some no scroll

Acesso rápido limitado · busca e atalhos pouco evidentes

Sugestões

Enxugar · agrupar menus semelhantes

Mega menu · subcategorias organizadas

Busca destacada · campo visível no header

Hierarquia visual · mais peso aos itens principais

Ícone + texto · reconhecimento mais rápido

Estados de login · logado e deslogado bem distintos

04 · Protótipo

Quatro entradas no lugar de dezenas

O menu principal ficou com Cursos, Ao vivo, Explorar e Qual o seu desafio?, e o restante foi agrupado em mega menus: cursos por tema, habilidades, séries, coleções, tipos de conteúdo, momentos do empreendedor e setores.

Deslogado

Logado

05 · Próximas etapas

Isso não é um ponto final

Design é um processo iterativo. Seguimos validando hipóteses com os usuários e monitorando cliques e mapas de calor no Crazy Egg, e cada ciclo gera novos insights para a evolução do Sebrae Play.

← Página de coleções Próxima entrega: Meu aprendizado →

Sebrae Play · Entrega 03

Refatoração do Meu aprendizado

Decisões de UX/UI para padronização, responsividade e uma experiência melhor na área onde o usuário acompanha seus cursos, eventos e certificados.

Ano 2025

Design Janaína Marangon e Thaís Guimarães

Apresentação completa (PDF) ↗

01 · Problema

O que não funcionava na página atual

Partimos de pesquisas já realizadas e de análise com IA para entender os desafios do Meu aprendizado.

Baixa hierarquia

Sem barra gráfica de progresso em destaque.

Filtros e busca

Dificuldade para encontrar conteúdos.

Pouca clareza

Não mostrava quantos cursos estavam inscritos, em andamento e concluídos.

Eventos e palestras

Sem espaço para essas informações.

02 · Objetivos

O que a refatoração precisava entregar

→Mais informação para o usuário.

→Busca e filtragem mais fáceis.

→Barra de progresso com cores que indiquem o andamento (25%, 50%, 100%).

→Seções separadas para eventos, palestras e conteúdos.

03 · Análises

Pesquisa, benchmarking e referências

Pesquisa interna

Benchmarking

Moodboard

Análise com IA

Pedimos ao ChatGPT pontos positivos, negativos e sugestões para a página. Os achados confirmaram a pesquisa:

Positivos

Layout simples com cards organizados, informação essencial visível e consistência com a identidade Sebrae.

Negativos

Progresso pouco destacado, cursos listados sem separação por status, filtros pouco explorados e CTA pouco convidativo.

Sugestões

Dashboard visual de progresso, organização por status, filtros por duração, status e tema, e cores por estado do curso.

04 · OKRs

Cada melhoria ligada a um objetivo da plataforma

Usamos os OKRs como base para garantir que cada proposta estivesse conectada aos objetivos maiores do Sebrae Play.

05 · Novo design

Big Numbers

Reformulamos a área com ênfase nos eventos ao vivo. O usuário ganha uma biblioteca personalizada, organizada em um dashboard que mostra:

→Conteúdos inscritos

→Em andamento

→Concluídos

→Favoritos

Minha biblioteca

→Sistema de filtros visível e acessível.

→Cards interativos com o progresso do usuário.

→Acesso direto ao conteúdo desejado.

Eventos

Em Meus eventos, criamos um calendário interativo com eventos inscritos, eventos abertos para inscrição e agenda mensal com navegação entre meses.

Regras do calendário

→Os eventos do mês aparecem em rosa, inscritos ou não.

→Ao clicar em “Programação”, um skeleton carrega enquanto o sistema verifica a inscrição.

→Inscrito: aparecem as palestras, com o botão Entrar ativo ou não.

→Não inscrito: aparece um convite para clicar em Saiba mais.

→Ao clicar em uma data, aparecem apenas os eventos daquele dia; mais de um evento navega pelas setas.

Certificados

A nova seção reúne todos os certificados conquistados, com filtro por Ao vivo, Gravado e Séries, e permite baixar ou compartilhar nas redes.

Versão mobile

A mesma estrutura adaptada para o celular, mantendo progresso, filtros e eventos acessíveis.

06 · Conclusão

Mais autonomia, clareza e engajamento

Organizar o conteúdo em seções e dashboard facilita a navegação, reduz o tempo de busca e estimula a continuidade do aprendizado.

O calendário interativo fortalece o engajamento com eventos ao vivo, e centralizar os certificados valoriza as conquistas do usuário e incentiva a divulgação nas redes profissionais.

← Menu