Nenhuma referência única
Componentes, ícones e bibliotecas de front-end estavam espalhados pelos projetos, sem um lugar para ver o que já existia.
Design System OIKOS
O design system por trás dos projetos ServiceNow da EDX, com bibliotecas compartilhadas, ícones, componentes e tutoriais, além de uma ferramenta que gera as histórias de usuário que os times usam no desenvolvimento.
O desafio
Cada projeto refazia o básico.
A EDX entrega muitos portais ServiceNow. Sem uma fonte única, os times refaziam botões, campos e alertas, e escreviam do zero as especificações dos componentes toda vez.
Design e código separados
Os desenvolvedores precisavam do código de cada componente, não só de uma imagem dele no Figma.
Histórias tomavam tempo
Cada componente precisava de uma história de usuário antes do desenvolvimento, e escrever à mão atrasava os times.
O processo
Reunir, documentar, depois automatizar.
Reunir as peças
Listei os componentes principais que os times usam, de alertas e accordions a abas, toggles e áreas de texto.
Documentar cada um
Cada componente ganhou uma página com prévia ao vivo, atributos editáveis e as ações View Code e Copy Code.
Incluir ícones e bibliotecas
Um buscador de ícones com filtros, além de páginas para Bootstrap, Angular UI Bootstrap, Select2 e iMask.
Desenhar a ferramenta de histórias
Um formulário Generate Story em que o time informa nome, tag e atributos do componente para criar a história de usuário.
A solução
Um só lugar para o jeito EDX de construir.
O Oikos é um portal com menu lateral fixo: sobre, bibliotecas, ícones e componentes, e um botão Generate Story sempre à mão.
01 / 05UI final — home do Oikos
O resultado
Peças compartilhadas, handoff mais rápido.
Código ao lado do design
Cada página de componente mostra uma prévia funcionando, com atributos para alterar e o código pronto para copiar.
Histórias a partir de um formulário
O Generate Story transforma nome, tag e atributos de um componente na história de usuário usada no desenvolvimento.
Documentação da stack
As páginas de bibliotecas explicam contexto, funcionamento, recursos, integrações e limites de cada ferramenta de front-end.