Already operating as the world’s largest coconut water brand, Vita Coco knew that expanding their line of natural coconut products into coconut milk and coconut oil would likely result in wider distribution and more opportunities as a brand. They tasked HYFN with developing a web experience that would support their efforts to drive trial and adoption of their full range of products. Tangible goals included increasing page views per session as well as overall time spent on site. With the need to adapt to 18 different global markets, the site also required a custom, responsive content management system.
ClientVita Coco
AgencyHYFN
Year2017
RoleArt Direction, Motion Design
RecognitionGold Communicator Award of Excellence
Web Design, MotionVita Coco Website Relaunch
To encourage adoption of these new product categories, we first needed to educate consumers—both on the benefits of coconut products in general, as well as their broad range of uses. Everything we created needed to inspire trial and drive purchase consideration in a snackable, while still helpful, way.
We approached the site experience as a consumer-centered resource, including content such as inspirational recipes and suggested uses via a blog section—all with the intention of highlighting the numerous ways Vita Coco fits into any lifestyle. The story of each individual product unfolded on robust detail pages that went beyond basic information to include these recipes, benefits, FAQs, and more, providing opportunities to explore other sections of the site. As an added value to visitors, we also programmed the homepage to be adaptive based on time of day, ensuring customers were always being served relevant content upon visiting.
I
User ExperienceFueling the Coconut Craze
Our goal was to add clarity and structure throughout the site to create a cohesive experience. The absence of this essential hierarchy was holding visitors back from discovering the great stories Vita Coco was trying to tell.
To combat this in our approach, we focused on only telling one piece of the story at any given time, allowing elements to breath on the page. While we moved away from the illustrated/watercolor style that was previously being used to establish the Vita Coco feel, we utilized animations, dynamic hover states, and energetic design elements to help bring the fun Vita Coco brand personality to life.
DesignDeveloping a Story
II
Website ScrencaptureComponent: Category Selection Module
Component: Variant Selection Module
Component: Product Detail Module
Page: Homepage
Page: Product Category
Page: Product Detail
CMSA core need for Vita Coco was an update to the dated Wordpress back end that was powering their nearly two dozen sites. HYFN worked with the Vita Coco team to understand the structure of their organization as it stood and designed the CMS to reflect.
We centralized control over the core product line and certain content, developing a hierarchy where global administrators could set up content and product templates to then be released to individual market administrators for further customization. This allowed for seamless edits to copy, images, etc. to be made to reflect local cultures, while making the entire workflow minimally labor intensive.
III
DevelopmentEfficiency Over Everything
PerformanceDue to the image-heavy look the content demanded, performance of the site was a major consideration. To help keep things efficient, we set up a dynamic image generation service that allowed the front end to generate and display images tailored to the capabilities of the user's browser, ensuring that visitors were quickly served the best quality images. For the pages themselves, we used a hybrid client/server rendering strategy, allowing the site to be navigated without full page loads. In other words, pages loaded more quickly, looked better, and now worked intuitively for nearly two dozen global markets.
Creative DirectionNick Boes
Art DirectionGeoff Roseborough
UX DESIGNJasmine Pay
ProducerSusan Kirksey
DevelopmentDaniel Leavitt
Tom Krenzke
Melanie Windh