Helias Oils

18 DE JAN 2020 role para ver detalhes

O Projeto

A Helias nos procurou para redesenhar seu site de e-commerce com o objetivo de aumentar as vendas online e fortalecer a continuidade da marca online e offline. Criamos uma experiência visual imersiva que explora o movimento natural dos óleos essenciais para envolver totalmente o usuário na marca.

Resultados

AUMENTO DE RECEITA M/M

+36%

ROAS

136seg.

TEMPO MÉDIO NO SITE

QUEBRANDO O COMUM

Desafio

Sendo a Helias uma marca nova e os óleos essenciais ainda relativamente recentes na cultura popular, nossa estratégia foi educar. Em vez de fazer marketing para os usuários, ensinamos sobre os benefícios dos óleos essenciais e como usá-los corretamente. Começamos mergulhando em dados de analytics e mapas de calor para entender melhor os hábitos dos usuários. Descobrimos que os consumidores queriam mais informação para realizar a compra. A arquitetura do site é focada nos objetivos do usuário — aprender sobre óleos essenciais e seus benefícios de forma envolvente e então clicar naquele lindo botãozinho de comprar.

Corte o ruído

Direção de arte

A direção de arte do projeto captura com precisão o fluxo orgânico do óleo. Com linhas sinuosas, atenção minuciosa a cada ingrediente, layouts expansivos e uma tipografia robusta, criamos uma estética visual marcante. Isso não só representa a essência da marca, como também eleva o produto estrategicamente, facilitando seu posicionamento em uma faixa de preço mais elevada.

https://images.prismic.io/buzzworthy/ZiKwLfPdc1huKpbb_mood-03-2x.webp?auto=format,compress

https://images.prismic.io/buzzworthy/ZiKwLvPdc1huKpbc_mood-01-2x.webp?auto=format,compressundefined

Movimento natural do óleo

Animações

Usamos o movimento do óleo escorrendo pelo interior da garrafa. Por causa da grande variedade de animações, recorremos ao Ajax para carregar todos os assets de uma vez e manter a performance no topo. Adicionamos múltiplas transições de página, navegação hambúrguer animada e um dropdown personalizado com distorção. Nosso elemento favorito é um efeito de scroll líquido enquanto você passa pelas imagens. Implementamos esse recurso com Three.js e DigitalGL, construído do zero. Otimizamos o scroll e mantivemos as velocidades do site velocíssimas.