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.
helias
case study 1 — 8
- website & marketing
- ecommerce, product
- 2019
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.
approach
don't 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.
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.
product line
4 blends
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
responsiveness in mind
mobile.mobile.mobile
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
servi
ces.
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
