Projetos
Design System
Design System
Senac São Paulo
Senac São Paulo
Contexto
Contexto
Um Design System inicial foi criado em 2019 no Adobe XD para apoiar o lançamento do portal Senac São Paulo, contendo apenas componentes básicos.
No entanto, com a evolução do Portal e a criação de novas páginas e funcionalidades, esse sistema não acompanhou as demandas. Diante disso, tornou-se necessário desenvolver um Design System mais completo e robusto.
Um Design System inicial foi criado em 2019 no Adobe XD para apoiar o lançamento do portal Senac São Paulo, contendo apenas componentes básicos.
No entanto, com a evolução do Portal e a criação de novas páginas e funcionalidades, esse sistema não acompanhou as demandas. Diante disso, tornou-se necessário desenvolver um Design System mais completo e robusto.
Problema
Problema
Com o crescimento do portal, a equipe estava lidando com falta de padronização, retrabalho na criação de componentes e decisões de design sem estratégia e pesquisa.
Com o crescimento do portal, a equipe estava lidando com falta de padronização, retrabalho na criação de componentes e decisões de design sem estratégia e pesquisa.
Objetivos
Objetivos
✅ Assegurar uniformidade e coerência nos componentes e padrões, tanto na camada visual quanto no desenvolvimento.
✅ Agilizar os processos e direcionar as entregas do squad com foco central na experiência do usuário.
✅ Atualizar a interface do produto alinhando-a às diretrizes do novo posicionamento de marca (rebranding).
✅ Assegurar uniformidade e coerência nos componentes e padrões, tanto na camada visual quanto no desenvolvimento.
✅ Agilizar os processos e direcionar as entregas do squad com foco central na experiência do usuário.
✅ Atualizar a interface do produto alinhando-a às diretrizes do novo posicionamento de marca (rebranding).
Processo de Construção
Processo de Construção
O novo Design System foi construído utilizando os princípios do Atomic Design, que divide interfaces em componentes menores e mais simples, chamados de átomos, que são combinados para formar componentes mais complexos.
O novo Design System foi construído utilizando os princípios do Atomic Design, que divide interfaces em componentes menores e mais simples, chamados de átomos, que são combinados para formar componentes mais complexos.
Mapeamento
A primeira etapa do projeto foi uma auditoria dos componentes já existentes no portal do Senac São Paulo. Cada membro do time ficou responsável por mapear e identificar elementos redundantes.
Em seguida, nos reunimos para discutir as inconsistências encontradas e a estrutura das páginas. Nessa análise, percebemos que muitas delas apresentavam variações de layout e componentes sem registro no guia de estilo.
A primeira etapa do projeto foi uma auditoria dos componentes já existentes no portal do Senac São Paulo. Cada membro do time ficou responsável por mapear e identificar elementos redundantes.
Em seguida, nos reunimos para discutir as inconsistências encontradas e a estrutura das páginas. Nessa análise, percebemos que muitas delas apresentavam variações de layout e componentes sem registro no guia de estilo.
Definição
Definição
Após mapear as inconsistências, os times de UX/UI Design, UX Writing e Desenvolvimento se reuniram para definir como seria feita a taxonomia do que seria criado. Considerando nosso contexto e forma de trabalho, decidimos organizar tudo em três níveis: elementos, componentes e blocos.
Os elementos: são as bases, como cores, tipografia, cantos arredondados e ícones, sombras, grids, divisores, carregamento e ilustrações.
Os componentes :são partes reutilizáveis, como botões, cards, alertas e acordeões, inputs, modais, tags, tooltips.
E os blocos são estruturas maiores, formadas por componentes, como carrosséis, cabeçalhos e steppers.
Após mapear as inconsistências, os times de UX/UI Design, UX Writing e Desenvolvimento se reuniram para definir como seria feita a taxonomia do que seria criado. Considerando nosso contexto e forma de trabalho, decidimos organizar tudo em três níveis: elementos, componentes e blocos.
Os elementos: são as bases, como cores, tipografia, cantos arredondados e ícones, sombras, grids, divisores, carregamento e ilustrações.
Os componentes :são partes reutilizáveis, como botões, cards, alertas e acordeões, inputs, modais, tags, tooltips.
E os blocos são estruturas maiores, formadas por componentes, como carrosséis, cabeçalhos e steppers.
Construção
Construção
Fundação (Design Tokens): Iniciamos a criação dos componentes base do DS, ou seja, cores, tipografia, espaçamentos.
Fundação (Design Tokens): Iniciamos a criação dos componentes base do DS, ou seja, cores, tipografia, espaçamentos.
Elementos, componentes e blocos: Nessa fase, criamos os elementos, componentes e blocos baseados na modelo de Design Atômico, priorizando acessibilidade e responsividade.
Elementos, componentes e blocos: Nessa fase, criamos os elementos, componentes e blocos baseados na modelo de Design Atômico, priorizando acessibilidade e responsividade.
Documentação
Todos os elementos, componentes e blocos foram documentados, em uma parceria entre os times de design, ux writing e engenharia.
Foram definidas as regras de uso, acessibilidade e documentação na plataforma Zero Height, assim, todo o conteúdo pôde ser compartilhados com times diversos.
Colaboração Multidisciplinar
Colaboração Multidisciplinar
• UX Writing: Parceria estratégica para definir diretrizes de voz e tom diretamente nos componentes, garantindo clareza na comunicação com o usuário, aplicando regras na documentação.
• Handover e Validação: Ciclos de feedback constantes com o time de desenvolvimento para garantir a viabilidade técnica e a fidelidade da implementação.
• UX Writing: Parceria estratégica para definir diretrizes de voz e tom diretamente nos componentes, garantindo clareza na comunicação com o usuário, aplicando regras na documentação.
• Handover e Validação: Ciclos de feedback constantes com o time de desenvolvimento para garantir a viabilidade técnica e a fidelidade da implementação.
Resultados
Resultados
Otimização do trabalho de designers na construção de páginas
Padronização de estética visual e componentes do portal Senac São Paulo
Aumento da maturidade de design dos times
Alinhamento otimizado com o time de engenharia
Redução de fricções em experiências de navegação
Otimização do trabalho de designers na construção de páginas
Padronização de estética visual e componentes do portal Senac São Paulo
Aumento da maturidade de design dos times
Alinhamento otimizado com o time de engenharia
Redução de fricções em experiências de navegação
Comparação de design
Comparação de design
A seguir, dois modelos de página, um utilizando o antigo guia de estilo e outro com aplicação de elementos e componentes do novo Design System.
A seguir, dois modelos de página, um utilizando o antigo guia de estilo e outro com aplicação de elementos e componentes do novo Design System.
Contato: fabiobraga5@gmail.com
Linkedin: www.linkedin.com/in/fabiobraga5/
Contato:
fabiobraga5@gmail.com
Linkedin:
www.linkedin.com/in/fabiobraga5/