Function Health pioneered the first-ever package of over 100 lab tests, offered as a lifelong routine and interpreted by some of the world’s top doctors, tracking results over time.
We started with the brand identity and marketing site, all the while trying to look into the future of how the end product would take shape, knowing each “brick” we laid would have a heavy influence on the end product.
Our goal was to develop a brand and product that would embody the concept of moving from dysfunction to function. Our vision was to take something that can feel scary (like drawing blood) and create a simple, practical essence that still felt distinctly human and smart.
Function's word mark was designed to convey simplicity, approachability, and technicality. We later paired a san serif font with warm, inviting colors to create a balance between technicality and warmth. Even the white color used has a welcoming feel to it.
As part of our branding process, we imagined how we would like our charts to look and feel. This was an important step in focusing our efforts, even though we didn't fully understand how the data would be presented at the time.
To further refine our brand, we developed a marketing website targeting both investors & the general public. We locked in our key themes and created for ourselves guide posts for how we should judge dressing up messaging in later rounds.
Finally, we applied our brand system and other visual elements to present these messages on desktop and mobile devices, effectively communicating our key points to our audience.
We designed each section of the website to be visually appealing on both desktop and mobile devices, while also ensuring that the design did not hinder accessibility. As an added accessibility feature, we included a high contrast toggle button in the lower right corner of the screen, which is visible at all times and allows users to switch to high-contrast mode."
We tried to anticipate how some of Function's "widgets" might appear in the dashboard in the future. To illustrate the concept of "results over time," we created and animated Lottie graphics to get us closer.
To visually link the various sections of the website and guide the viewer's eye, we added a "connective thread" that is drawn on as the user scrolls. This thread connects each section of content and helps the viewer navigate through the site.
Below, we created an animatic of the homepage to help articulate and inspire the development team. This animatic served as a visual guide, enabling us to effectively convey our vision and provide direction for the development process.
After getting a better idea of what the data & requirements were — we began to design how the product would show up for the end user.
Now that we had a solid interpretation of the data from we started creating widgets that could express your results form a user with zero tests, to-many tests in the future, expressed on desktop and mobile alike.
Understanding that both desktop and mobile versions would be very important for different users and different use cases, we made both break points to maximize it's effectiveness for different use cases.
