HURU

HURU backpack

Online shop

Huru brand concept stands for nullifying limitations – it’s a premium quality backpack suitable for tourism and everyday use.

When Oleg Vlasenko (Founder of Huru) came to our office with the backpack and started presenting his product, we were amazed. He went on about lots of details and features, and about the production and how they sew it and the materials. About its previous versions and plans for the future. He was so passionate about it. The objective of the website became clear to us. If we managed to showcase the product at least half as good as he did, that would be a success. So we started exploring all the numerous features and tiny details of the backpack, imagining how we can communicate them to the customer.

Services

Website design and development

Content creation, photo- and video shooting

Sector

E-commerce

Fashion

We had seen photos of the product before, but actual product felt and looked much better than on those photos. We organized additional photo and video shooting to show cloth and details in macro.

In fact, Huru backpack has so many features, that it seemed too much to have all of them on one page. Thus, we came to the decision to show core features on the Home page and explore all the details on the Product page.

We used graphics and animations to add up to the story, to give allusions to the ways the backpack can be used: boat, sea, mountains and dynamic city life. Because, after all, pictures won’t share the feeling of comfortable and unique exploitation as bright as the motion does.

Homepage

We give an overview of the product, mention the main features: water resistance, transformability, compartments for everything. We combined short videos and photos to give this information certain emotional tint.

The page ends with a 360-degree view of the product to give the user a profound understanding of how it looks and feels.

Product page

With a product card on the top, here we itemized information about exploitation, size, materials, features and complements.

Furthermore user can get a glimpse at other people’s styles.

About us

On this page, customers or potential partners get to know the origin of the brand and meet the team members. Such personal touch allows attracting people who share the same values and appreciate the story behind the product.

Blog

The blog contains short articles about exploration, freedom as a lifestyle, it’s a powerful tool to spread Huru’s philosophy.

Mobile version

The website is well adapted to all screen sizes and devices. The mobile version maintains full functionality and does not limit the user experience.

Animations

While developing animations we used an associative approach to illustrate the product features. The idea behind the animations was to compliment the style of the backpack and the idea behind the brand. Initially we designed the motion in After Effects, and subsequently used Bodymoving and Lottie libraries to create animated svg’s.

Marketing Materials

We were also responsible for some photo and video production for the website and future marketing campaigns. Even with a limited budget, we intended to create something that would make everyone fall in love with the product the way we did. We put a lot of effort into creating this content.

Results

After we launched the website in the very first month it had more than 42 thousand unique visitors and website traffic increased by more than 5000%. We received multiple feedback and were able to exceed the expected marketing goals.

Technologies

We used WordPress and WooCommerce for back-end management. The front end is based on Zurb Foundation framework.

Slides transitions were done with Greensock Animation Platform, which gave full control over the animations and created smooth transitions.

The animation of the shapes on the front page has been realized with After Effects and then rendered into SVG through the Bodymovin plug-in using JSON files. This technique creates several advantages such as better control over the animations while making it possible to provide one single JSON file containing all the information needed for the proper functioning of the animation (which is perfectly controllable through javascript and the Bodymovin.js framework). This technique also enhances compatibility through devices and the lightness of exported files.

  • Frontend Frameworks and Libraries: Zurb Foundation, jQuery, GSAP, bodymovin, ScrollMagic
  • Backend Technologies: WordPress, WooCommerce
  • Server Architecture: Apache, PHP
behance dribbble facebook linkedin crunchbase works cup home mail marker team