Genentech + Roche

Making Medicine

Learn how Tighten helped Genentech demystify the drug development process, from molecule to medicine.

The Challenge
Provide a beautiful, flexible, and highly performant multimedia storytelling experience across a variety of input methods in a single UI.
The Plan
Implement a redundant, multi-paradigm UI to accommodate keyboard, scroll wheel, touch screen, and mouse pointer input without requiring the user to switch modes.
The Outcome
Thousands of people have become educated about the drug development process, and hundreds have clicked through to apply for a job at Genentech.

Tighten partnered with Genentech to produce an interactive website and touch-screen kiosk to demystify the drug development process, examining the journey from molecule to medicine.

Originally developed as a website, Making Medicine was repurposed as a touch-screen kiosk application for presentation at the Smithsonian Museum’s The Birth of Biotech exhibition.

Genentech Image
Making Medicine
Genentech

From molecule to medicine

As the founder of the biotech industry, Genentech uses cutting-edge genetic research to deliver on the promise of biotechnology. For over 35 years, it has developed, manufactured, and brought to market a wide variety of medicines to help treat people with serious and life-threatening illnesses, changing countless patients’ lives along the way.

Though Genentech maintains an excellent reputation in the industry, the actual process of developing medicines can seem mysterious, even to those with a background in science. Job seekers, in particular, often have difficulty understanding how their particular skill set might fit in at Genentech.

In an effort to expose the breakthrough science taking place behind its doors, Genentech partnered with Tighten and Markatos Moore to create an approachable and engaging interactive experience. Through a series of high-impact videos, slideshows, and articles, Making Medicine leads users through the drug development journey, from molecule to medicine.

Originally developed as a website, Making Medicine was repurposed as a touch-screen kiosk application for presentation at the Smithsonian Museum’s The Birth of Biotech exhibition.

A screenshot from Making Medicine, a website developed by Tighten for Genentech.
2½D multi-plane object stage

After a few rounds of exploration about how to create an immersive 3D environment, we settled on a 2½D simulation, splitting our elements into multiple planes and staggering their movements to simulate distance from the camera. Since there were no JavaScript frameworks that provided this functionality at the time, we developed the algorithms and wrote the CSS3 transforms — which were still in their early days — to handle this early predecessor of parallax in a smooth, performant manner across all devices.

A screenshot from Making Medicine, a website developed by Tighten for Genentech.
CSS sprite and keyframe animations

Several moments in the experience required animation, and each had unique constraints. We used a combination of CSS sprite loops, animated transforms, and staggered keyframe animations to create the sense of a living environment.

A screenshot from Making Medicine, a website developed by Tighten for Genentech.
Multi-paradigm navigation controls

Both because of the unique nature of the application’s layout, and also the diverse environments it would be presented in—desktop, tablet, touch screen kiosk—we needed to develop multiple means of moving around the stage. We developed a core navigation service which could be triggered with keyboard controls, scroll wheels, and a variety of touch gestures. Each presented unique challenges that we were able to overcome—for example, what happens when someone swipes hard in a direction where there are no nodes to snap to?

A screenshot from Making Medicine, a website developed by Tighten for Genentech.
Kiosk mode

One of the biggest moments of the project was when it was installed in the lobby of the Smithsonian in the form of large touch-screen kiosks. The site needed to work on 60" multitouch screens with no Internet access. We connected a Mac Mini to each kiosk and developed a version of the site that could run from the Mac Mini. We also built in tools that specifically served the kiosk environment, including surreptitious refresh commands in case anything went wrong and analytics to track how users interacted with the displays.

A screenshot from Making Medicine, a website developed by Tighten for Genentech.
API development + integration

One of the primary goals for Genentech was to drive visitors to their job postings. We built a microservice in Laravel to scrape their jobs feed and present a simple API to Making Medicine, allowing us to attach a fast and simple “related job search” dialog to each content node.

“Tighten’s professionalism and close collaboration allowed us to push technical and creative boundaries on this project. Together we were able to arrive at solutions that let us focus on the story without compromising our vision.”
Sharif Ezzat
Creative Director
Receptor Studio

Treat people well, solve the right problems, and build spectacular software. That's how we roll.

Hey, let’s talk.

By submitting this form, you acknowledge our Privacy Notice.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Thank you!

We appreciate your interest. We will get right back to you.