The content for the microsite comprised of broad technical overviews of the teams, each of focusing on some cutting edge healthcare technology like Genomics, Immunomics, Medical Devices etc.

I had 2 goals for content presentation

• Showcase diverse technological prowess of each of the teams
• Show how they all work towards a unified cause of human impact

Approach

In order to effectively design each of the team sections, I not only read through and analyzed the content of microsite, but I also reached out to the individual team leads to help me understand their work better at a fairly technical level. This was incredibly useful to create the appropriate visuals, interactions and imagery tailormade for each of the team sections.

I wanted to hit a sweet spot between optimal readability and eclectic & futuristic design. I went back to my trusted online sources to explore what has been done in this field before and gain some inspiration.

The content for the microsite was more than 20000 words, it was a long read. My primary goal was to make it highly readable & accessible. I also wanted to design it in a way that captured interest of the reader and motivated them enough to continue scrolling.

A few techniques I used to achieve this goal are :

• Single page scroll-to-read content, without any click through sections
• 720px max-width for text content for optimal readability
• Carefully chosen type size ratios for clear information hierarchy
• Prominent visuals to draw attention to important/interesting snippets

Understanding the technical aspects of the content helped me come up with visual assets which conveyed the information in a succint manner and also improve the aesthetics. I tried to steer clear from conventional allegories associated with healthcare technologies - like double helix for DNA/genes, which would make the site more interesting and engaging

I wanted a font with the below requirements:

• Readable & professional looking
• Sans serif to go with modern and technical design
• Heavy weight headers to create good contrast against regular weight body text

The reason for choosing the color pallete :

• Dark blue background - darker backgrounds can be soothing to eyes, which can be of help since the site is a long read
• Light blue body text - sufficient contrast on dark blue background which passes AA standards of accessibility. Light blue has this almost 'technical' feel to it
• Orange accent color- striking color on that stands out on blue background next to gray text

I had a lot of fun exploring different analogies and metaphors to arrive at visuals for each of the team technologies. here are a few screenshots. All of these are animated in either 2D or 3D.

I met some unique challenges with scroll performance of the web page as it was too long and with many rich assets.

After I put together the complete website, I was getting around 15-20 FPS on scroll performance. There were many places during scroll where the FPS dropped below 10.

Here are the few things I discovered and fixed to bring it to around 30-45 FPS

• Stop animations which are beyond viewport
• Fix CSS issues which were causing Cumulative Layout Shifts and rerenders
• Optimize web animations