Responses by Buzzworthy Studio.
Background: The purpose of this site was to put Helias’s beautiful products made from all natural ingredients on display while strengthening brand continuity both online and offline.
Since Helias only company with 100 percent pure essential oils on the market, it was our goal to engage its online visitors with natural elements and motion at first glance. We started by re-creating the movement of oil. Animated page transitions, a WebGL liquid scroll effect over images and flowing background colors in the hero section make this site fully immersive for users.
Design core: The core feature is our liquid scroll effect, built entirely from scratch. We also added multiple transitions—for hamburger navigation, shop drop down list, carousels and sliders—that respond to user behavior.
The entire design uses a minimal approach with brand imagery that gives the site a unique style. We want users to feel the product, so we decided to place the ingredients from each product near the bottle. The goal is to visually communicate the origin, quality and purity of every Helias product.
Favorite details: We like the scrolling effect we made: this adds a personal touch to the site. It’s also worth mentioning that our hamburger navigation has multiple microinteractions. Also, our page transition supports the overall concept while loading all the assets in the background. Lastly, we like how the empty cart behaves—as well as the 404 page.
Challenges: Working within the Shopify platform and customizing it as much as possible. We did this in three phases: First, we created static PHP templates where we did all our front-end magic: WebGL, interactions and animations for desktop and mobile. Next, we implemented the templates and connected them to Shopify. After we connected the templates and assets, the hardest work began. Shopify does not like experiments, and because we did a lot of custom work, we had to optimize and adjust the DOM, CSS and scripts to get rid of dozens of errors that occurred. A 30-minute job took hours at times.
New lessons: The most important thing was early planning. Because this was a complex build on Shopify, we didn’t quite know what challenges we were up against. We’ve built more than 100 custom WordPress sites, but less than ten on Shopify. We definitely confirmed what we believe: anything is possible, but it is all about the effort you put into a project. We made a few mistakes, but we learned from them and now are even better at manipulating templates and custom Shopify development work. We’ll be better prepared for our next project.
Navigation structure: We used two navigation modules on purpose: a hamburger navigation and a desktop navigation. The hamburger navigation acts as the primary navigation, as the site’s concept is with a mobile-first approach. The navigation is content rich and includes all the links to the sitemap and social channels.
For the desktop navigation, we extended the mobile concept, extracted the most important pages and made them easily accessible. The desktop user has a convenient way of browsing the products or main information about the company without entering the hamburger.
Technology: The site is built on the Shopify platform. We used AJAX to load content asynchronously because we had to eliminate page refreshing and add smooth scroll to page transitions instead. Another reason for using AJAX was to optimize the performance by loading all the assets only once, which keeps the site blazing fast.
One of the cool tech features we used is a Bodymovin library, a modern animation engine for creating very smooth animations. It is a React-native library that renders After Effects animations in real time. You can simply export your After Effects prototypes to the JSON file and then call it with Lottie.