Edgard Genaro Curitiba, BR

Todos os cases

Case 03 / 11

Perigot

Sete nomes, cinco logos e nenhum link até a loja. Agora a Perigot é uma marca só, do Instagram à compra.

Cliente
Perigot, cosmética para cães e gatos desde 2006, São Paulo (SP)
Meu papel
Diagnóstico de marca e site, direção de arte e o protótipo do site novo
Entregas
Diagnóstico em 23 telas, marca com duas assinaturas, site novo e abertura animada
Notebook sobre mesa de travertino com a primeira tela do site novo da Perigot, Banho de salão, em casa; ao fundo, desfocada, uma mulher sorri com o dachshund no colo, no sofá da sala

Problema e solução

Problema

A Perigot reclamava de vendas perdidas. Site, loja on-line e Instagram falavam cada um de um jeito: a loja tinha outro logo, e o site, sem preço e sem impacto, não levava até ela.

Solução

Uma marca com duas assinaturas, Perigot e Perigot Store, e um site novo que abre com a marca, mostra cada linha na sua cor e leva à loja em cada produto.

(01)

Jornada

Do Instagram à compra, não havia caminho.

Refiz o trajeto de quem vê a Perigot no Instagram e decide comprar: cinco paradas, e nenhuma leva à loja. No site novo, o botão de comprar aparece na primeira tela e em cada produto.

JornadaAntes e depois: os prints do site antigo e o protótipo do site novo.
JornadaAntes e depois: os prints do site antigo e o protótipo do site novo.

(02)

Marca

Uma marca, duas assinaturas.

Cada canal mostrava a Perigot de um jeito, e a loja tinha um símbolo só dela. A proposta mantém o osso e o vermelho em tudo, e a loja assina Perigot Store: o mesmo osso, com a palavra Store.

AntesLevantamento em sete canais: sete nomes, cinco logos, oito vermelhos e nenhum link entre o site e a loja.
AntesLevantamento em sete canais: sete nomes, cinco logos, oito vermelhos e nenhum link entre o site e a loja.
MarcaPerigot, a marca. Perigot Store, a loja: o mesmo osso, com a palavra Store em Instrument Serif itálico.
AberturaGravação real: o cachorro traz o osso e o osso vira a marca. Seis segundos de desenho vetorial e CSS, uma vez por visita.
AberturaGravação real: o cachorro traz o osso e o osso vira a marca.

(03)

Estilo

Um vermelho, duas letras, um botão.

Oito vermelhos, seis letras e dez estilos de botão viraram um sistema curto. Cada linha ganha a sua cor de fundo; o botão de comprar nunca muda.

  1. Reconhecida em qualquer canal.

    O osso, o vermelho e o botão se repetem no site, na loja e nas redes. Quem vê um reconhece o outro.

  2. Cor para a linha, não para o botão.

    Milk rosa, Maré água, Animalerie azul: a cor separa as linhas, e a pessoa aprende de uma vez onde clicar.

  3. Foto que mostra o cuidado.

    Pet e tutor em foto grande sobre cor lisa, no lugar de seis jeitos de fotografar.

PaletaOito vermelhos viram um. Cada linha ganha a sua cor de fundo, e o botão de comprar é o mesmo em todas.
PaletaOito vermelhos viram um. Cada linha ganha a sua cor de fundo, e o botão de comprar é o mesmo em todas.
TipografiaSeis letras viram duas: Bricolage Grotesque para tudo e Instrument Serif itálico só na ênfase.
TipografiaSeis letras viram duas: Bricolage Grotesque para tudo e Instrument Serif itálico só na ênfase.
ComponentesUm botão, o produto com preço, a assinatura da loja, a barra do celular e o CEP.
ComponentesUm botão, o produto com preço, a assinatura da loja, a barra do celular e o CEP.
ComponentesRecortes do protótipo no ar, sem retoque.

(04)

Telas

Uma página, quatro portas e 42 caminhos até a loja.

O menu fala com quem compra: linhas, profissionais, onde encontrar e a Perigot. Cada linha fica presa na tela enquanto a próxima sobe por cima, na sua cor.

SitemapNove seções numa página só. Cada link para a loja leva a marca do ponto de onde saiu.
SitemapNove seções numa página só. Cada link para a loja leva a marca do ponto de onde saiu.
NavegaçãoGravação do protótipo: as linhas sobem uma sobre a outra, cada uma na sua cor.
PortasUma marca, duas portas: conhecer a Perigot ou comprar na Perigot Store.
LinhaLinha Milk: a cor da linha, os produtos com preço e o botão para a loja.
CatálogoCatálogo: todas as linhas, um clique até a loja.
Onde encontrarOnde encontrar: a loja, um distribuidor pelo CEP ou o WhatsApp.

(05)

Celular

No celular, a loja fica a um toque.

A barra com Comprar na Perigot Store e o WhatsApp acompanha a rolagem. As linhas sobem uma sobre a outra, e cada produto leva direto para a sua página na loja.

A lojaGravação real: da primeira tela à porta da Perigot Store.
As linhasGravação real: preço e botão em cada produto, e a barra de compra sempre à mão.
CelularPrimeira tela, a porta da loja, a prateleira com preço, o catálogo e o CEP.

(06)

Resultado

Um caminho até a loja, medido desde o primeiro clique.

O site novo é um protótipo de direção, no ar. Cada link para a loja leva a origem marcada, para medir o que o site traz.

42links para a Perigot Store, cada um com a origem marcada. Antes eram 0
2assinaturas, com o mesmo osso. Antes eram 7 nomes e 5 logos
1vermelho, #DA251A. Antes eram 8
390 KBpara abrir o site, medidos no protótipo. A home antiga pesava 8,5 MB

Antes

Depois

Nenhum link do site para a loja, em 40 páginas

Comprar na Perigot Store no topo, na primeira tela, em cada produto e na barra do celular

137 produtos sem preço e sem botão

Cada produto com foto, preço e link direto para ele na loja

Carrossel com quatro banners e um botão

Uma primeira tela: uma frase, um vídeo e um botão

Sete campos para achar um distribuidor

O CEP abre o WhatsApp com a mensagem pronta

Seis letras e dez estilos de botão

Duas letras e um botão