Contexto
O Skillpilot é um LMS francês por competências, usado por organismos de formação para gerir formações, sessões, aprendizes e presença. Cada cliente aplica a própria marca.
Em 2024 fiz o Style Guide, os componentes e o redesenho do espaço de administração, a partir de um PowerPoint com pedidos de evolução. Entreguei tudo em Figma, com protótipo.
Problema
Para quem administra
- Menu com tudo no mesmo nível.
- Convocação configurada de novo em cada sessão.
- Conteúdo repetido e campos que ninguém usava.
- Situação do aluno espalhada em várias telas.
Para o negócio
- Pedidos de evolução num PowerPoint pouco claro para os devs.
- Nenhum sistema visual, então cada tela começava do zero.
- Implementação em Angular, com a biblioteca Nebular.
- A marca do Skillpilot sem tirar a personalização de cada cliente.
Como deixar o LMS consistente e mais leve para quem gere formações, sem perder a marca de cada cliente?
Como estava
- Mais de 15 itens no menu, com “Templates” duas vezes.
- Inglês e francês na mesma tela, e chaves de tradução no lugar de rótulos (“ADD_FRAMEWORK_FROM_XLS”).
- Lista vazia só com “No Rows To Show”.
Solução
Style Guide com tokens
Cores, tipografia e ícones em variáveis do Figma.
Componentes da Nebular
A mesma biblioteca que o time já usava no código.
Marca do cliente
Um color picker troca só a cor principal.
Sessão por status
Rascunho, ativa e encerrada, cada uma com as próprias ações.
Formulários em 3 etapas
Criar formação e sessão em passos curtos.
Visão do aluno
Perfil completo e status visível no avatar.
O Design System
Paleta gerada a partir da marca do Skillpilot e tokens em variáveis do Figma. Na troca de cliente, só a cor principal muda.
Cores
Marca
Estados
Neutros
Tipografia e ícones
Sofia Sans em 3 pesos e Bootstrap Icons, a mesma família que o código já usava.
Componentes
Desenhados sobre a Nebular, com os nomes do código.
Processo
1. O produto pelos três lados
Criei contas de aluno e professor na demo para ver onde aparece o que o admin configura. Por isso comecei pelo Style Guide e pelos componentes, que servem às três áreas.
2. Referências
Sem acesso ao admin de outros LMS, olhei Moodle, Descomplica, EBAC e Alura pelo lado do aluno. O fluxo do admin saiu do próprio produto, validado com o cliente.
3. Mapa de navegação
Antes das telas, montei no FigJam o mapa do admin. Foi nele que o problema de hierarquia apareceu, e reorganizamos as páginas.
4. 15 perguntas para o cliente
Com as telas prontas, fechei as regras de negócio numa rodada de 15 perguntas. Algumas decisões:
| Pergunta | Decisão |
|---|---|
| A convocação vai para o template? | Sim, configurada uma vez para todas as sessões. |
| O “método de validação de competências” é usado? | Não, e o campo saiu. |
| “Conteúdo da sessão” fica em Informações gerais? | Não, a arquitetura do programa já mostra isso. |
| Onde fica o planejamento? | Dentro da sessão, ao lado da árvore do programa. |
| Sessão encerrada pode ser editada? | Não, é só leitura. |
5. Handoff
Sem contato com os devs, cada tela levou a etiqueta do slide do PowerPoint que atende, e o fluxo principal ganhou protótipo. Não houve teste com usuários finais: a validação foi com o fundador e o COO.
UI final
A mesma sessão em três estados
Antes e depois da tela inicial
Criar uma formação em 3 etapas
Resultado: menos carga cognitiva
Sem métricas pós-entrega, o ganho está nas decisões:
| Antes | Depois |
|---|---|
| Convocação em cada sessão | Uma vez, no template |
| Campos sem uso e conteúdo repetido | Removidos |
| Menu com tudo no mesmo nível | Itens agrupados por tema |
| Formulário longo numa página | 3 etapas curtas |
| Situação do aluno em várias telas | Status no avatar |
| Cada tela com um visual | Componentes e tokens compartilhados |
Sinais do cliente
- Aprovou a proposta visual e pediu o redesenho das telas.
- As 15 perguntas viraram decisões documentadas.
Aprendizados
- Validar o mapa antes das telas evitou retrabalho.
- Da próxima vez, falaria com alguns admins e com um dev antes de fechar as decisões.
Meu papel
Único designer do projeto: análise, mapa de navegação, Style Guide, componentes, 18 telas e 9 modais, protótipo e handoff. Trabalhei com o fundador e o COO, que traziam as regras de negócio e aprovavam as entregas.