Produto digital · Lançamento de produto (web, iOS e vídeo)

Appius.

A fila de espera do Appius, o aparelho da Shopper pra nunca mais faltar o essencial em casa.

Shopper · 2019 — 2020 · UX/UI Designer

Primeira dobra da landing page: aparelho Appius à esquerda, logotipo, frase 'Para que não falte itens essenciais. Nunca mais.' e botão branco 'Eu quero' à direita, seta para baixo. — Primeira dobra da landing: produto, promessa e um único botão.

O trabalho

A Shopper, supermercado online de compras recorrentes de São Paulo, criou o Appius: um aparelho que fica na cozinha e ajuda a registrar o que acabou, pra que a compra do mês chegue completa. O trabalho foi desenhar a campanha de lançamento inteira: landing page, fluxo de cadastro, fila de espera com convite de amigos, versão iOS e web responsivo, além do vídeo de apresentação.

O contexto

A Shopper vende supermercado por assinatura: o cliente monta a lista uma vez e recebe em casa todo mês. O ponto fraco desse modelo é o que acaba antes da hora, ou o item que ninguém lembrou de pôr na lista. O Appius nasceu pra fechar essa brecha. É um dispositivo físico, preto, com três ícones de estado na frente (a sacola da Shopper, um check e o wi-fi) e uma janela de leitor na base. A ideia que a landing conta: você acompanha o consumo pelo app e escolhe o que realmente quer receber. O nome vem de Appius Claudius Caecus, que construiu o primeiro aqueduto de Roma. A metáfora da marca é essa: o encanamento tirou a água do poço; a Shopper quer fazer o mesmo com os produtos essenciais. O primeiro lote seria distribuído de graça para clientes Shopper que entrassem na fila, e novos lotes viriam conforme a demanda.

O desafio

Lançar um produto físico em lote pequeno cria dois problemas de uma vez. O primeiro é explicar, em poucos segundos, o que é um aparelho que ninguém viu antes. O segundo é lidar com a espera: se a fila é longa e opaca, a pessoa se cadastra, não entende por que não recebeu, e esquece. O trabalho precisava transformar a espera em algo que a pessoa controla, e ao mesmo tempo usar essa espera pra trazer novos clientes à Shopper. Tudo isso em web, iOS e vídeo, com uma só linguagem.

Setor: Varejo · Supermercado onlinePeríodo: 2019 — 2020Função: UX/UI DesignerFerramentas: Adobe XD, Illustrator, Photoshop, After Effects, Premiere

Como foi feito

Do problema à tela.

01
Conceito e tom
A campanha adotou um tema escuro e sóbrio: fundo preto, aparelho preto brilhante, tipografia branca e o verde da Shopper só onde importa. O manifesto curto ('Para que não falte itens essenciais. Nunca mais.') e a história do aqueduto dão ao produto um porquê antes de qualquer botão.
02
Arquitetura da landing
A página foi reduzida a três blocos: a promessa com o aparelho e um botão, a seção 'Saiba mais' com o vídeo e uma foto do Appius em uso na cozinha, e a chamada final 'Quer receber antes de todo mundo?'. O vídeo concentra a explicação, então o texto da página pôde ficar mínimo.
03
Mecânica da fila
Foram desenhados três momentos: entrar (cadastro por e-mail ou Facebook, ou login de quem já é cliente), esperar (a posição na fila com data de atualização) e furar a fila (convidar amigos por Facebook, WhatsApp, Messenger ou e-mail). Cada convite convertido sobe posições, e isso é dito em uma frase.
04
Telas web e iOS
As telas foram feitas no Adobe XD para desktop, web responsivo e app iOS. No celular, a fila vira uma folha branca que sobe sobre o fundo preto, os botões de compartilhar usam o Messenger, o WhatsApp e o compartilhamento nativo do sistema, e há um link direto 'Voltar para Shopper'.
05
Vídeo e material visual
Além das telas, a campanha teve um vídeo de apresentação (After Effects e Premiere) e renders do aparelho tratados em Photoshop e Illustrator, usados na landing, no app e na divulgação.

O que melhorou no UX

8 decisões, com a tela pra provar.

01 / 08

A espera vira uma ação

O atrito: Fila de espera costuma ser um beco: a pessoa se cadastra e só resta aguardar. Sem nada pra fazer, ela some antes do lote chegar.
O que a tela faz agora: Logo depois do cadastro aparece o cartão 'Quer furar fila? Convide seus amigos', com três botões de rede social, um campo de e-mail e um único botão preto, Convidar. A regra é dita em uma linha: a cada convidado que entrar, você pula posições.; Por que é melhor: Quem está esperando ganha algo pra fazer que melhora a própria situação. E cada convite traz um cliente novo pra Shopper, então o mesmo gesto serve às duas pontas.

Cartão branco 'Quer furar fila? Convide seus amigos', com botões Facebook, WhatsApp e Messenger, campo de e-mail e botão preto Convidar. — O cartão de convite: três redes, um e-mail, um botão.

Tela da fila no desktop: posição 875 com data da última atualização, cartão de convite à direita, botão 'Começar a comprar' e janela 'Por que estou na fila de espera?' à esquerda. — A fila no desktop: posição, convite, e a ponte de volta pra loja.

02 / 08

Confirmação no lugar, sem sair da tela

O atrito: Depois de convidar, a pessoa precisa saber que funcionou. Mandar pra outra página quebraria o ritmo e esconderia o próximo convite.
O que a tela faz agora: A confirmação 'Amigo convidado! Convide outros!' aparece em verde, dentro do próprio cartão, entre o campo de e-mail e o botão. O botão Convidar continua ali, pronto pro próximo.; Por que é melhor: O retorno é imediato e visível, e o fluxo convida a repetir em vez de encerrar. É o estado de sucesso desenhado pra manter o ciclo rodando.

Antes

Depois

O mesmo cartão de convite após o envio, com a mensagem verde 'Amigo convidado! Convide outros!' acima do botão Convidar. — Depois de convidar: a confirmação aparece no lugar, e o botão continua ali.

03 / 08

Posição na fila sempre visível

O atrito: Não saber onde se está na fila gera desconfiança e pedidos de suporte do tipo 'quando chega o meu?'.
O que a tela faz agora: A tela da fila mostra o número grande ('sua posição na fila: 875'), com a data e hora da última atualização embaixo e um ícone ⓘ que abre a janela 'Por que estou na fila de espera?'.; Por que é melhor: O número dá uma referência concreta, a data diz que ele é atual, e a explicação fica a um toque de distância pra quem quiser entender a regra, sem poluir a tela de quem só quer ver a posição.

Dispositivo Appius ao fundo e o texto 'sua posição na fila: 875' em branco, com ícone de informação ao lado do número. — A posição na fila em destaque, com acesso à explicação pelo ícone ⓘ.

Tela de celular da fila: posição 875 em fundo preto e folha branca 'Quer furar fila?' com botões Messenger, WhatsApp e Compartilhar, campo de e-mail, botão Convidar e link 'Voltar para Shopper'. — A fila no celular: compartilhar pelo sistema e voltar pra Shopper.

04 / 08

Um botão só, repetido no momento certo

O atrito: Páginas de lançamento costumam acumular chamadas diferentes: saiba mais, cadastre-se, baixe o app. A pessoa não sabe qual é o caminho principal.
O que a tela faz agora: A landing tem uma única ação, 'Eu quero', que aparece na primeira dobra, acompanha a rolagem no canto da seção 'Saiba mais' e volta como 'Entrar na Fila' no fechamento. No iOS o mesmo botão se repete no mesmo lugar.; Por que é melhor: A pessoa sempre tem o próximo passo à mão, em qualquer altura da página, e o texto do botão diz o que acontece. Menos escolha, mais decisão.

Landing page completa em rolagem: dobra inicial, seção 'Saiba mais' com vídeo e foto de cozinha, chamada 'Quer receber antes de todo mundo?' com botão 'Entrar na Fila' e frase de fechamento. — A landing inteira: promessa, vídeo, chamada final.

Tela de celular iOS com a landing do Appius: logotipo, aparelho, frase 'Um jeito simples de manter sua casa sempre abastecida', botão 'Eu quero', seção Saiba mais com vídeo e chamada final. — A landing no iPhone, com o mesmo botão do começo ao fim.

05 / 08

Quem já é cliente não se cadastra de novo

O atrito: O Appius era pra clientes Shopper. Misturar cadastro novo e login no mesmo bloco faz quem já tem conta criar outra, e depois a fila não casa com a conta certa.
O que a tela faz agora: O cartão de entrada tem duas zonas: em cima, 'Receba antes' com 'Cadastrar com E-mail' ou 'Cadastrar com Facebook'; embaixo, um bloco cinza separado, 'Já possui cadastro? Entrar'. Na mesma tela, a janela 'Entenda como funciona' explica o lote gratuito e a regra de furar fila.; Por que é melhor: A separação visual evita o cadastro duplicado, e quem chega sem contexto tem a explicação ao lado, sem precisar sair do fluxo.

Tela de login: cartão 'Receba antes' com botões 'Cadastrar com E-mail' e 'Cadastrar com Facebook', bloco cinza 'Já possui cadastro? Entrar', aparelho ao centro e janela 'Entenda como funciona' à direita. — Entrada: cadastro novo separado de quem já é cliente, e a explicação ao lado.

06 / 08

Explicação sob demanda, não espalhada pela tela

O atrito: Um produto novo pede muita explicação. Colocar tudo na página deixa o texto longo e afasta quem só quer entrar na fila.
O que a tela faz agora: As regras ficam em janelas que abrem pelo ícone ⓘ ou pelo contexto: 'Entenda como funciona' (lote gratuito, novos lotes conforme a demanda, como furar fila) e 'Por que estou na fila de espera?'. Cada uma tem um botão Fechar grande e só isso.; Por que é melhor: A tela principal fica curta pra quem decide rápido, e o detalhe existe pra quem precisa dele. É divulgação progressiva aplicada a um lançamento.

07 / 08

Compartilhar do jeito que o celular compartilha

O atrito: Botões de rede fixos funcionam no desktop, mas no celular a pessoa quer mandar pelo app que já usa, seja qual for.
O que a tela faz agora: Na versão iOS os três botões viram Messenger, WhatsApp e 'Compartilhar', que abre a folha nativa do sistema. O cartão sobe como uma folha branca sobre o fundo preto, e um link 'Voltar para Shopper' fecha o ciclo com a loja.; Por que é melhor: Aproveita o que o celular já faz bem, encurta o caminho pra convidar e nunca deixa a pessoa presa na campanha sem saber como voltar a comprar.

Antes

Depois

08 / 08

Ponte de volta pra compra

O atrito: Uma campanha de produto pode roubar a atenção do negócio principal: a pessoa entra na fila e vai embora sem comprar nada.
O que a tela faz agora: A tela da fila termina com um botão branco 'Começar a comprar' no desktop e com 'Voltar para Shopper' no celular.; Por que é melhor: A fila de espera do Appius passa a ser também uma porta de entrada pro supermercado, que é de onde vem a receita.

Mais telas

O resto do trabalho, tela por tela.

Página inicial

Logotipo Appius by shopper.com.br em branco sobre fundo preto, com o dispositivo Appius preto abaixo, mostrando três ícones (sacola, check e wi-fi). — Abertura da campanha: o nome, a assinatura da Shopper e o aparelho.

Marca

Texto em fundo branco: 'Para que não falte itens essenciais. Nunca mais.' seguido da história de Appius Claudius Caecus e do primeiro aqueduto romano. — De onde vem o nome: o aqueduto que tirou a água do poço.

Dois renders em close do dispositivo Appius preto brilhante, vistos em ângulo, com os três ícones, o nome e a janela do leitor na base. — O aparelho em detalhe: ícones de estado e leitor na base.

O que fica desse trabalho

Uma fila de espera não precisa ser um lugar passivo: dê à pessoa algo que melhore a posição dela e a espera vira engajamento.
Estado de sucesso que fica na mesma tela mantém o ciclo rodando; mandar pra outra página o encerra.
Um produto novo se explica melhor em vídeo e em janelas sob demanda do que em parágrafos na página.
Toda campanha paralela precisa de um caminho de volta pro negócio principal, visível e com nome claro.
Segundo o registro do projeto, a campanha foi bem aceita pelos clientes e teve baixa rejeição; nenhum número foi publicado, então nenhum é citado aqui.

Entregas