Como organizamos nosso fluxo de design no Figma
Unimos o uso da ferramenta para apoiar os processos do time de design olist.
Crescimento exponencial do time
Não é novidade que em 2020 a pandemia impactou o varejo –as compras online cresceram em 41% e com isso o olist seguiu acelerando, mesmo em um momento tão dificil.
Em 2018 nosso time começou com 2 designers (em produto) e o Figma foi nossa plataforma de escolha desde o início. Com um time pequeno nós tínhamos muita flexibilidade para ir criando sem pensar muito em organizar efetivamente os arquivos, afinal, sentávamos um do lado do outro e qualquer dúvida era fácil resolver.
Nessa onda de crescimento o time de design teve um boom e hoje estamos em quase 50 designers. Agora, não mais compartilhamos entregáveis e sim nos especializamos em partes da jornada dentro de squads específicos, por conta disso sentimos a necessidade de reestruturar e padronizar a forma de organização do Figma.
Principais dores que surgiram
Em 2020 listamos com nosso time os principais problemas em relação ao nosso processo e o Figma:
- Arquivos hiper pesados (muitas iterações no mesmo arquivo)
- Sem arquivos fonte-da-verdade (não conseguíamos diferenciar o que era estudo em andamento e o que estava em produção)
- Dificuldades de alinhamento entre designers
- Design system abandonado (cachorro com muitos donos morre de fome)
- Baixa manutenção dos componentes locais
- Sem playbook do fluxo de design
Reestruturação do Figma
O primeiro passo foi migrar para o plano Organization do Figma e reestruturar nosso fluxo de trabalho de design refletindo esse processo na ferramenta.
Com o novo plano, dividimos nossa estrutura do Figma em 5 partes:
1. Times
Dividimos conforme nossas estratégias macro & produtos (aplicativos, plataforma web, sistemas internos). Nesse caso, cada designer normalmente faz parte de um time principal que é onde mais irá contribuir.
Por exemplo, -olist shops- contém tudo que é relacionado ao aplicativo de olist shops e designers que atuam nesse contexto trabalham apenas dentro desse time no Figma.
*O acesso a maioria dos times é livre para todos, com o objetivo de poder visualizar tudo que está sendo trabalhado em outros contextos.
2. Projetos
São unidades de negócios & verticais que contém partes da jornada dos nossos produtos. Cada time sub-divide essa jornada conforme sua estrutura interna, mas normalmente um designer trabalha em um projeto específico e nos projetos que são cross jornadas.
Por exemplo, -Catálogo- é um projeto dentro de -olist shops-, nesse caso, todas as interações que o squad responsável por Catálogo faz nessa jornada ficam dentro desse projeto.
3. Arquivos
Aqui vem o diferencial da nossa organização— Nós utilizamos os arquivos para apoiar nosso processo de design. Como assim Lay?
Nós temos 3 principais tipos de arquivos:
- Fonte da verdade
É o arquivo que espelha o que está em produção e é atualizado manualmente conforme as entregas são realizadas pelo time de desenvolvimento. - Iniciativa em andamento
É o arquivo que contém todo o desenvolvimento daquela iniciativa feita por design. — Todo trabalho do designer e da designer começa com uma iniciativa definida, ela pode ser desde uma pequena alteração em um fluxo ja existente até um estudo mais complexo sobre alguma oportunidade e desafio novo. - Componentes locais
É o arquivo que contém os componentes locais daquela jornada (que não fazem parte do nosso design system)
Os arquivos de iniciativas possuem status pré-definidos que auxiliam qualquer pessoa a identificar em que etapa aquele trabalho se encontra:
- 🔍 discovery: o que está em processo de pesquisa e imersão
- 🛠 in progress: o que está no momento de construção com a solução já sendo desenvolvida
- ✅ ready for dev: solução refinada, aguardando o time de desenvolvimento
- ⛔️ ux debts: iniciativas que foram desenvolvidas, mas com débitos de experiência — e que precisarão ser revisitadas
- 🗄 archive: iniciativas que foram pausadas ou descontinuadas.
4. Páginas Internas
São subdividas de acordo com o conteúdo. Como utilizamos o Figma para documentar boa parte do processo de design, cada página contém um tipo de conteúdo.
Por exemplo, temos uma página especifica para benchmarks, e uma outra que chamamos de playground onde jogamos as ideias iniciais pouco refinadas.
Ter essa diferenciação ajuda outras pessoas do time a se localizarem facilmente e acompanharem o processo.
5. Conteúdo / Design
Aqui efetivamente é onde moram os entregáveis de design e principalmente as interfaces & fluxos daquilo que está sendo projetado.
Por exemplo, dentro da página de handoff você irá encontrar todas as interfaces, inclusive com as definições de métricas, animações e condições. Essa no caso é a página que as pessoas desenvolvedoras do time utilizam como referência para desenvolvimento.
Organização do nosso Design System
Aqui vale um artigo só disso, (a Luisa Scaletsky nossa PD dedicada ao DS logo logo escreve um) então segue nosso perfil aqui para acompanhar uma segunda parte sobre esse tema em específico :)
Fluxo de design organizado
Com essa estrutura agora, todo time de design tem um caminho das pedras a seguir apoiado pela ferramenta de trabalho e isso inclusive nos auxilia no onboarding de novas pessoas no time design.
Todo trabalho começa com uma nova iniciativa, passa pela fase de discovery e imersão, é refinado, testado, iterado e entregue para o time desenvolver, assim que entra em produção temos uma versão final do Figma atualizada para que uma nova iniciativa possa ter seu ponto de partida.
Continuamos aprendendo
Estamos há 6 meses rodando efetivamente com essa nova organização continuamente aprendendo e refinando os processos e a forma de organizar.
Aqui no olist nós prezamos pela flexibilidade e autonomia de cada designer, entendendo e respeitando que cada um tem o seu processo de trabalho. Os templates criados podem ser modificados de acordo com a necessidade e os combinados de cada designer com os squads.
As etapas e arquivos padronizados compreendem esse espaço de trabalho e garantem nossos objetivos de trazer mais clareza sobre as iniciativas, melhoraram o alinhamento entre contextos e uma troca mais simplificada.
Dica: ter templates prontos fazem a diferença💡
Para fazer acontecer essa organização e acelerar o processo de cada designer, criamos alguns templates prontos para serem utilizados. Desde capas para os arquivos já com os status pré-definidos até um componente de evento do mixpanel para utilizar no handoff.
É sobre não sobrecarregar seu time com detalhes, mas reconhecer a importância do detalhe na visão geral.
Nós criamos um time dentro da nossa organização no Figma com todo esse conteúdo que pode ser duplicado e também adicionamos uma biblioteca que chamamos de -Figma Resources- com esses itens.
Alguns desses templates nós disponibilizamos na Community do Figma, é só seguir o perfil do olist e ficar de olho nas atualizações. https://www.figma.com/@olist
E ai? como está organizado o seu processo de design e no Figma? Eu adoro conversar sobre esses assuntos então qualquer coisa me chama no Linkedin para batermos um papo 🙋♀️
