IE < 9

Please update your browser for better experience

update now
Jasmine flower Jasmine flower Jasmine flower

helias

case study   1 — 8
  • website & marketing
  • ecommerce, product
  • 2019
Hand with herb

Helias approached us to redesign their eCommerce site in order to increase online sales and strengthen brand continuity online and offline. We created an immersive visual experience that exploits the natural motion of essential oils to fully engross the user inside their brand.

Jasmine flower
approach

don's sell. educate

With Helias being a new brand and essential oils being relatively new to pop culture, our strategy was to educate. We didn’t market to users, we’re teaching them about the benefits of essential oils and how to use them appropriately. We started digging through analytics data and heatmaps to learn more about the habits of their users. We found that consumers wanted more information to make a purchase. The architecture of the site is focused on user goals—learn about essential oils and their benefits in a compelling way and then click that pretty little buy button.

Imac preview
About page preview Brand mood image
Hand with flask
Oregano
challenge

cut the noise

Go to Amazon, search ‘Essential Oils’ and you’ll see what we mean about noise. A lot of companies have entered this space, many of them do it well and many do not—but they all create distractions. The core challenge for us was to get the buyer to buy this product and buy at a higher price point. That starts with the roots, literally. We showcased the exact ingredients, their origin, and aroma with copy that enforces the reason behind using high quality ingredients. We complemented this content with helpful information such as benefits, tips, and oil blend suggestions. Finally, we added a little “more flare” with animations, providing visual stimulus for the user, and an extra aesthetic dimension.

background orange slider
product line

4 blends

Sleep blend
Calm blend
Passion blend
Energy blend
Website mockups
features

natural movement of oil, animated.

We want the user to feel the spirit of Helias. We utilized the motion from oil as it dribbles down the inside of a bottle. Due to the vast array of animations, we use Ajax to load all the assets once and maintain optimal performance. We added multiple page transitions, animated hamburger navigation, and a custom drop down with distortion. Our favorite element is a liquid scroll effect that we as you scroll through images. We achieved this feature with Three.js and WebGL and built it from scratch. We optimized the scrolling and kept site speeds blazing fast

Flasks Flasks Flasks
Myrh Cedarwood
Empty cart Shopping cart
responsiveness in mind
Mobile screen
mobile.mobile.mobile
Mobile screens

Robert D'Ambrosio — co-founder & CFO

The site now has a modern, unique appearance that is distinct in its industry. The final product helps us to target more customers and it ranks us high in organic search since we launched.

Bounce
Rate

0%

Sessions
Over 3
Months

0%

Average
Order
Size

0%

awards

1 x Honorable Mention 1 x Mobile Excellence
1 x Website Of The Day 1 x UX Award 1 x UI Award 1 x Innovation Award
1 x Featured Of The Day
Jasmine flower

servi
ces.

data migration

Helias was working on the Shopify previously with their previous agency. We were able to use a simple plugin to sync the products, inventory and other data that transferred over to our custom theme. Saved both teams a lot of time.

shopify back-end

We chose Shopify as the platform because it’s easily customizable and the CMS is very friendly for our client. We’re very familiar with Shopify, it’s rock solid, and we can manipulate to look, feel, and function the way we want.

creative front-end

The site is injected with the latest technologies thanks to which we created multiple interactive features. The site uses virtual page loads in order to serve the content instantly on desktop and mobile.

animations

We use 3 types of animations. The main scrolling animation - which is powered by tree.js a WebGL library, full-screen animations and micro-animations achieved with GSAP library by GreenSock.

SEO

In order not to disrupt organic search performance throughout the dev process, we analyzed historical performance data, set up URL redirects, ensured that URL structure and navigation paths remained constant, wrote improved meta tags, and ran site audits prior to, and post launch.

next project

betches
arrow es