Bellagio

Contexto

A Bellagio vende vinhos, cervejas, whiskies e outros destilados, e mantém um clube de assinatura — o Club Bellagio. O catálogo reúne produtos que se parecem na prateleira e não se parecem em nada na hora de escolher.

Quem compra vinho decide por paladar e harmonização. Quem compra cerveja decide por tipo e composição. Quem compra whisky costuma decidir pela marca e pela história dela. Um catálogo único que tratasse os três da mesma forma ia atender mal os três.

Desafio

O projeto tinha três problemas empilhados:

• Critérios de escolha incompatíveis entre categorias. A mesma listagem precisava servir a quem procura um tinto encorpado e a quem procura uma lager alemã de 500 ml.
• Densidade de informação alta por produto. Composição, teor alcoólico, temperatura, decantação, harmonização, país, volume — tudo relevante, nada dispensável.
• Marca sem sistema visual definido, precisando funcionar do rótulo de vinho ao rótulo de cerveja sem parecer duas lojas diferentes.

Meu papel

Atuei no design de interface e na identidade visual do produto, desenhando desktop e mobile e definindo o sistema que sustenta as duas versões:

• Sistema de cor por categoria de produto
• Arquitetura do catálogo e da listagem
• Página de produto e ficha técnica
• Fluxo de compra e de acesso ao clube
• Tipografia e elementos de marca
• Interface responsiva para desktop e mobile

Sistema de cor

A cor não foi escolhida por gosto: cada primária corresponde a uma categoria e vem da própria bebida. Magenta e vinho para vinhos, âmbar para whiskies, laranja para cervejas, sobre um fundo grafite que deixa o rótulo ser a única coisa colorida da tela.

Isso resolve um problema de navegação sem gastar espaço: em qualquer ponto do site, a cor diz em que corredor você está. Nas listagens, uma barra vertical em gradiente acompanha a variação real do produto — do lager claro ao porter escuro, do branco ao tinto — funcionando como escala visual da própria categoria.

Catálogo

A listagem tem duas colunas de atributos que mudam conforme a categoria. Em vinhos, elas mostram Paladar e Combina com. Em cervejas, Tipo e Composição. A estrutura é a mesma, o conteúdo é o que aquele comprador específico usa para decidir.

A segunda decisão foi permitir comprar direto da listagem, com seletor de quantidade e botão de adicionar em cada item. Numa compra de bebidas o carrinho raramente tem um item só — obrigar a entrar e sair da página de produto a cada garrafa transformaria uma compra de seis itens em doze navegações.

Página de produto

A página de produto trata a ficha técnica como argumento de venda. Em vez de esconder os dados atrás de uma aba, ela os organiza em blocos legíveis: a história do produtor, a composição, aroma e paladar, e a harmonização em destaque próprio.

Acima da dobra ficam apenas os elementos da decisão imediata — nome, classificação, origem, avaliação, preço e o botão de adicionar, com o cálculo de prazo de entrega ao lado. Quem já sabe o que quer compra ali; quem quer entender rola e encontra o resto.

Marca e tipografia

A tipografia é a Uni Sans, em quatro pesos. É uma sem serifa geométrica de terminações retas, que segura títulos em caixa alta sem ficar decorativa e mantém legibilidade nos textos densos da ficha técnica — os dois extremos que a interface exige.

O grafite #2D2926 é a base de toda a marca. Sobre ele, a cor da categoria aparece em doses pequenas — barra de gradiente, botão de adicionar, destaque de preço — e a fotografia do rótulo fica sendo o elemento mais colorido de qualquer tela.

Mobile

No mobile, a listagem vira card por produto, mas mantém o essencial que o desktop mostra: tipo, volume, país e preço acima do botão de adicionar. A ficha técnica passa a ser vertical, seção a seção, e o menu vira gaveta — com as categorias na mesma ordem e nas mesmas cores do desktop.

O login do clube foi reduzido a e-mail, senha e um caminho claro para quem ainda não é assinante, sem competir com o catálogo.

Stack e ferramentas

Design

Adobe XD · Photoshop · Illustrator

Marca

Sistema de cor por categoria · Uni Sans

Escopo

Desktop e mobile · Catálogo, produto, carrinho e clube

Método

Arquitetura de catálogo · Design de interface · Identidade visual