Client: Oregon Health Science University
Position: Lead Front End Developer
Tech stack: Drupal 7 / PHP, Luminate API, (Forms) Grunt, Sass, Validate, HeadJS.
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.
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 correlating 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 was 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.
Pictured: The initial style guide became an asset used to share with the client.
I ended up writing a blog post to explain the code above
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 on the onward campaign in pure CSS.
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.
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 incorporated a payment gateway and complex multi-stage form, our team was amazing as was OHSU for entering content into a website being actively developed.