48
4.8
48

Ultra fast-loading & tech-looking corporate site for Primary Care provider in the US

Product details:

Frontend dev
Management
Web design
Webflow
Corporate
Webflow
Healthcare

Project scope

Vitable Health is an enhanced Primary Care membership that makes it easy for US-based employees to get high-quality care. Delightful in-home and virtual visits from a dedicated team of providers. Vitable Health provides access to over 1,000 free prescriptions, labs, and a mental health program for employees and their families with no copays or deductibles.

Initially, Vitable Health approached us to design the user interface for their new website based on prepared prototypes. After successfully completing the design stage, the scope of the project expanded to include full development of the site on Webflow. This involved modeling and integrating 3D objects, programming calculators, and creating an interactive map of the USA.

The employer provided detailed prototypes of each page with text in Figma, as well as the company's brand book, Vitable app screenshots, and static renderings of doctor characters that we could incorporate into the design.

Inner pages

Solution

In order to start the design process, we needed to align on the stylistic direction for the interface design. The employer shared some websites that the Vitable team liked, and we also put together our own list of references that we believed were suitable from a design standpoint. After receiving feedback from the employer, we created a mood board for colors, fonts, shapes, and animations. We also developed a "do and don't" table, which served as a clear guideline for the design solutions that could and could not be used on the site.

Homepage hero screen

Given that Vitable Health's Primary Health Care subscription relied on telemedicine, it was crucial to showcase this aspect on the website. This was achieved by incorporating static renderings of doctor characters seamlessly embedded in real stock photos relevant to the project's target audience. Additionally, as the company also offers home visits in its range of services, this solution aligns perfectly with Vitable's approach.

In-home visits tab of the hero screen
Asynchronous provider chat tab
Free Prescriptions tab of the hero screen

To reinforce the medical theme, the site utilized clean serif fonts for headings, as well as pastel pinks and shades of green to complement the company's branding.

Furthermore, to emphasize Vitable's innovative health insurance and services solution, we integrated 3D objects that rotated smoothly across various sections and were used to reinforce the meaning of certain blocks described in the text. The site also featured interactive animations with horizontal scrolling effects, background color changes, physics-based simulations, and text animations.

Features section with rotating 3D objects on the left

One of the most beloved blocks in terms of meaning, according to our team, is the second block of the main page. It addresses the health problems that individuals encounter throughout their lives, portraying these issues as unexpected bricks falling from the sky. This interactive section allows users to play around with the tags by tossing them in the air or dragging them.

The most commonly treated health concerns that are "falling from the sky" section

We also appreciated the approach of transforming a negative concept (problem) into a positive one (solution) through horizontal scrolling and dynamic background/object colors. We used it in a few sections on the site and it was positively perceived by the employers’ team.

Transforming a problem into a solution through horizontal scrolling and dynamic background/object colors. Step 1
Transforming a problem into a solution through horizontal scrolling and dynamic background/object colors. Step 2
Transforming a problem into a solution through horizontal scrolling and dynamic background/object colors. Step 3

Upon completing the user interface design for both the desktop and mobile versions of the site, we shared the Figma file with our development department, who then implemented all planned elements on Webflow.

About Vitable page hero screen

While our front-end developers were working on building the basic Webflow pages, our 3D developer was modeling and optimizing the necessary objects for later integration.

Numbers section
Mental health problems section with a horizontal scroll interactivity

Once the main pages' layout was ready, we began animating elements, connecting the CMS system, and programming calculators. There were two calculators on the site: one for calculating the employer’s savings on health insurance, and the second for calculating the ACA penalty.

Employer savings calculator
Employer savings calculator. Minified option

An interesting element on the site is a dynamic map of US states, which demonstrates the service's area of operation. It clearly identified states where "Virtual & In-Home Care" was available, states where only Telemedicine was available, and those parts of the country where the service would soon be available. This map was fully connected to Webflow CMS, making it easy to edit in the future during the project's development.

Dynamic states map

We have integrated a blog, cases, reviews, list of leadership team and investors, privacy policy and terms of use, medical package comparison table, and frequently asked questions into Webflow CMS for easy site management.

Mobile version

The site is fully responsive for all modern devices and browsers, and the use of Web worker technology has allowed us to efficiently integrate 3D models without affecting loading speed. Despite the animation effects, models, and scripts, the site pages load in 1-2 seconds.

Technology

In the process of creating the site, programs such as Figma, Blender, and Adobe After Effects were used. The site engine was the Webflow platform with the addition of custom CSS, and HTML JS code. To animate and integrate 3D models, WebGL technology was used, as well as the Three.js library.

Full adaptivity

Awards

No items found.

Let us know about your project

Error message
This is some text inside of a div block.
This is some text inside of a div block.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Designed with Loyalty and Passion

Explore more works that made with loyalty