Responses by Active Theory.

Background: The Fiomet site introduces two different healthcare products, Smartrap and PPOD, under one umbrella brand as Fiomet. Smartrap, a smart leg garment with sensors and compression technology, is mainly for athletes looking for high-quality gear to monitor and maximize their performance. PPOD, a cranial device worn by infants designed to improve their head shape, is targeted towards parents and medical professionals. By combining informative marketing material with an engaging, premium user experience, our site design helps Fiomet establish legitimacy in the wellness and healthcare space. Ultimately, this site is intended to showcase more than only these two products, acting as a destination for future Fiomet products.

Design core: Product pages that provide high-level, digestible information about technically advanced products. The messaging on the site is streamlined and simple to understand while still being rich and informative for the wide target audience. From a design standpoint, the site has a clean, futuristic look and presents the material in a series of easily navigable, fullscreen 3-D sections, each of which is designed to highlight a specific product feature. To reflect the differences in the products, the site’s design follows a two-sided art direction: a dark, moody tone for the Smartrap; and a softer, more playful approach for the PPOD.

Favorite details: The transitions and interactive elements. The portal-like animation as you enter each product page immerses the user into the design for each section from the very beginning, and the buttery smooth scrolling and transitions give the site that polished, premium feel. The animated backgrounds also create a more immersive experience as the user explores different product features, and the interactive 3-D models add those extra touches of creativity and functionality.

Challenges: Creating a cohesive look and feel for the site to balance the dark-light art direction for the Smartrap and PPOD pages. Since we were tasked with making one digital experience for different audiences, we had to find a way to represent the differences in the products while still creating a singular, immersive experience.

To do this, we implemented a lateral transition that enables the user to move between the dark and light sections of the site seamlessly, avoiding a hard cut between the contrasting backgrounds. And despite the black-and-white contrast, the whole site is tied together by its overall clean feel, limited color palette, thin lines and balanced page layouts.

Navigation structure: Our goal was to make the site easy to navigate, both within and between sections, while still giving users the freedom to explore in various ways. The landing page and header menu allow one to freely switch from one section of the site to another. Within the product sections, users can explore the features by scrolling, keyboard navigation, bullets, native scrollbar and dragging. They can even drag to rotate a 3-D model of each product to view it from different angles and perspectives.