Onward OHSU

Client: Oregon Health Science University

Website: onwardohsu.org

Position: Lead Front End Developer

Year: 2015

Tech stack: Drupal 7 / PHP, Luminate API, (Forms) Grunt, Sass, Validate, HeadJS.

Overview:

On September 21, 2013, Phil & Penny Knight (of Nike fame and fortune) announced that they'd donate an incredible $500,000,000 to Oregon Health & Science University for cancer research contingent on the condition that other donors would match their donation equally by February 4, 2016. On June 25, 2015, that number was reached, bringing the total charity drive to $1 billion.

Rather than calling it a day, OHSU asked themselves: "What's next?" and started looking even further into the future.

Role:

Working closely with OHSU, Emerge Interactive's talented in-house creative team arrived at a design that encapsulated its many areas of research. The project had a very short timeline to go from pixel to code, as the site had a hard launch date that coincided with a special donor event.

One of the cooler features of the site is an entirely modular backend. Every module on the page can be added or removed in Drupal, and up to 15 modules can be present on a page. Each of the modules has its own template and correlates with CMS content. Some of the modules had multiple layouts or special interactivity like the ability to trigger a modal, contain a slide show and so forth. To add more fuel to the fire, every section had to be themeable. Each category had its color, which could be swapped between a predefined list of colors. Due to the complexity and short timeline, the front and back end of this site were developed in parallel. For the first two weeks of development, I created a static style guide while our back-end programmer plugged away. This would end up laying the groundwork for a living style guide for the website.

Unique Challenges:

Given OHSU's substantial resources, we weren't limited by a lack of content. With the ability to create full-fledged high production value videos, OHSU needed a solution to enable them to capitalize on their content. One of the many requests was to be able to trigger videos via links in a modal. Using a little custom javascript, I created a simple solution using data-attributes. Any HREF could become a video link by including data-video="video-url" within the HTML. This all would be triggered on-click and then write the iframe into the DOM into a generic modal. It also has the added benefit of pushing the iframe requests to only as-needed.

With modern browsers, iframes load fast. Sadly, fast is never fast enough. To hide the delay, a fanciful transition fades the overlay in, masking the write times. Too short and offending iframe would pop in. Too slow, and the transition felt sluggish and garish.

Also included in the design was a 4-stage form. While not my first choice for UX, this was a client-mandated approach to mirror another site in the OHSU family's functionality, onedown.org. Like most things in front-end development, things that should be easy, aren't. I recreated the chevron system found in pure CSS during the onward campaign.

I also made substantial of use CSS overlays to deliver simple and effective animations on the homepage and interior pages, making use of pseudo elements.

Final Result:

From a front-end standpoint, this website was designed for the very large and the very small screens, makes use of WCAG accessibility standards (screen readers, contrast ratios, font sizes, alt text, mouseless navigation), older browser support (IE9) and graceful degradation. I felt especially proud that our site went in a five-week window, went from development to shipping, and had challenges like incorporating a payment gateway and complex multi-stage form; our team was amazing, as was OHSU for entering content into a website being actively developed.