Edgard Genaro Curitiba, BR

Todos os cases

Case 09 / 11

Coco Bambu

Análise do site e das páginas de evento, e um padrão novo que põe o prato na primeira tela.

Cliente
Coco Bambu, rede de restaurantes de frutos do mar, desde 1989
Meu papel
Análise de UX e UI, direção de produto, design e construção do site e das landing pages
Entregas
Análise do site e das páginas de evento, proposta de site novo, modelo de landing page em duas versões (eventos e reserva de mesa) e design system com guia de uso
AberturaA marca se desenha, a câmera entra pelo coco do papagaio e a primeira tela mostra o prato, a reserva e a casa mais perto.

Problema e solução

Problema

A campanha da Coco Bambu é escura, vinho e dourada, com o prato da casa em destaque. O site e as páginas de evento falam de outro jeito: o banner corta a arte até no tablet, o prato aparece em miniatura e o pedido de orçamento tem sete campos e uma conta de somar. A mesma casa ainda aparece com números diferentes em duas páginas.

Solução

Um padrão só, no tom da campanha: uma proposta de site que começa pelo prato e um modelo de landing page em duas versões, para eventos e para reserva de mesa. O botão fica sempre à vista, o texto é escrito de verdade e cada informação aparece com um número só.

(01)

Análise

A marca fala de um jeito. O site e as páginas, de outro.

Olhei o site e a página de eventos como um cliente olha, atrás do prato. Três slides com o que vi e o que medi, e o processo até aqui.

Três telasA campanha, o site e a página de eventos lado a lado.
Três telasA campanha, o site e a página de eventos lado a lado.
O caminho até o pratoCinco paradas no celular, e o prato nunca aparece grande.
O caminho até o pratoCinco paradas no celular, e o prato nunca aparece grande.
O que mediA página de eventos e o banner, medidos na tela.
O que mediA página de eventos e o banner, medidos na tela.
ProcessoDo olhar de cliente ao site e às páginas, em cinco passos.
ProcessoDo olhar de cliente ao site e às páginas, em cinco passos.

(02)

Site

Um site que começa pelo prato.

Uma proposta de site novo, montada com o que a Coco Bambu já publica, fotos, cardápio e dados das casas: a abertura da marca, a busca das casas, a página de cada casa com cardápio e reserva. O prato aparece grande desde a primeira tela.

PratosOs clássicos da casa, em fotos grandes e com nome.
MomentosUma casa para cada momento, do almoço em família ao casamento.
ReservaReservar mesa leva à busca. A casa escolhida abre a página já na reserva, com os horários dela.
BuscaDigitar o nome da casa leva ao cartão dela e ao mapa.
MenuA Carta: o menu é um cardápio impresso, com a foto que acompanha o item.
A casaHorário, endereço, contato e delivery logo abaixo do topo. Depois vêm as fotos, o cardápio com preços e os salões.
CasaO que a pessoa procura vem primeiro: horário, endereço, contato e delivery.
CardápioO cardápio da casa, com foto grande, nome, descrição e preço.
ReservaA reserva numa moldura só: dia, horário, pessoas e ocasião.
EventosOs salões de eventos, dentro da própria casa.
CelularA barra fica ao alcance do polegar.
InícioA primeira tela, com a barra de ações embaixo.
MenuA Carta sobe como uma folha.
CasaA casa, com Ligar, Rotas e Reservar à mão.
PratosOs clássicos, num trilho de fotos grandes.
MomentosCada momento, com a foto da casa.
CardápioO cardápio, com a foto do prato grande.
ReservaReservar, sem sair da página.

(03)

Landing pages

Um modelo, duas páginas.

A mesma estrutura serve para pedir orçamento de evento e para reservar mesa em Botafogo. A ordem dos blocos, o visual e os botões não mudam. Muda a pergunta e o que acontece no fim.

ModeloDez blocos na mesma ordem, em duas versões.
ModeloDez blocos na mesma ordem, em duas versões.
EventosA calculadora indica o salão. O pedido avança em etapas curtas, uma pergunta por vez.
InícioA primeira tela, com o botão do pedido já à vista.
CalculadoraQuantos convidados? A resposta é o salão certo.
ServiçoQuatro formatos, em cartões que se empilham.
PedidoO pedido em três etapas, uma pergunta por vez.
ReservaA calculadora indica a mesa. A reserva é a agenda oficial da casa, dentro da página.
InícioA primeira tela da reserva de mesa.
CalculadoraQuantas pessoas? A resposta é o tipo de mesa.
A casaO que vem junto com a mesa, item por item.
AgendaA agenda oficial da casa, dentro da página.
CelularO botão do pedido fica fixo embaixo.
InícioEventos, na primeira tela.
PedidoO pedido, uma pergunta por vez.
MesaReserva, a calculadora de mesa.
SalãoEventos: a calculadora indica o salão.
ServiçoOs formatos de serviço, um por cartão.
InícioReserva, na primeira tela.
AgendaA agenda oficial, dentro da página.

(04)

Design system

Um padrão para o site e para as páginas.

Vinho, ouro e linho, botões em pílula e o prato em primeiro lugar. As pranchas saem do código do site e das páginas, e o guia diz quando usar cada coisa e onde as duas partes se parecem.

CoresAs cores: vinho, ouro e linho, de noite e de dia.
CoresAs cores: vinho, ouro e linho, de noite e de dia.
TipografiaA escala de texto do site e a Roboto leve das páginas.
TipografiaA escala de texto do site e a Roboto leve das páginas.
FormaCantos, moldura, espaço e movimento.
FormaCantos, moldura, espaço e movimento.
ComponentesOs componentes do site, de noite e de dia.
ComponentesOs componentes do site, de noite e de dia.
Landing pagesAs landing pages: cores, botões, calculadora e cartões dos salões.
Landing pagesAs landing pages: cores, botões, calculadora e cartões dos salões.
GuiaSete regras, e o que é igual, parecido ou diferente entre o site e as páginas.
GuiaSete regras, e o que é igual, parecido ou diferente entre o site e as páginas.

(05)

Resultado

O mesmo pedido, mais fácil e mais leve.

A página oficial de eventos de Botafogo e o modelo novo, medidos do mesmo jeito, e o que ajustei pelo caminho.

Antes e depoisA página oficial de eventos e o modelo novo, medidos do mesmo jeito.
Antes e depoisA página oficial de eventos e o modelo novo, medidos do mesmo jeito.
AjustesNada saiu certo de primeira: as trocas que mais mudaram o resultado.
AjustesNada saiu certo de primeira: as trocas que mais mudaram o resultado.

O que muda para quem pede

O botão está na primeira tela, o pedido faz uma pergunta por vez e o salão ou a mesa certa aparece antes da decisão. Para as outras casas, a mesma estrutura serve: troca-se o conteúdo, e o visual, a ordem dos blocos e os botões ficam como estão.