Problem
Every year, the rock stars of the cancer research and treatment world put on their shiniest shoes and assemble for the American Society of Clinical Oncology (ASCO) conference. In honor of the 50th anniversary of the ASCO conference, Genentech’s BioOncology group asked Stimulant to design and develop a unique way to view and interact with their drug development pipeline. This pipeline represents all the molecules currently being researched and tested to treat various tumor types, each of which can be organized by tumors they may affect, the biological mechanism of their action, and the phase of testing they’re currently in.
Every ASCO exhibitor shows their development pipelines as printed bar charts that focus on which phase of testing each medicine is in. We asked if there was a more relevant way that oncologists could look at this data, based on their personal and professional interests? Some oncologists specialize in certain tumor types, while others focus on how certain medicines act upon the body. We wanted to allow all booth visitors to select their own area of interest, streamlining their experience while delivering valuable metrics to Genentech.
Project goals:
• Present a more relevant way that oncologists could look at this data
• Allow oncologists to filter by field of interest
• Streamline attendee experience
• Deliver valuable metrics to Genentech
Process
Prototype
We typically don’t have extra 80″ touch screens laying around, so we opted to print out our designs to scale on paper. Making a paper prototype allows us to test the legibility of type at various distances, helps confirm our buttons are large enough to touch, and allows us to determine relationship from visitor to input device. In order to make a test print, you must calculate pixel density for the screen size of the device and print it at that resolution.
In our guerilla usability testing, we found that most users felt more inclined to interact with the touchscreen if it were angled more like a drafting table than if it were more perpendicular to the floor.
We created an interactive “Pipeline Explorer” that was a hybrid of a chord diagram and a force-directed bubble graph. The Pipeline Explorer reveals the breadth of molecules in development, while enabling visitors to quickly target content of interest, and encounter additional content through exploration.
Developer ready assets
Because we used curved typography in our design, we needed to embed the text into the buttons as image assets for our developers. At the time of this writing, few coding frameworks support dynamic type on curved baselines with smooth rendering and letter spacing. To prepare these images for our developers to use, I would have had to save out almost 100 separate assets, one at a time. Instead of spending hours doing that, I found a Javascript plugin for Adobe Illustrator, by Thomas Byrne, that exports separate layers as individual assets, all at once. This plugin alone saved me days of work.
Motion Design
We ended up using a pre-rendered background so our developers could focus on building a killer runtime experience: this approach required almost no development effort, and freed up CPU resources for the interactive portion of the experience. For the particle system, I used the Trapcode Form plugin for Adobe After Effects. Genentech provided molecule graphics that I isolated and animated, mixed with subtle particles floating in suspension. To prevent hours of hand-animating geometric drift and wobble in the particles and molecules, I wrote Expressions in After Effects. Even my pre-rendered content was animated using code.
Results
We decided to build the Genentech Pipeline Explorer in HTML5 and JavaScript to take advantage of a data visualization library called D3. Using HTML5 made it easy to send usage data to Google Analytics. Providing these analytics helped their BioOncology team better understand in which molecules, tumor types, and areas of focus ASCO attendees were most interested. This further helped them verify the effectiveness of their other marketing and education efforts among oncologists at the conference.
Once the project went live at the ASCO conference, we shot footage from the event and I edited and finalized the case study video (seen at the top of this page).