O sistema de design do app de delivery

Sua mesa: A cor nova que some no branco

A marca trocou o vermelho por um coral mais claro, e a agência mandou a paleta pronta. Às 15h ela vai para os seis times, e cada um puxa para as próprias telas.

Antes, você roda o teste de contraste. A regra: texto de até 23px precisa de contraste de pelo menos 4,5:1 com o fundo; texto de 24px para cima, pelo menos 3:1. Abaixo disso, muita gente simplesmente não lê.

Ache as combinações que ficam abaixo do mínimo para o tamanho do texto. São essas quatro. O preço, o link do cupom e o tempo de entrega são pequenos demais para o contraste que têm, e o selo de restaurante novo não chega nem ao mínimo de texto grande. Justamente o preço e o tempo: o que a pessoa procura primeiro. Cada tentativa errada custa 5 minutos.

O que acontece conforme a hora em que você chega

• Antes das 11h: Você achou antes das 11h. Deu tempo de mostrar à agência os quatro casos e ajustar o tom com ela, em vez de mexer na cor da marca sozinho. A paleta saiu às 15h já corrigida.
• Entre 11h e 15h: Você achou depois das 11h. A agência não respondeu a tempo, e você escureceu o coral por conta própria nos quatro tokens. A paleta saiu certa às 15h. Na segunda, a agência vai perguntar quem mexeu na cor dela.
• Depois das 15h: A paleta ficou para depois das 15h. A paleta chegou aos seis times com quatro combinações abaixo do mínimo, e a versão desta sexta saiu com o preço e o tempo de entrega em coral claro sobre branco. O que quer que tenha sido corrigido depois, só entra na próxima versão.

Sala de reunião: Três segundos de logo

A Beatriz, diretora de marca, trouxe o vídeo que a agência fez: o logo novo gira, se desmonta em pedacinhos de comida e se monta de novo. Ela quer isso toda vez que alguém abre o app. São três segundos.

O número do produto diz que cada segundo a mais na abertura faz parte das pessoas desistir antes de ver o primeiro restaurante. A animação é bonita. Você ajudou a escolher a agência.

• Fazer a animação como foi pedida. Você exporta a animação em formato leve e ela entra na abertura do app. A Beatriz manda o vídeo para a diretoria. Na semana seguinte, o time de produto pergunta por que o tempo até o primeiro pedido subiu três segundos.
• Propor uma versão de 0,8 segundo. Você corta para o logo girando uma vez e parando. A Beatriz aceita, sem sorrir, e pede que a versão longa fique pelo menos no vídeo da campanha. A agência manda um e-mail perguntando o que aconteceu com os pedacinhos de comida.

O que acontece conforme a hora em que você chega

• Antes das 11h: Você entrou antes das 11h. A Beatriz ainda não tinha mostrado o vídeo para ninguém. Deu para conversar sobre a abertura antes de a animação virar promessa para a diretoria.
• Entre 11h e 14h: Você entrou depois das 11h. O vídeo já tinha rodado no grupo da diretoria com a frase "vai ficar assim no app". Você entrou para discutir uma coisa que, para eles, já estava aprovada.
• Depois das 14h: O logo ficou para depois das 14h. A agência fechou o arquivo final às 14h sem ouvir o design do produto. O que quer que tenha sido combinado depois, foi em cima de uma animação pronta, não de uma ideia.

Ilha do produto: O botão que não é do sistema

O Diego lidera o time do checkout. O botão do sistema não tem um estado de "carregando", e o pagamento demora dois segundos. Os clientes apertam de novo e pagam duas vezes. Então o time fez o próprio botão, com uma rodinha girando, e quer publicar às 15h.

Funciona. Só que é um botão a mais, com outra altura, outro arredondamento e outra animação, e os outros cinco times estão olhando.

• Pôr o botão deles no sistema como está. O botão do Diego vira o botão oficial com estado de carregando. O pagamento duplicado para. Na segunda, dois outros times já usam o botão novo, com a altura diferente, e o sistema passa a ter dois botões principais.
• Pedir que esperem o do sistema. Você promete o estado de carregando no botão do sistema para terça. O Diego aceita e diz, na frente do time, que o design system é o motivo do atraso. Até terça, o checkout segue com o botão antigo, e alguns clientes continuam pagando duas vezes.

O que acontece conforme a hora em que você chega

• Antes das 12h: Você foi à ilha antes do meio-dia. O Diego ainda não tinha aberto o pedido de publicação. Deu para conversar sobre o botão antes de ele virar fato.
• Entre 12h e 15h: Você foi à ilha depois do meio-dia. O time já tinha escrito os testes do botão próprio. Qualquer decisão agora jogava fora uma manhã de alguém.
• Depois das 15h: O checkout ficou para depois das 15h. Às 15h o time publicou sem esperar resposta, porque ninguém tinha dito nada. O que quer que tenha sido decidido depois, foi em cima de um botão que já estava no celular dos clientes.

Central de atendimento: Quem fica tonto na home

Na tela inicial nova, os pratos deslizam em camadas, em velocidades diferentes, quando a pessoa rola a tela. A Lúcia, da central, já recebeu 30 reclamações desde ontem: gente com labirintite dizendo que fica tonta só de procurar o almoço.

O celular tem uma opção para pedir menos movimento. O app não respeita essa opção. Corrigir isso é uma versão nova, e a loja leva dois dias para aprovar.

• Desligar a animação para todo mundo hoje. Uma chave no servidor desliga as camadas em uma hora, sem versão nova. As reclamações param. A tela inicial fica parada para todos os 5 milhões, e o time da home pergunta por que o trabalho de um mês virou uma imagem fixa.
• Respeitar a opção do celular na próxima versão. Você desenha o comportamento: quem pediu menos movimento vê a tela parada; os outros, as camadas. A versão vai para a loja. A Lúcia responde a cada reclamação ensinando a ligar a opção no celular, e explicando que ela só vai funcionar a partir de domingo.

O que acontece conforme a hora em que você chega

• Antes das 10h30: Você foi à central antes das 10h30. Ainda eram 30 reclamações. Deu para a Lúcia responder cada uma com uma explicação, não com um texto pronto.
• Entre 10h30 e 13h: Você foi à central depois das 10h30. O horário do almoço chegou antes de você, e com ele mais 80 reclamações. A Lúcia já respondia com um texto pronto que não dizia nada.
• Depois das 13h: A central ficou para depois das 13h. O almoço inteiro passou com a home deslizando para quem fica tonto. O que quer que tenha sido feito depois, a reclamação já tinha chegado às lojas de aplicativos, com uma estrela.

Copa: Café, e o sistema de design visto de fora

Um desenvolvedor de outro time está na máquina de café.

“…design system é só uma biblioteca de botão. O meu eu faço em meia hora.”

Ele faz mesmo. O problema é que seis pessoas fazem o seu em meia hora, cada um de um jeito, e em seis meses o app parece seis apps. Quinze minutos depois, você volta para a mesa com isso na cabeça.

O que se ouve de passagem

Atravessar a empresa não é só deslocamento. No corredor as pessoas continuam falando, e o que elas dizem depende da hora e do que você ainda não resolveu. Nada disso custa tempo nem muda o dia.

• …a paleta nova vai para todos os times às três.
• …o checkout fez um botão próprio. Dizem que o do sistema não tem carregando.
• …a diretora de marca trouxe o vídeo do logo girando. É lindo, e é comprido.
• …a central tá recebendo reclamação de gente que fica tonta na home.

O que vem depois das escolhas

• Se você escolheu “Desligar a animação para todo mundo hoje” e “Fazer a animação como foi pedida”: Você tirou o movimento da tela inicial para todo mundo e pôs três segundos de logo girando na abertura. Na segunda, a Lúcia repassou a primeira reclamação sobre o logo, de uma cliente que já tinha reclamado da home.
• Se você escolheu “Pôr o botão deles no sistema como está” e “Respeitar a opção do celular na próxima versão”: O botão do checkout entrou no sistema com uma rodinha que ignora a opção de menos movimento. A versão que você mandou para a loja, justamente para respeitar essa opção, já saiu com uma exceção.
• Se você escolheu “Pedir que esperem o do sistema” e “Fazer a animação como foi pedida”: Você segurou o time do checkout para manter o sistema inteiro e, na mesma sexta, aceitou a animação da marca sem mudar nada. O Diego perguntou, no canal dos designers, por que a regra vale para um botão e não para um logo.
• Se você escolheu “Respeitar a opção do celular na próxima versão” e “Propor uma versão de 0,8 segundo”: As duas mudanças saem na mesma versão. A Beatriz vai ver a animação curta pela primeira vez no celular de um cliente que pediu menos movimento: ali, o logo nem gira.

Como o dia termina

As duas portas de Design

Design de produto digital não é uma profissão só, são duas, e elas se separam pelo tipo de problema, não pelo assunto.

• Sistema de design. Manter as regras visuais que muitos times usam, e convencer cada um de que vale seguir.
• Motion design. Desenhar o movimento das telas: o que ele diz, quanto tempo custa e em quem ele pesa.