Projeto
Design System Whitelabel
Data
Nov 2023 • Presente
White label para BaaS
totalmente escalável
Equipe
UX/UI Designers
O projeto
Tratou-se da criação completa de um Design System White Label voltado para Bancos Digitais. Sua estrutura contempla interfaces Mobile e Web, no qual fui responsável pelo Internet Banking e BackOffice do White Label.
Objetivos
Estruturar um Design System tanto a nível de Design quanto de desenvolvimento no qual possa ser facilmente replicado e customizado, afim de atender os clientes do Baasic.
Sobre o Baasic
É um sistema de Bank as a Service (BaaS) que permite que empresas criem suas próprias operações financeiras com facilidade, agilidade e segurança.
Uma solução completa
para Bancos Digitais
Aplicativo
Internet Banking
BackOffice
Estrutura do projeto
Considerando o propósito do produto e sua complexidade, a estrutura do projeto deveria seguir as seguintes premissas:
• Whitelabel
• Reaproveitar arquivo Figma
• Totalmente modular e escalável
• Capacidade de comportar temas
Whitelabel
Reaproveitar arquivo Figma
Totalmente modular e escalável
Capacidade de comportar temas
Tudo é componente
Como os fluxos do App, Internet Banking e BackOffice deveriam vir prontos para a customização do cliente, deveríamos reduzir o máximo possível de revisões nas telas dos fluxos após a realização de mudanças em cores, fontes, e etc.
Frame
A Solução
Procuramos componentizar não só os elementos básicos de uma interface, mas também as próprias telas, considerando todos os cenários que possam existir em uma determinada tela, na qual podem ser acionadas ou ocultadas por meio de Regras Booleanas.
Componente
Na prática
Podemos representar diferentes situações de uma mesma tela componentizada utilizando as suas instâncias, e caso ocorram ajustes, não precisaremos editar cada instância manualmente, bastando apenas a edição no componente principal, no qual os ajustes serão replicados para as instâncias, nos permitindo um ganho considerável de tempo.
Alternância de situações
com Regras Booleanas
Tempo para ajustes
Se cada tela for um Frame independente
5:31 minutos
Tempo real sem aceleração de vídeo
Tempo para ajustes
Se cada tela for uma Instância de um componente de tela
3:09 minutos
Tempo real sem aceleração de vídeo
Resultado dessa abordagem
Ocorre uma grande redução de tempo em ajustes de fluxos considerando a tela como um componente. Essa situação poderia ser estendida para uma documentação onde a tela de início fosse replicada muitas vezes sob diferentes fluxos. A edição de cada Frame representativo da tela de início nos tomaria muito tempo.
Redução de tempo
42,9%
Conforme exemplo abordado
Principais Insights
Maior trabalho no início para confeccionar componentes de tela mapeando alguns cenários
Menos tempo e retrabalho em eventuais ajustes, alterando apenas uma única vez pelo componente
Se tudo for Frame independente, temos uma entrega inicial mais rápida, porém maior retrabalho em ajustes
Componentes de telas
somados a Temas aplicados
é igual a menos ajustes
A documentação base do White label deveria contemplar todos os temas do projeto, portanto foi crucial termos as telas componentizadas, pois poderíamos (por meio das instâncias) demonstrar a mesma tela sob diferentes temas, e sem medo de inconsistências estruturais (uma vez que as instâncias pertencem a um mesmo componente).
Componente
A Solução
Além da própria componentização das telas, focamos em “Tokenizar” tudo em uma interface. Portanto, uma vez que cada sub-componente e elementos “soltos” na tela (tal como títulos e textos auxiliares) recebem seus devidos Tokens, a alternância de temas funcionaria perfeitamente.
Design Tokens
Na prática
Podemos documentar cada uma das variações de temas em um determinado fluxo, sem nos preocuparmos com ajustes que surjam nas telas, pois o ajuste será feito no componente de tela principal, e suas instâncias recebem a atualização.
Tempo para ajustes
Se cada tela for um Frame independente
12:50 minutos
Tempo real sem aceleração de vídeo
Tempo para ajustes
Se cada tela for uma Instância de um componente de tela
6:29 minutos
Tempo real sem aceleração de vídeo
Resultado dessa abordagem
Novamente temos um ganho de tempo muito grande ao utilizarmos as telas como componentes. Considerando que tivéssemos que editar cada Frame representativo de telas sob diferentes variações de temas, teríamos um enorme retrabalho e gasto de tempo.
Redução de tempo
49,5%
Conforme exemplo abordado
Principais Insights
Maior liberdade e flexibilidade para documentar telas sob diferentes variações de temas
Ajustes de uma determinada tela fica centralizada apenas no componente da tela
Fim de inconsistências estruturais, independente da quantidade de temas, uma vez que as telas documentadas estão vinculadas aos seus componentes de tela
Tudo em um único
arquivo de base para gerar um ponto de partida
Considerando que todo o material do projeto será aproveitado para inserção da marca de um cliente, contemplamos o Design System e a documentação dos fluxos num único arquivo. Com isso poderíamos utiliza-lo como uma base, na qual duplicamos e customizamos visualmente, conforme as diretrizes visuais de cada novo cliente do Baasic.
A Solução
Cada cliente pode ter necessidades diferentes, tais como features novas, algumas mudanças ou remoções de determinadas telas, ou até mesmo na anatomia de alguns componentes. Considerando essas diversidades, o ato de duplicar uma base já pronta nos permite customizar o material duplicado sem nos preocuparmos com uma quebra na arquitetura do arquivo de base.
Arquivo de base (Ponto de partida)
Design Tokens
Componentes gerais
Componentes de telas
Documentação geral
Documentação dos fluxos
(Instâncias dos componentes de tela)
Duplicata do arquivo base
Duplicata (Vínculo próprio)
Design Tokens
Componentes gerais
Componentes de telas
Documentação geral
Documentação dos fluxos
(Instâncias dos componentes de tela)
Na prática
Ao duplicar o arquivo, os Tokens, componentes e demais conteúdos ganham seus próprios vínculos. Isso nos permite fazer customizações nos componentes e nas telas com maior liberdade. Tal prática evita que uma determinada solicitação de mudança visual ou até mesmo remoções afetem o arquivo de base, que serve apenas como um ponto de partida, mas nunca como uma fonte central da qual todos os projetos estejam vinculados.
Método convencional
Arquivos separados
1º
Design System
2º
Duplicata do Design System
3º
Modificar marca, cores, fontes, etc
4º
Publicar o Design System
1º
Documentação dos fluxos
(Telas como Frames)
2º
Duplicata da documentação
3º
Fazer troca entre o Design System de origem com o Design System duplicado
4º
Revisar tela por tela (que são Frames) para garantir se a troca foi bem sucedida ou não
Método aplicado
Arquivo de base
1º
Arquivo de base com todos os materiais necessários
2º
Duplicata do arquivo de base
3º
Modificar marca, cores, fontes, etc
4º
Revisar apenas os componentes de tela
5º opcional
Mover documentação dos fluxos (instâncias de componentes de telas) para um arquivo separado
3 horas
Tempo real sem aceleração de vídeo
Resultado final dessa abordagem
Considerando que edições Frame a Frame sempre exigem maior tempo de revisão, ainda mais perante projetos complexos, assumimos que essa etapa de customização no método convencional levaria em torno de 8 horas, que é muito tempo se comparado ao método aplicado com um arquivo de base. Por tanto, a utilização de um arquivo de base nos garante uma entrega mais rápida e certeira.
Método convencional
Tempo de execução
8 horas
Estimativa
Método aplicado
Tempo de execução
3 horas
Média
Impacto
Redução de tempo
62,5%
Conforme exemplo abordado
Principais Insights
Maior velocidade e nenhum conflito em customizações após duplicar arquivo de base
Ajustes pontuais de clientes não refletem no arquivo de base, somente na duplicata
Maior flexibilidade para separar Design System e fluxos de telas, garantindo o vínculo entre um e outro
Duplicar
Customizar
Revisar
Entregar
Um pouco da documentação e Design Tokens
Uma breve apresentação da documentação dos componentes e Design Tokens do projeto.
Tipografia
Poppins
font-family-1
Light
font-weight-5
Regular
font-weight-4
Medium
font-weight-3
Bold
font-weight-2
Black
font-weight-1
font-size-1
font-size-2
font-size-3
font-size-4
font-size-5
font-size-6
font-size-7
font-size-8
font-size-9
font-size-10
Espaçamentos
0px
spacing-0
2px
spacing-1
4px
spacing-2
8px
spacing-3
10px
spacing-4
12px
spacing-5
14px
spacing-6
16px
spacing-7
18px
spacing-8
20px
spacing-9
22px
spacing-10
24px
spacing-11
28px
spacing-12
32px
spacing-13
40px
spacing-14
48px
spacing-15
56px
spacing-16
64px
spacing-17
72px
spacing-18
80px
spacing-19
88px
spacing-20
96px
spacing-21
Bordas
0px
border-radius-0
2px
border-radius-1
4px
border-radius-2
8px
border-radius-3
10px
border-radius-4
20px
border-radius-5
96px
border-radius-6
Espessuras
0px
border-width-0
1px
border-width-1
2px
border-width-2
4px
border-width-3
8px
border-width-4
Cores
Primária
0
#0D1626
primary-0
1
#2C4D86
primary-1
2
#415F92
primary-2
3
#56719E
primary-3
4
#6B82AA
primary-4
5
#8094B6
primary-5
6
#95A6C3
primary-6
7
#ABB8CF
primary-7
8
#C0CADB
primary-8
9
#D5DBE7
primary-9
Secundária
1
#4470A2
secundary-1
2
#577EAB
secundary-2
3
#698DB5
secundary-3
4
#7C9BBE
secundary-4
5
#8FA9C7
secundary-5
6
#A1B7D0
secundary-6
7
#B4C6DA
secundary-7
8
#C7D4E3
secundary-8
9
#DAE2EC
secundary-9
Terciária
1
#132255
terciary-1
2
#2B3866
terciary-2
3
#424E77
terciary-3
4
#5A6488
terciary-4
5
#717A99
terciary-5
6
#8990AA
terciary-6
7
#A1A7BB
terciary-7
8
#B8BDCC
terciary-8
9
#D0D3DD
terciary-9
Alerts
Sucess 1
#1F991F
alerts-sucess-1
Sucess 2
#8DDB94
alerts-sucess-2
Sucess 3
#BBE9BF
alerts-sucess-3
Caution 1
#DA8607
alerts-caution-1
Caution 2
#E19E39
alerts-caution-2
Caution 3
#E9B66A
alerts-caution-3
Error 1
#D41717
alerts-error-1
Error 2
#E15D5D
alerts-error-2
Error 3
#E98B8B
alerts-error-3
Neutrals
0
#000000
neutral-0
1
#1A1A1A
neutral-1
2
#2A2A2B
neutral-2
3
#414142
neutral-3
4
#59595A
neutral-4
5
#717172
neutral-5
6
#888889
neutral-6
7
#A0A0A1
neutral-7
8
#B8B8B8
neutral-8
9
#D0D0D0
neutral-9
10
#E7E7E7
neutral-10
11
#F3F3F3
neutral-11
12
#FFFFFF
neutral-12
Botões
Primário
Default
Pressed
Solid
Outline
Link
Text here
Text here
Text here
Text here
Text here
Text here
Cancelar
Default
Pressed
Solid
Outline
Link
Text here
Text here
Text here
Text here
Text here
Text here
Inverso
Default
Pressed
Solid
Outline
Link
Text here
Text here
Text here
Text here
Text here
Text here
Inputs
Tipo
Text Field
Dropdown
Password
Search
Text Area
Default
Focus
Filled
Error
Label
Placeholder
Label
Placeholder
Label
Placeholder
Label
Placeholder
Description here
Label
Placeholder
Label
Placeholder
Label
Placeholder
Label
Placeholder
Description here
Label
••••••
Label
••••••
Label
••••••
Label
••••••
Description here
Label
Placeholder
Label
Placeholder
Label
Placeholder
Label
Placeholder
Description here
Label
Placeholder
Label
Placeholder
Label
Placeholder
Label
Placeholder
Description here
Radio Button
Primário
Selected (Off)
Selected (On)
Default
Disabled
Checkbox
Primário
Selected (Off)
Selected (On)
Default
Disabled
Switch
Primário
Selected (Off)
Selected (On)
Default
Disabled
Iconografia
Considerações finais e aprendizados
Esse projeto nos possibilitou a experiência de atuar em contextos que envolvem White label, onde cada decisão deve ser minuciosamente pensada (Tokens bens definidos, componentes modulares, métodos de otimizar tempo como os componentes de tela, etc) para que o projeto como um todo seja customizado e escale com menores dificuldades.
