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 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.
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.
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.
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.
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.
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?