54 :: Webdesign
TEMPOS
MODERNOS
NA INDÚSTRIA
DE BEBIDAS
Modernos já sabemos que os novos tempos são! Agora, nesta sentença não podemos deixar de
incluir a experiência digital que uma marca passou a ter no relacionamento com o seu consumidor.
Como conseqüência imediata destas transformações, muitas empresas têm aberto suas portas
para revelar como funciona o processo de fabricação de seus produtos. E hoje esses caminhos vão
muito além do mundo físico.
Um exemplo recente vem da Bohemia (www.bohemia.com.br), que decidiu convidar seus
clientes para um passeio especial, através da disponibilização de uma fábrica virtual em 3D,
desenvolvida pela agência paulista Player Comunicação Digital (www.playercom.net).
Conversamos com o trio de sócios da empresa, Rodrigo Pereira (diretor executivo e comercial),
Leandro Mayer (diretor de tecnologia e operações) e Tatiana Shibuya (diretora executiva e
comercial), que revelam as etapas para construção deste projeto.
estudo de caso - Bohemia :: 55
Wd :: A Ambev é uma das empresas que mais
Wd :: Ao acessar o endereço www.bohemia.com.
tem investido na produção de projetos digitais
br, o usuário se depara com uma página inicial. Além
inovadores. Quais foram os aspectos determinantes
do habitual aviso de limite de idade, comum no site
para que a Player conquistasse o projeto da fábrica
de fabricantes de cerveja, vocês colocaram outras
de cerveja virtual em 3D, que levou cerca de um ano
duas recomendações: melhor visualização em tela
para ser concebido e envolveu o trabalho de mais
(1024x768) e o uso de fones de ouvido. Por que vocês
de 30 profissionais?
decidiram colocar este último aviso, uma prática ainda
Player :: Somos a agência digital de Bohemia
desde 2002. A marca começou sua história na
pouco comum em sites interativos no país?
Player :: Aplicamos alguns efeitos sonoros gravados
internet pelas nossas mãos e estabelecemos uma
em estéreo que são melhor percebidos com a utilização
relação de parceria.
de fones de ouvido. Além de preparar o usuário desde
Com esse tempo, conquistamos o jeito de trabalhar
o começo, para atingir uma ótima experiência de
Bohemia. Hoje, sabemos antes de qualquer briefing,
navegação, é uma forma simples de avisá-lo de que o site
como Bohemia deve se apresentar, deve se comunicar,
em que ele está prestes a entrar tem som, e se quiser
principalmente na internet.
pode aumentar ou diminuir o som de seu fone ou caixas
Este projeto foi um desafio, nunca escondemos
isso da Ambev, que depositou toda a confiança
acústicas. Nada pior do que um site que de repente
assusta o internauta com música no último volume!
em nosso trabalho. Quando sentimos esta
confiança vinda de um cliente, pode apostar que
Wd :: A idéia deste projeto foi conceber um
o envolvimento é maior do que quando um cliente
período de experiência on-line, no qual o usuário
cobra ou desconfia da entrega.
pudesse visitar um modelo virtual em 3D de
No fim, o que mais credenciou a Player a
uma fábrica de cerveja. Em termos de criação e
conquistar esse sentimento, para um projeto em que
planejamento, o que foi preciso trabalhar para se
perfeccionismo e planejamento eram fundamentais,
garantir uma concepção adequada de roteiro?
foi justamente o sucesso crescente do site de
Player :: Desde o princípio, percebemos que
Bohemia, criado e gerenciado pela Player, e suas
esse site não poderia seguir um roteiro comum, que
consecutivas atualizações.
nos casos mais simples envolve o título da seção, sua
E hoje atendemos ainda Brahma, Chopp Brahma,
descrição e seu conteúdo. Então, resolvemos pensá-
Site Ambev e um novo projeto, a ser lançado em
lo como um curta-metragem, em termos de criação e
breve e que envolve todas as marcas da companhia.
desenvolvimento.
56 :: Webdesign
Primeiro, todo o passeio foi decupado: descrevemos o
Imperial brasileira. Seu entusiasmo em guiar cada passo
que deveria acontecer em cada momento. Então, estruturamos
ali dentro é tanto que ele trata a todos como Aprendizes.
todo o roteiro de conteúdo em três colunas: “Áudio” (a
O que é perfeitamente adequado: ao final da jornada pela
locução), “Vídeo” (o que deveria aparecer na tela naquele
Sala do Mestre, Fábrica e Armazém Bohemia, o visitante
momento) e “Texto” (a legenda ou conteúdo em questão).
terá se qualificado com honra e louvor como um legítimo
Também sempre consideramos a usabilidade do site, e a
Aprendiz de Mestre Cervejeiro de Bohemia.”
possibilidade de deixar que o usuário descobrisse o conteúdo em
um passeio lúdico tanto pelas salas quanto pelo menu de apoio.
Wd :: Um dos destaques deste projeto é a qualidade
da modelagem em 3D dos elementos que compõem a
Wd :: Ainda sobre o roteiro, a divulgação oficial
interface do site. Quais foram as etapas de produção
relata que um mestre cervejeiro, "guardião da tradição
envolvidas e o tempo despendido em cada uma delas
e do conhecimento sobre cerveja", funciona como
para que a fábrica virtual se tornasse uma “realidade”?
o guia da navegação. Que tipo de referências vocês
Player :: As etapas tiveram duração muito
utilizaram para que a criação do projeto realçasse os
variável, em geral de um a três meses, dependendo
valores de tradição, de requinte e do conhecimento da
da rotina de aprovações. A primeira delas envolveu o
marca sobre tal segmento?
desenvolvimento dos “concepts” e dos desenhos de
Player :: Ao longo dos anos em que produzimos
o site de Bohemia (desde 2002), desenvolvemos e
aperfeiçoamos o personagem do Mestre Cervejeiro,
todos os ambientes e objetos que compõem as cenas, o
que levou mais de um mês.
Em seguida, passamos para a modelagem do 3D
usado em uma campanha da época e transformado na
propriamente dito, o que consumiu uns três meses.
interface do usuário com a marca.
A terceira parte foi a definição do percurso interno
Por exemplo: há anos, o consumidor que escreve
pela fábrica, acertando os movimentos de câmera e
para o site recebe uma resposta com a “personalidade”
enquadramentos para inserção do conteúdo (Animatic).
do Mestre. Dessa forma, dar voz a ele foi apenas mais
Nessa fase, a fábrica ainda se encontrava em wireframe.
um passo. Também traçamos um perfil detalhado do
Na quarta fase, definimos as cores e as texturas dos
personagem para nos ajudar a criar toda a linguagem do
modelos dos ambientes e dos objetos, o que levou, em
Mestre e a escolher o locutor que o interpretaria. Segue
média, mais um mês. A quinta etapa foi o shading e a
um trecho, para ilustrar:
iluminação, quando definimos as propriedades reflexivas
“Nesta visita à Fábrica Bohemia, o Mestre Cervejeiro
dos objetos, processo importantíssimo para o realismo
é o mais orgulhoso anfitrião. Ele está ao lado do visitante
das cenas. A materialidade dos objetos foi acertada.
o tempo todo, contando histórias, envolvendo-o não só
Juntamente, definimos a iluminação dos ambientes,
com informações, mas também com o clima e o charme
processo fundamental ao realismo do 3D. Todos os
de um segredo que remonta aos tempos da Família
ajustes nos tomaram pouco mais de um mês.
estudo de caso - Bohemia :: 57
A sexta fase envolvia o render, no qual foram
Sala do Mestre; Fábrica; e Armazém Bohemia. Quais
geradas as bases das imagens que iriam compor os
fatores influenciaram para que vocês chegassem
filmes. Todas as cenas foram geradas em layers, e o
nesta divisão do conteúdo a ser apresentado?
processamento das imagens levou cerca de um mês.
Por fim, a sétima e última fase: a composição.
Player :: Tínhamos uma missão clara com este site,
que era contar a história da produção de uma cerveja
As imagens geradas do 3D em layers foram unidas e
de qualidade, como Bohemia. Essa história deveria ser
compostas, acertando as cores das cenas, a iluminação,
contada dentro de um percurso, a Fábrica Bohemia.
os efeitos, e unindo as cenas para conseguirmos a
Sabíamos o conteúdo que queríamos inserir no site. A
sensação de continuidade de um ambiente ao outro
partir daí, pensamos os ambientes principais que essa
ao longo do passeio. Para isso, precisamos de pouco
Fábrica poderia ter, e como esses ambientes e seus
mais de duas semanas. Alguns ajustes finais ainda
elementos poderiam ser metáforas ou ilustrações dessa
aconteceram conforme as imagens começaram a ser
nossa história.
usadas na construção das telas do site.
Seguindo um agrupamento lógico das informações,
dividimos cada ambiente. O conteúdo que tratava
Wd :: Além da interatividade e do uso do 3D, o site
da mística do Mestre, seus estudos e segredos foram
possui sons ambientes (narração do mestre cervejeiro,
para a Sala do Mestre. Tudo que se referia ao processo
barulho das máquinas da fábrica, fundo musical etc.)
de produção da cerveja foi para a Fábrica. E os itens
que ajudam a reforçar o conceito do projeto. Quais
que representam fisicamente esses universos (copos,
foram os investimentos necessários para que esta
taças, acessórios etc.) estão no Armazém. Tudo isso
funcionalidade fosse implementada no ambiente?
é acessado a partir, claro, do Hall de Entrada, que
Player :: Como pensávamos o site em termos de uma
conecta todos esses mundos.
“obra completa”, também foi natural que percebêssemos
desde o começo a necessidade de parceiros
Wd :: No canto inferior direito do site, vocês
especializados, no 3D e na produção sonora e musical.
disponibilizaram algumas ferramentas úteis para
Assim, eles também foram chamados para pensar os
orientar o usuário. Em qual etapa da produção vocês
aspectos criativos do site, dentro de suas especialidades.
definiram a importância e como esta funcionalidade
ficaria disposta na interface do projeto?
Wd :: Ao entrar no hall da fábrica, o usuário
Player :: Sempre vimos o site de Bohemia como
começa a segunda etapa da navegação, onde possui
uma obra que demandaria inúmeras especialidades.
três opções principais para seguir o seu caminho:
Então, não nos limitamos a buscar referências na
58 :: Webdesign
internet, até porque era nosso objetivo fazer algo
completamente diferente do que havíamos visto.
Assim, a interface e a lógica de games de aventura
Wd :: Podemos dizer que a tecnologia foi um
dos elementos essenciais para tornar este projeto
viável. Quais foram os parâmetros utilizados na
e RPG também influenciaram nossa concepção. A
hora da escolha da plataforma de desenvolvimento
estrutura de “painel de controle” nos pareceu adequada
tecnológico deste site?
para que o usuário não se perdesse e, ao contrário,
Player :: Utilizamos como plataforma server-side
tivesse instruções claras sempre à mão para realçar a
o Microsoft .NET Framework e banco de dados SQL
experiência de navegação.
Server. Há muito tempo trabalhamos com o formato de
Também sempre buscamos a máxima usabilidade
em nossos projetos. Todos os detalhes de navegação
integração de Flash e banco de dados.
Toda a interação entre Flash e aplicações server-
começam a ser definidos no primeiro momento da
side do site é feita por intermédio de webservices,
criação, e são registrados no wireframe do site.
onde temos total controle do status das informações
trafegadas. Isso proporciona a segurança de que
Wd :: Um aspecto interessante deste projeto está
não teremos informações gravadas pela metade ou
presente na passagem entre as seções, cujo carregamento
informações perdidas. A plataforma .NET nos permitiu
apresenta dicas de navegação pelo ambiente e um
um desenvolvimento estruturado e rápido, o que foi
texto explicativo sobre o espaço a ser visitado. De que
crucial no decorrer do projeto.
maneira estes detalhes ajudam a enriquecer o período de
experiência do usuário pelo ambiente?
Player :: Essas dicas foram inseridas entre
Wd :: Ao analisar o código-fonte do site, é possível
perceber o uso do Google Analytics como ferramenta
as passagens de seções para cobrir o tempo de
de métricas. Diante da experiência, vocês acreditam
carregamento das páginas com informações úteis sobre
que ela seja uma opção segura para auferir resultados
o site. Foi uma maneira de tornar essa espera ao mesmo
de projetos interativos? De agosto (época do seu
tempo útil e agradável, já que sabíamos que a navegação
lançamento) aos dias atuais, que tipo de retorno o
diferenciada poderia oferecer desafios.
projeto trouxe até o momento?
Player :: O Google Analytics possui algumas
Wd :: Dados recentes do IBOPE//NetRatings
instabilidades em seus resultados, mas que não prejudicam
revelam que o usuário brasileiro gasta uma média de
a avaliação do projeto. Suas ferramentas e filtros nos
20 a 23 minutos mensais de navegação pela internet.
proporcionam uma ótima ferramenta de métricas.
Neste projeto, há um variado e extenso conteúdo
Mensuramos toda a navegação do usuário, de onde
a ser consumido e muitas opções interativas para
ele veio, para onde foi, quais as seções de maior interesse
que seja realizado um processo total de imersão,
etc. Acreditamos que seja uma ferramenta segura, porém
sendo que o usuário pode seguir um caminho
procuramos sempre guardar o histórico dos dados.
linear ou escolher sua própria rota. Em termos
A antiga média de visitas era de 11.069; hoje temos uma média
de planejamento, qual foi o tempo de navegação
de 46.818 visitas e 381.315 pageviews. Convidar o cliente a interagir
estimado e o que foi detectado na prática?
com a sua marca e ser aceito já é um dos maiores retornos.
Player :: A versão anterior do site tinha um tempo
Quando este cliente permanece interagindo
médio de navegação de 2min30 por usuário, o que já é
durante tanto tempo, pelo simples prazer do
um número muito consistente, comparando com a média
entretenimento e informação, justificam-se todos os
de navegação do usuário brasileiro. Com a publicação da
nossos esforços e investimentos. E isso principalmente
fábrica virtual, o tempo médio passou para cerca de 10
quando falamos de internet, meio que disputa a atenção dos
minutos por usuário, resultado esse que ultrapassou as
usuários de forma agressiva e mutante. Prender a atenção na
expectativas do cliente e de nossa equipe.
rede é o nosso maior desafio.