Case Study
Making Medicine
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.
Screenshot of Making 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 patient 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 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.

Tighten's competence across disciplines helped us to really push boundaries, and their professionalism allowed us to remain confident amid changing requirements. Tighten was a crucial partner on this highly ambitious project.
Photo of Sharif Ezzat
Sharif Ezzat Brand + Digital Communications, Genentech
Technical Details

While our role was primarily technical, we collaborated with the client and other partners throughout the project, using our application development background to drive design possibilities and help steer clear of pitfalls.

Screenshot of Making Medicine homepage

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.

CSS sprite and keyframe animations

Several moments in the experience needed 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.

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?

Immersive media player

Each of the story's nodes presented one of three types of content: video, slideshow, or text. We built an inline article reader, but both slideshow and video needed pop-out immersive viewers.

We worked with both local and YouTube video integration, customizing players and handling cross-browser compatibility. We also built a series of hooks to connect buttons and displays that all had to work seamlessly regardless of the source of the video or the size of the device.

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.

Hand-rolled, responsive, performant JavaScript

We built Making Medicine site in 2013, and at that point there wasn't much tooling available for developing responsive, performant rich JavaScript experiences. The combination of a unique experience, support for many types of devices, and the processor-intensive 21/2D meant we had to write everything from scratch—and be very careful as we did.

The site used some jQuery to simplify DOM access and manipulation, but the majority of the code is hand-crafted vanilla JavaScript, taking advantage of then-brand-new CSS3 transforms and requestAnimationFrame to optimize the animations. We used compiled Handlebars templates and stored all of the content in JSON, which our client learned—and loved.

Deep linking and URL re-writing

While Making Medicine is an immersive experience, we still wanted users to be able to share any individual piece of content with friends or return to it later. We took advantage of HTML5 push state to re-write the URLs as the user moved around, allowed for deep linking on a page refresh, and built a tool to let users share the content they're currently viewing via email.

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.

Need a cross-disciplinary team to help you take your project to the next level?

Talk to Us
Next Project
Karani for Fundraising
×

Got an idea? Let's talk.

Leave us a note here, or give us a call at (312) 448-7405.