ALFABETO, DESIGN SYSTEM DE APP
UM DESIGN SYSTEM QUE SÓ EXISTIA PARA WEB
O Alfabeto é o design system do SAS Plataforma de Educação. Ele já existia, mas tinha sido pensado exclusivamente para web.
Os aplicativos da plataforma não tinham uma versão própria do design system, e eu fui a designer responsável por construir isso.
SEM VERTENTE MOBILE, CADA SQUAD RESOLVIA DO SEU JEITO
Os componentes web eram adaptados na mão, o que gerava soluções diferentes para os mesmos problemas e comportamentos que não faziam sentido em uma tela de celular.
Soluções divergentes
Squads diferentes resolviam o mesmo problema de formas diferentes.
Adaptação manual
Cada componente web era traduzido na mão, sem referência comum.
Comportamento fora de contexto
Padrões pensados para web não faziam sentido em uma tela de celular.
CRIEI A VERSÃO MOBILE DO ALFABETO DO ZERO
Construí a vertente mobile dando suporte às squads que desenvolviam os aplicativos da plataforma.
Comecei pelas necessidades das squads
Mapeei o que as squads precisavam para entender quais componentes eram realmente prioritários. Não fazia sentido tentar traduzir o design system web inteiro de uma vez, então eu parti do que já estava sendo usado e do que estava gerando retrabalho.
Estruturei o processo de documentação a dois
Junto a outro designer, focado em web, começamos a estruturar o novo processo de documentação.
Levei para o time antes de construir
Mostramos a proposta ao time, mapeando as necessidades e as maiores dúvidas de uso, e voltamos para colocar a mão na massa no próprio Figma.
Formalizei a documentação no Zeroheight
Depois da construção no Figma, formalizamos a documentação no Zeroheight, com o de-para entre web e mobile.
A VERSÃO MOBILE PASSOU A ATENDER TRÊS SQUADS
Como um design system está sempre em evolução e o time era muito rotativo, segui dando apoio nos componentes do app, fazendo o de-para e organizando a documentação no Zeroheight.
Três squads atendidas
A vertente mobile virou referência para as squads que desenvolviam os apps.
Apoio contínuo
Segui dando suporte nos componentes e no de-para, em um time bastante rotativo.
Continuidade garantida
Quando fui para o time de Onboarding e a área se reestruturou, deixei tudo documentado para quem seguiu.
O componente de filtro, com a parte externa e a interna separadas e a referência de aplicação ao lado.
As variações de header do aplicativo, do estado expandido ao reduzido, com e sem ações.
APRENDIZADOS
Um design system é um serviço interno
As squads são as usuárias, e o trabalho só funciona se você entende a rotina delas antes de propor o componente.