case

Key Idea

The concept uses illustrations to explain the complex subject in understandable terms. We’ve complemented the text blocks with animated charts and wrapped the information into a structured presentation to provide an easier reading experience.

More About the Company

VitaKey provides a revolutionary new vitamin and micronutrient encapsulation technology under an exclusive licensing arrangement with the Massachusetts Institute of Technology and the Langer Lab. The unique method helps preserve all the nutrients throughout the storage, cooking, and consumption processes.

Overall Perception

Leaving a lot of white space between blocks helped us achieve the feeling of air and freedom, together with the chaotic movement of molecules. A rounded typeface used resembles round-shaped microparticles. And the color scheme used was built off the logo, as there was no established branding identity.

Scroll-linked Animation

The scroll-linked animations and hover elements on the main page resemble moving molecules. We designed smooth illustrative transitions to break down big text blocks, add clarity, and structure the material for a more comfortable perception of scientific writing.

To speed up loading times, we broke the 3D microparticle video sequence into many raster frames and linked them to scroll. Users can break up the microparticles by scrolling down or reverse the animation by scrolling upwards.

Animated Graphs 

Static diagrams and graphs were animated to illustrate the research process and add the feeling of a real-time increase in figures. To attract attention to the results, we designed the charts to grow at first appearance. A simple and clean color scheme did its work as well.

Backend

Full-custom backend development of the project was built using WordPress CMS. We based it on Bedrock, a WordPress template with modern tools for developers that ensure easy cross-platform work with any operating system — and fast loading on any device.

Communication

The Who We Are page introduces you to the team of directors and scientists. Apart from names, personal cards include bios of board members available through a single click. It inspires confidence, demonstrates expertise, and shows the company is ready for collaboration. Users can find the contact details on every page and easily access VitaKey with any question they might have.