SRZN
Yotta Design System
Lead Designer
2022 - 2025
Liderei o redesign do Yotta, o Design System da empresa, transformando um UI Kit com problemas de acessibilidade e escalabilidade em um sistema adotado por designers e engenheiros em todos os squads.
Problemas
Tokens sem uma estrutura clara
Os tokens de cor não operavam como um sistema estruturado, mas como uma paleta estática. Havia apenas a definição de que os tokens “Main” deveriam ser priorizados, sem orientações sobre combinações, hierarquia ou uso das outras tonalidades.
Problemas de acessibilidade
As combinações entre cores não foram consideradas na construção da estrutura, resultando em problemas recorrentes de contraste. Isso não apenas limitava as possibilidades de uso, como também comprometia a confiabilidade do sistema, já que combinações entre cores “Main” nem sempre funcionavam.
Inconsistências visuais
Os problemas de contraste, somados a uma semântica pouco clara, resultaram em inconsistências visuais entre produtos e dentro de um mesmo produto. Em contextos semelhantes, diferentes designers acabavam escolhendo tokens distintos.
Propagação para engenharia
Em diferentes momentos, tentei viabilizar a criação das bibliotecas de código do Yotta junto à Engenharia, mas, diante de outras prioridades e da ausência de responsáveis claros, a iniciativa não avançava.
Virada de Chave
Diante de um momento de crescimento, com novos produtos e demandas crescentes de escalabilidade trazidas pela Engenharia, vi a oportunidade de retomar a discussão sobre o Design System.
Considerando as dificuldades encontradas em levar o Design System para engenharia no passado e a imprevisibilidade de que se isso seria feito ou não tive a ideia de separar esta ação em 2 frentes:
1
Reestruturar os tokens para corrigir falhas da estrutura anterior, promover melhorias visuais consistentes nos componentes e produtos e garantir uma estrutura replicável em engenharia.
2
Dar visibilidade ao Design System para as lideranças de Engenharia, Produto e Operações, viabilizando a construção e manutenção das bibliotecas de código.
Visibilidade
Em diversas reuniões com lideranças-chave, apresentei o conceito de Design System e exemplos práticos de como squads e a empresa poderiam se beneficiar. Apesar do valor reconhecido, concluiu-se que não seria possível formar um time dedicado para essa frente. Na Engenharia, a estrutura de alocação 100% por squad dificultava iniciativas com impacto transversal.
Construindo um time
Diante dessas limitações, e em conjunto com os Tech Leads, propusemos a criação de uma tribo formada por lideranças técnicas, de Design e Engenharia. Esse grupo passou a ser responsável por definir os próximos passos do Yotta, identificar oportunidades de alocação em seus squads, priorizar ações com PMs, evangelizar o Design System e, no caso da Engenharia, delegar atividades aos demais devs.
A nova estrutura
Em paralelo aos alinhamentos com as lideranças, avancei na construção da nova estrutura com a Engenharia envolvida desde o início, assegurando que a solução fosse tecnicamente viável e preparada para implementação quando necessário.
Estudo de cores
Conduzi um estudo de cores para definir tonalidades e validar combinações, criando a base da nova estrutura de cores que deu origem aos tokens primitivos. Ao trazer o time de Design de Marketing para o processo, garanti que os aprendizados impactassem não apenas os produtos, mas também a expressão visual da marca.
Reestruturação semântica
Para construir a nova estrutura, analisei outros Design Systems em busca de abordagens adequadas ao contexto da equipe. O objetivo foi definir uma semântica clara, mantendo a quantidade de tokens controlada para evitar complexidade e confusão no uso. Com isso em mente cheguei a uma estrutura composta por 4 agrupamentos de tokens.
Surface
Composto por tokens destinados aos fundos neutros da interface e capazes de estabelecer uma lógica de elevação a partir do seu uso.
Como os tokens de Surface variam de cor conforme o nível de elevação, identifiquei a necessidade de usar transparência nos estados interativos de elementos sem fundo, garantindo melhor adaptabilidade entre os diferentes níveis.
Element
São os tokens utilizados na construção de componentes e demais elementos da interface. Esse agrupamento foi pensado para equilibrar consistência e flexibilidade, permitindo a criação de diferentes tipos de componentes dentro de uma mesma lógica de construção.
Stroke
Com o mesmo objetivo e estrutura dos tokens Element, este agrupamento os complementa, mas se diferencia por ser aplicado exclusivamente às bordas.
Content
O agrupamento reúne tokens aplicados a ícones e textos, com o objetivo de reduzir decisões de design ao definir cores de conteúdo em diferentes fundos. A estrutura referência os grupos Surface e Element, orientando o uso correto das cores conforme o contexto de aplicação.
Componentes
Os componentes foram reconstruídos a partir das novas possibilidades visuais oferecidas pela nova estrutura, resultando não apenas em melhorias visuais, mas também em maior flexibilidade de aplicação.
Validação em Design
Promover a mudança dentro da área de Design foi o menor dos desafios. Com um time enxuto, conduzi encontros para que todos os designers testassem a nova estrutura de tokens, coletando feedbacks e mapeando dificuldades de uso. Esse processo garantiu que a V1 do Yotta estivesse alinhada às necessidades reais dos produtos e fosse fácil de utilizar, preparando a área desde o início para a adoção do novo sistema.
Propagação
A adoção da nova estrutura foi definida como padrão para novos produtos. Para os produtos existentes, construímos, junto aos PMs, uma estratégia de transição gradual, respeitando prioridades e estágios de cada produto, sem comprometer os roadmaps.
Resultado
O processo gerou ganhos visuais, consistência entre produtos e avanços em acessibilidade, além de aproximar Design e Engenharia e consolidar uma mentalidade de escalabilidade e eficiência nos squads.
Yotta Design System
Lead Designer
2022 - 2025
Liderei o redesign do Yotta, o Design System da empresa, transformando um UI Kit com problemas de acessibilidade e escalabilidade em um sistema adotado por designers e engenheiros em todos os squads.
Problemas
Tokens sem uma estrutura clara
Os tokens de cor não operavam como um sistema estruturado, mas como uma paleta estática. Havia apenas a definição de que os tokens “Main” deveriam ser priorizados, sem orientações sobre combinações, hierarquia ou uso das outras tonalidades.
Problemas de acessibilidade
As combinações entre cores não foram consideradas na construção da estrutura, resultando em problemas recorrentes de contraste. Isso não apenas limitava as possibilidades de uso, como também comprometia a confiabilidade do sistema, já que combinações entre cores “Main” nem sempre funcionavam.
Inconsistências visuais
Os problemas de contraste, somados a uma semântica pouco clara, resultaram em inconsistências visuais entre produtos e dentro de um mesmo produto. Em contextos semelhantes, diferentes designers acabavam escolhendo tokens distintos.
Propagação para engenharia
Em diferentes momentos, tentei viabilizar a criação das bibliotecas de código do Yotta junto à Engenharia, mas, diante de outras prioridades e da ausência de responsáveis claros, a iniciativa não avançava.
Virada de Chave
Diante de um momento de crescimento, com novos produtos e demandas crescentes de escalabilidade trazidas pela Engenharia, vi a oportunidade de retomar a discussão sobre o Design System.
Considerando as dificuldades encontradas em levar o Design System para engenharia no passado e a imprevisibilidade de que se isso seria feito ou não tive a ideia de separar esta ação em 2 frentes:
1
Reestruturar os tokens para corrigir falhas da estrutura anterior, promover melhorias visuais consistentes nos componentes e produtos e garantir uma estrutura replicável em engenharia.
2
Dar visibilidade ao Design System para as lideranças de Engenharia, Produto e Operações, viabilizando a construção e manutenção das bibliotecas de código.
Visibilidade
Em diversas reuniões com lideranças-chave, apresentei o conceito de Design System e exemplos práticos de como squads e a empresa poderiam se beneficiar. Apesar do valor reconhecido, concluiu-se que não seria possível formar um time dedicado para essa frente. Na Engenharia, a estrutura de alocação 100% por squad dificultava iniciativas com impacto transversal.
Construindo um time
Diante dessas limitações, e em conjunto com os Tech Leads, propusemos a criação de uma tribo formada por lideranças técnicas, de Design e Engenharia. Esse grupo passou a ser responsável por definir os próximos passos do Yotta, identificar oportunidades de alocação em seus squads, priorizar ações com PMs, evangelizar o Design System e, no caso da Engenharia, delegar atividades aos demais devs.
A nova estrutura
Em paralelo aos alinhamentos com as lideranças, avancei na construção da nova estrutura com a Engenharia envolvida desde o início, assegurando que a solução fosse tecnicamente viável e preparada para implementação quando necessário.
Estudo de cores
Conduzi um estudo de cores para definir tonalidades e validar combinações, criando a base da nova estrutura de cores que deu origem aos tokens primitivos. Ao trazer o time de Design de Marketing para o processo, garanti que os aprendizados impactassem não apenas os produtos, mas também a expressão visual da marca.
Reestruturação semântica
Para construir a nova estrutura, analisei outros Design Systems em busca de abordagens adequadas ao contexto da equipe. O objetivo foi definir uma semântica clara, mantendo a quantidade de tokens controlada para evitar complexidade e confusão no uso. Com isso em mente cheguei a uma estrutura composta por 4 agrupamentos de tokens.
Surface
Composto por tokens destinados aos fundos neutros da interface e capazes de estabelecer uma lógica de elevação a partir do seu uso.
Como os tokens de Surface variam de cor conforme o nível de elevação, identifiquei a necessidade de usar transparência nos estados interativos de elementos sem fundo, garantindo melhor adaptabilidade entre os diferentes níveis.
Element
São os tokens utilizados na construção de componentes e demais elementos da interface. Esse agrupamento foi pensado para equilibrar consistência e flexibilidade, permitindo a criação de diferentes tipos de componentes dentro de uma mesma lógica de construção.
Stroke
Com o mesmo objetivo e estrutura dos tokens Element, este agrupamento os complementa, mas se diferencia por ser aplicado exclusivamente às bordas.
Content
O agrupamento reúne tokens aplicados a ícones e textos, com o objetivo de reduzir decisões de design ao definir cores de conteúdo em diferentes fundos. A estrutura referência os grupos Surface e Element, orientando o uso correto das cores conforme o contexto de aplicação.
Componentes
Os componentes foram reconstruídos a partir das novas possibilidades visuais oferecidas pela nova estrutura, resultando não apenas em melhorias visuais, mas também em maior flexibilidade de aplicação.
Validação em Design
Promover a mudança dentro da área de Design foi o menor dos desafios. Com um time enxuto, conduzi encontros para que todos os designers testassem a nova estrutura de tokens, coletando feedbacks e mapeando dificuldades de uso. Esse processo garantiu que a V1 do Yotta estivesse alinhada às necessidades reais dos produtos e fosse fácil de utilizar, preparando a área desde o início para a adoção do novo sistema.
Propagação
A adoção da nova estrutura foi definida como padrão para novos produtos. Para os produtos existentes, construímos, junto aos PMs, uma estratégia de transição gradual, respeitando prioridades e estágios de cada produto, sem comprometer os roadmaps.
Resultado
O processo gerou ganhos visuais, consistência entre produtos e avanços em acessibilidade, além de aproximar Design e Engenharia e consolidar uma mentalidade de escalabilidade e eficiência nos squads.
SRZN
SRZN
Yotta Design System
Lead Designer
2022 - 2025
Liderei o redesign do Yotta, o Design System da empresa, transformando um UI Kit com problemas de acessibilidade e escalabilidade em um sistema adotado por designers e engenheiros em todos os squads.
Problemas
Tokens sem uma estrutura clara
Os tokens de cor não operavam como um sistema estruturado, mas como uma paleta estática. Havia apenas a definição de que os tokens “Main” deveriam ser priorizados, sem orientações sobre combinações, hierarquia ou uso das outras tonalidades.
Problemas de acessibilidade
As combinações entre cores não foram consideradas na construção da estrutura, resultando em problemas recorrentes de contraste. Isso não apenas limitava as possibilidades de uso, como também comprometia a confiabilidade do sistema, já que combinações entre cores “Main” nem sempre funcionavam.
Inconsistências visuais
Os problemas de contraste, somados a uma semântica pouco clara, resultaram em inconsistências visuais entre produtos e dentro de um mesmo produto. Em contextos semelhantes, diferentes designers acabavam escolhendo tokens distintos.
Propagação para engenharia
Em diferentes momentos, tentei viabilizar a criação das bibliotecas de código do Yotta junto à Engenharia, mas, diante de outras prioridades e da ausência de responsáveis claros, a iniciativa não avançava.
Virada de Chave
Diante de um momento de crescimento, com novos produtos e demandas crescentes de escalabilidade trazidas pela Engenharia, vi a oportunidade de retomar a discussão sobre o Design System.
Considerando as dificuldades encontradas em levar o Design System para engenharia no passado e a imprevisibilidade de que se isso seria feito ou não tive a ideia de separar esta ação em 2 frentes:
1
Reestruturar os tokens para corrigir falhas da estrutura anterior, promover melhorias visuais consistentes nos componentes e produtos e garantir uma estrutura replicável em engenharia.
2
Dar visibilidade ao Design System para as lideranças de Engenharia, Produto e Operações, viabilizando a construção e manutenção das bibliotecas de código.
Visibilidade
Em diversas reuniões com lideranças-chave, apresentei o conceito de Design System e exemplos práticos de como squads e a empresa poderiam se beneficiar. Apesar do valor reconhecido, concluiu-se que não seria possível formar um time dedicado para essa frente. Na Engenharia, a estrutura de alocação 100% por squad dificultava iniciativas com impacto transversal.
Construindo um time
Diante dessas limitações, e em conjunto com os Tech Leads, propusemos a criação de uma tribo formada por lideranças técnicas, de Design e Engenharia. Esse grupo passou a ser responsável por definir os próximos passos do Yotta, identificar oportunidades de alocação em seus squads, priorizar ações com PMs, evangelizar o Design System e, no caso da Engenharia, delegar atividades aos demais devs.
A nova estrutura
Em paralelo aos alinhamentos com as lideranças, avancei na construção da nova estrutura com a Engenharia envolvida desde o início, assegurando que a solução fosse tecnicamente viável e preparada para implementação quando necessário.
Estudo de cores
Conduzi um estudo de cores para definir tonalidades e validar combinações, criando a base da nova estrutura de cores que deu origem aos tokens primitivos. Ao trazer o time de Design de Marketing para o processo, garanti que os aprendizados impactassem não apenas os produtos, mas também a expressão visual da marca.
Reestruturação semântica
Para construir a nova estrutura, analisei outros Design Systems em busca de abordagens adequadas ao contexto da equipe. O objetivo foi definir uma semântica clara, mantendo a quantidade de tokens controlada para evitar complexidade e confusão no uso. Com isso em mente cheguei a uma estrutura composta por 4 agrupamentos de tokens.
Surface
Composto por tokens destinados aos fundos neutros da interface e capazes de estabelecer uma lógica de elevação a partir do seu uso.
Como os tokens de Surface variam de cor conforme o nível de elevação, identifiquei a necessidade de usar transparência nos estados interativos de elementos sem fundo, garantindo melhor adaptabilidade entre os diferentes níveis.
Element
São os tokens utilizados na construção de componentes e demais elementos da interface. Esse agrupamento foi pensado para equilibrar consistência e flexibilidade, permitindo a criação de diferentes tipos de componentes dentro de uma mesma lógica de construção.
Stroke
Com o mesmo objetivo e estrutura dos tokens Element, este agrupamento os complementa, mas se diferencia por ser aplicado exclusivamente às bordas.
Content
O agrupamento reúne tokens aplicados a ícones e textos, com o objetivo de reduzir decisões de design ao definir cores de conteúdo em diferentes fundos. A estrutura referência os grupos Surface e Element, orientando o uso correto das cores conforme o contexto de aplicação.
Componentes
Os componentes foram reconstruídos a partir das novas possibilidades visuais oferecidas pela nova estrutura, resultando não apenas em melhorias visuais, mas também em maior flexibilidade de aplicação.
Validação em Design
Promover a mudança dentro da área de Design foi o menor dos desafios. Com um time enxuto, conduzi encontros para que todos os designers testassem a nova estrutura de tokens, coletando feedbacks e mapeando dificuldades de uso. Esse processo garantiu que a V1 do Yotta estivesse alinhada às necessidades reais dos produtos e fosse fácil de utilizar, preparando a área desde o início para a adoção do novo sistema.
Propagação
A adoção da nova estrutura foi definida como padrão para novos produtos. Para os produtos existentes, construímos, junto aos PMs, uma estratégia de transição gradual, respeitando prioridades e estágios de cada produto, sem comprometer os roadmaps.
Resultado
O processo gerou ganhos visuais, consistência entre produtos e avanços em acessibilidade, além de aproximar Design e Engenharia e consolidar uma mentalidade de escalabilidade e eficiência nos squads.