Design System - SENAI
O SENAI, uma das maiores instituições de ensino técnico do Brasil, enfrentava um problema de desalinhamento entre sua relevância acadêmica e sua experiência digital. Seus sites e plataformas apresentavam identidade visual inconsistente, navegação confusa e jornadas fragmentadas para os usuários.
A instituição precisava urgentemente modernizar sua marca digital e criar uma experiência mais simples, acessível e coerente em todas as suas plataformas, independentemente do tipo de usuário ou dispositivo utilizado.
Cliente
Cliente
SENAI
Time
Time
3 Product Designers
1 Product Manager
Indústria
Indústria
Educação
Duração
Duração
6 meses
Desafio
Como trazer unidade a um sistema que foi construído em silos?
Como criar algo inovador sem comprometer a clareza ou a acessibilidade?
Nossa missão era clara:
Como trazer unidade a um sistema que foi construído em silos?
Como criar algo inovador sem comprometer a clareza ou a acessibilidade?
Nossa missão era clara:
Construir um sistema de design capaz de conectar múltiplas plataformas sob uma identidade coesa;
Construir um sistema de design capaz de conectar múltiplas plataformas sob uma identidade coesa;
Simplificar a navegação e a interação, especialmente para usuários com conhecimento técnico limitado;
Simplificar a navegação e a interação, especialmente para usuários com conhecimento técnico limitado;
Garantir acessibilidade em diferentes dispositivos e contextos de usuário.
Garantir acessibilidade em diferentes dispositivos e contextos de usuário.
Ponto de partida
Começamos com uma ideia ambiciosa: um estilo visual ousado e moderno, inspirada no glassmorfismo. Ele combinava com a visão inovadora do SENAI e dava ao sistema um toque futurista.
Começamos a construir a biblioteca de componentes e o estilo antes mesmo de falar com os usuários (uma decisão que logo nos desafiaria).
Começamos com uma ideia ambiciosa: um estilo visual ousado e moderno, inspirada no glassmorfismo. Ele combinava com a visão inovadora do SENAI e dava ao sistema um toque futurista.
Começamos a construir a biblioteca de componentes e o estilo antes mesmo de falar com os usuários (uma decisão que logo nos desafiaria).
Conceito inicial da Tela Inicial, inspirado no Glassmorfismo.
Conceito inicial da Tela Inicial, inspirado no Glassmorfismo.
Fundação do Design System
Para garantir a consistência em todos os produtos digitais, traduzimos nossos princípios de design em um sistema de design robusto que equilibrava inovação com usabilidade.
As bases que estabelecemos incluíam: sistema de cores, tipografia, grades, espaçamento, elevação, elementos holográficos e de glassmorfismo.
Embora as imagens abaixo destaquem apenas cores, tipografia e espaçamento, o sistema também integra esses outros elementos perfeitamente para criar uma experiência digital coesa, moderna e intuitiva.
Para garantir a consistência em todos os produtos digitais, traduzimos nossos princípios de design em um sistema de design robusto que equilibrava inovação com usabilidade.
As bases que estabelecemos incluíam: sistema de cores, tipografia, grades, espaçamento, elevação, elementos holográficos e de glassmorfismo.
Embora as imagens abaixo destaquem apenas cores, tipografia e espaçamento, o sistema também integra esses outros elementos perfeitamente para criar uma experiência digital coesa, moderna e intuitiva.
Design Tokens
Aqui, você pode ver exemplos de alguns dos componentes que eu fui responsável por projetar e documentar para garantir consistência entre os produtos e dar suporte a uma ampla gama de interações do usuário.
Aqui, você pode ver exemplos de alguns dos componentes que eu fui responsável por projetar e documentar para garantir consistência entre os produtos e dar suporte a uma ampla gama de interações do usuário.
Tooltips e Toggle Buttons (light e dark mode)
Tooltips e Toggle Buttons (light e dark mode)
List Section Items and Select (light mode)
List Section Items e Select (light mode)
List Section Items e Select (light mode)
Ouvindo os verdadeiros especialistas: os usuários
Liderei o processo de pesquisa utilizando um questionário personalizado, criado para descobrir como os alunos interagem com as plataformas digitais do SENAI.
Conversei com alunos de diferentes regiões, faixas etárias e níveis de alfabetização digital. Seus comentários foram claros:
A experiência era visualmente inconsistente e difícil de navegar;
A maioria acessava o conteúdo via celular, muitas vezes com acesso limitado à internet;
O impacto visual foi apreciado, mas a clareza, a velocidade e a legibilidade vieram em primeiro lugar.
Com essas informações, mapeamos as dores reais dos usuários, criamos personas representativas e, finalmente, encontramos um norte para orientar nossas decisões de design.
Liderei o processo de pesquisa utilizando um questionário personalizado, criado para descobrir como os alunos interagem com as plataformas digitais do SENAI.
Conversei com alunos de diferentes regiões, faixas etárias e níveis de alfabetização digital. Seus comentários foram claros:
A experiência era visualmente inconsistente e difícil de navegar;
A maioria acessava o conteúdo via celular, muitas vezes com acesso limitado à internet;
O impacto visual foi apreciado, mas a clareza, a velocidade e a legibilidade vieram em primeiro lugar.
Com essas informações, mapeamos as dores reais dos usuários, criamos personas representativas e, finalmente, encontramos um norte para orientar nossas decisões de design.
Nome: Sofia Martins
Idade: 19
Localização: Pequena cidade rural no interior do Brasil.
Histórico:
Sofia é uma jovem determinada que busca o ensino superior enquanto enfrenta desafios tecnológicos e geográficos significativos. Morando em uma cidade pequena com infraestrutura de internet limitada, ela desenvolveu notável resiliência e adaptabilidade em sua jornada acadêmica.
Desafios Digitais e Educacionais:
Conexão de internet intermitente e lenta.
Precisa percorrer distâncias consideráveis para assistir às aulas presenciais.
Experimenta estresse significativo ao navegar em múltiplas plataformas de aprendizagem online inconsistentes.
Testemunha seus colegas enfrentando barreiras tecnológicas semelhantes.
Características Pessoais:
Altamente motivada para concluir seus estudos
Introvertida, mas profundamente empática com as dificuldades dos colegas.
Hesita em pedir suporte técnico, mas rápida em ajudar os outros.
Aspirações:
Concluir sua graduação.
Usar sua educação como um caminho para melhores oportunidades em sua região.
Pontos problemáticos:
Designs de plataforma inconsistentes geram sobrecarga cognitiva.
Medo de perder informações importantes devido a barreiras técnicas.
Suporte institucional limitado para alunos com problemas de conectividade.
Nome: Sofia Martins
Idade: 19
Localização: Pequena cidade rural no interior do Brasil.
Histórico:
Sofia é uma jovem determinada que busca o ensino superior enquanto enfrenta desafios tecnológicos e geográficos significativos. Morando em uma cidade pequena com infraestrutura de internet limitada, ela desenvolveu notável resiliência e adaptabilidade em sua jornada acadêmica.
Desafios Digitais e Educacionais:
Conexão de internet intermitente e lenta.
Precisa percorrer distâncias consideráveis para assistir às aulas presenciais.
Experimenta estresse significativo ao navegar em múltiplas plataformas de aprendizagem online inconsistentes.
Testemunha seus colegas enfrentando barreiras tecnológicas semelhantes.
Características Pessoais:
Altamente motivada para concluir seus estudos
Introvertida, mas profundamente empática com as dificuldades dos colegas.
Hesita em pedir suporte técnico, mas rápida em ajudar os outros.
Aspirações:
Concluir sua graduação.
Usar sua educação como um caminho para melhores oportunidades em sua região.
Pontos problemáticos:
Designs de plataforma inconsistentes geram sobrecarga cognitiva.
Medo de perder informações importantes devido a barreiras técnicas.
Suporte institucional limitado para alunos com problemas de conectividade.
Persona criada a partir de insights obtidos em entrevistas.
Persona criada a partir de insights obtidos em entrevistas.
Pivotando com Propósito
O feedback foi claro: apesar do apelo visual, nosso conceito inicial de glassmorfismo não escalava bem e não atendia às reais necessidades dos usuários.
Decidimos pausar, reavaliar e mudar o foco (saindo da "decoração" e indo em direção à funcionalidade). Isso deu início a um processo intenso de iteração e comunicação entre as equipes.
Simplificamos os componentes, aprimoramos o contraste e o espaçamento, e unificamos tudo em torno de um princípio central: o design deve servir ao usuário, nunca o contrário.
O feedback foi claro: apesar do apelo visual, nosso conceito inicial de glassmorfismo não escalava bem e não atendia às reais necessidades dos usuários.
Decidimos pausar, reavaliar e mudar o foco (saindo da "decoração" e indo em direção à funcionalidade). Isso deu início a um processo intenso de iteração e comunicação entre as equipes.
Simplificamos os componentes, aprimoramos o contraste e o espaçamento, e unificamos tudo em torno de um princípio central: o design deve servir ao usuário, nunca o contrário.
O que eu aprendi?
Mais do que uma biblioteca de UI refinada, este projeto foi uma lição de humildade, comunicação e iteração. Ele me lembrou que:
O alinhamento antecipado com as partes interessadas evita mudanças dispendiosas;
As decisões de design devem ser baseadas em dados do usuário, não em suposições;
A comunicação consistente é fundamental para transformar complexidade em clareza.
Embora o projeto não estivesse totalmente implementado quando saí, ele deixou uma base sólida e um processo mais inteligente e centrado no ser humano para as equipes futuras desenvolverem.
Mais do que uma biblioteca de UI refinada, este projeto foi uma lição de humildade, comunicação e iteração. Ele me lembrou que:
O alinhamento antecipado com as partes interessadas evita mudanças dispendiosas;
As decisões de design devem ser baseadas em dados do usuário, não em suposições;
A comunicação consistente é fundamental para transformar complexidade em clareza.
Embora o projeto não estivesse totalmente implementado quando saí, ele deixou uma base sólida e um processo mais inteligente e centrado no ser humano para as equipes futuras desenvolverem.