Biogen Genetic Therapies
VISUAL DESIGN / AUGUST 2020 - APRIL 2021
An interactive digital solution that communicates Biogen's work in gene therapy.
Team: Gretchen Harwood, Pradnya Dighe, Michelle Kim, Ryan Harris, Vuk Nikolic, Lia Bailey, Lisa Todd
**The interactive site is no longer available but feel free to view the screens below ⬇️
01
Overview
Biogen is one of the world’s first global biotechnology companies and has led innovative scientific research with the goal over the last decade to defeat devastating neurological diseases. The Biogen team asked VMLY&R to create an interactive digital solution that communicates Biogen's work in gene therapy.
The program must:
-
Provide an overview of gene therapy, the technologies being developed by Biogen, and the therapeutic applications Biogen is exploring.
-
Be modular in structure to allow for straightforward customization and scale.
-
Be engaging and compelling for HCP audiences across ophthalmology and neurology specialties.
02
Original Pitch Proposal
The team at VMLY&R Health's original concept was designed to be an in-person tradeshow booth experience for the AAN Congress. The concept's theme is gene therapy in action.
This approach invited our congress attendees to engage in the greater gene therapy story with an overview of the science, the principles, and the recent progress.
Key Components
-
A suspended mobile that mimics the "replacement" process involved in gene therapy.
-
Individual iPads that can be customized to the individual therapeutic areas.
-
Flexible footprint.
-
Modular content that can be tailored to different audiences and scale.
03
New Proposal
Due to COVID-19, VMLY&R proposed to build a website that would be shown at the now-virtual conference that would be compatible to be viewed from web, mobile, and tablets format.
Key Components
-
A single long-scrolling web experience - which would serve as a great story-telling device.
-
Bespoke experiences for both desktop and mobile - functionally similar but would be designed to uphold the unique features of each breakpoint.
-
Graphic illustrated approach that lends itself to an immersive storytelling experience.
-
Intuitive interactive features.
-
Modular structure to accommodate the ability to turn therapeutic content on and off depending on the conference.
04
Launching
I took on this project in August 2020 as a visual designer. I worked very closely with the art director and project manager to bring our wireframes together. We wanted to explore turning this experience into a long scroll as it has never been done before at VMLY&R and since there's a lot of information happening on the site, we didn't want to overthink the storytelling.
05
Design
The design team proposed the design towards a 'blob' theme to represent the different gene therapies because blobs can merge together and are constantly changing like our DNA. During the earlier stage of development, we struggled to find an approach for the theme that wouldn't give off an 'underwater-camo print' theme (as described by the client).
As a result, we proposed to completely remove the muted background. This gave us the opportunity to design the website a lot easier due to our tight deadlines and give it a seamless one scroll experience.
Introduction
VMLY&R's goal was to create an introduction that would retain the main topic: discovering genetic diseases.
Here, visitors are able to learn about Biogen, look up references, switch audio, and share the experience with others through various social media platforms. These actions are also performable throughout the experience.
Interactive Menu
By clicking on the hamburger menu, visitors are able to hover and click on any of the 6 sections of the experience and be navigated to the respective section if they do not want to scroll throughout.
Sections
Every section starts with a title screen and after scrolling down, the description screen that introduces the information for the section will be discussed.
Active Animation
Animations are shown throughout the experience to indicate links to learn more about specific genetic diseases.
Subtle Animation
As there's so much information on every screen, we didn't want to overwhelm the visitor. Some animations are subtle as we want the audience to focus on the context being presented with the vectors supporting.
Pop-ups
By clicking on an active animation, a pop-up will appear where visitors can learn about the different ways Biogen has discovered to treat genetic diseases.
Before and After Sequences
Our bodies change and we wanted to show that. Some screens display an interactive arrow where visitors are able to click, hold, and drag horizontally to see that changes that happens in our bodies.
Media
Biogen wanted us to include a few clips they have created that relates to the information they wanted to include into the experience. We created interactive icons to make it recognizable that the visitor would be watching a video.
Takeaways
This was the first project I took part in when I first joined VMLY&R. It was a huge learning curve, lots of long nights, but very rewarding and I learned a lot in just a few months. This project pushed me to use my problem-solving skills in order to turn complex information into simple designs. After its launch, we were met with a positive response and the BioGen design team has been in the progress of developing multiple websites for some of BioGen's current successful applications.