Logomarca da How Bootcamps
Mahoe: conheça a trajetória do Design System do Banco PAN

Mahoe: conheça a trajetória do Design System do Banco PAN

Caminhos e desafios que percorremos desde o preparo do terreno até o seu estágio recente.
Comunidade How

Comunidade How

Caminhos e desafios que percorremos desde o preparo do terreno até o seu estágio recente.

Principais dores que motivaram a construção

Team Models for Scaling a Design System

https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

4 modelos de times de Design Systems

https://medium.com/@rcd.tedeschi/4-modelos-de-times-de-design-systems-95e5bcde276e

Primeiros passos

1. Conhecer a realidade do time

2. Entender a stack de ferramentas e tecnologias

3. Identificar as principais dores

4. Identificar lideranças e referências dentro das áreas

5. Definir um processo de trabalho inicial

6. Vender o Design System e o processo

Image for post
Imagem da primeira versão do fluxo de governança do design system do Banco PAN, com as etapas de descoberta, refinamento, desenvolvimento e revisão de um novo componente ou variação.
Image for post
Imagem com as cinco etapas do fluxo de governança: Descoberta, Design, Construção, Documentação e Publicação.

Vendendo o Design System

O que é, e porque criar um Design System?

Organização do time, do início ao estágio atual

Image for post

Imagem da primeira organização e fluxo de trabalho do Design System, com uma pessoa focada como Design System Ops articulando com todas as squads do banco, contando com a ajuda de designers e desenvolvedores para definições e construção dos componentes.

Image for post

Imagem da organização desejada, com um time de Design Ops multidisciplinar centralizado, com um designer, desenvolvedores, UX Writer e Design Ops Lead, contando com a ajuda de designers e desenvolvedores para definições e construção dos componentes.

Image for post

Imagem com os papéis do time multidisciplinar, mostrando a divisão de tempo de tempo de cada um, sendo o único com 50% do tempo o desenvolvedor iOS.

Image for post

Organização do time de Design Operations, com contribuições e melhorias em conjunto com os designers e desenvolvedores. Design Ops Lead com a responsabilidade da Gestão, processos e iniciativas do time. UX Designer cuidando dos elementos visuais e documentação. Front-end Web cuidando dos componentes da biblioteca de front-end e da documentação. Designers e desenvolvedores contribuindo com a melhoria contínua do Mahoe.

Image for post

Imagem da organização cíclica, time focado no Design System trabalhando em conjunto com os designers e desenvolvedores da squads.

Cerimônias e iniciativas

Ferramentas e tecnologias

Image for post
Documentação oficial do Design System no Zeroheight, com regras de uso e protótipos interativos.

Visibilidade e comunicação

Image for post

Imagem do e-mail Design Ops News, enviado após o término de cada sprint, listando as novidades e avanços do produto Design System.

Melhoria contínua

Image for post

Aumento de 24 pontos no NPS, entre o primeiro e segundo trimestre de 2020.

Acontecimentos durante a trajetória

Rebranding

Image for post
Na esquerda, a logo antiga do Banco PAN. Na direita, a nova logo, utilizada desde 2019

Evolução do Design System

Image for post

Imagem da primeira dinâmica do projeto Fênix, que contou com a facilitação do Rômulo Azevedo e a participação de 4 áreas diferentes na definição dos atributos visuais da versão 2.0 do Mahoe.

Mahoe Labs

E finalmente… a origem do nome “Mahoe”

Image for post

Imagem do Google Tradutor Web, com a tradução da palavra Mahoe, que significa gêmeos em Hawaiano.

Image for post

Imagem do Silvinho Santos feliz da vida com a evolução do Mahoe. Divulgação/equipe Criação Visual SBT.

Escute o podcast sobre o Design System do Banco PAN

Image for post
O UX Collective doa US$1 para cada artigo publicado na nossa plataforma. Esta história contribuiu para o Bay Area Black Designers: uma comunidade de desenvolvimento profissional para pessoas Pretas que são designers digitais em San Francisco. Por serem designers de um grupo pouco representado, membros do BABD sabem o que significa ser “o único” em seus times de design e em suas empresas. Ao se juntarem em comunidade, membros compartilham inspiração, conexão, mentoria, desenvolvimento profissional, recursos, feedback, suporte, e resiliência. Silêncio contra o racismo sistêmico enraizado na sociedade não é uma opção. Construa a comunidade de design na qual você acredita.

Compartilhe

Logomarca da How Bootcamps
Formulário de Contato