Greg Gant
Front End Architect, UX Engineer

Onward OHSU

Client: Oregon Health Science University

Website: onwardohsu.org

Position: Lead Front End Developer

Tech stack: Drupal 7 / PHP, Luminate Api, (Forms) Grunt, Sass, jQuery, jQuery Validate, jQuery Cycle 2, HeadJS.

Living Styleguide: link

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 that other donors would equally match their donation 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 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 own 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 styleguide for the website.


Pictured: The initial style guide became an asset used to share with the client.

See the Pen bWMaJJ by Greg Gant (@fuzzywalrus) on CodePen.


Unique Challenges:

With a client who has the incredible resources of OHSU, 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 simply 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.


See the Pen animated overlay by Greg Gant (@fuzzywalrus) on CodePen.


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.


See the Pen Pure CSS Chevron Breadcrumb with borders by Greg Gant (@fuzzywalrus) on CodePen.


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


See the Pen Pure CSS Image Overlay by Greg Gant (@fuzzywalrus) on CodePen.


Final Result:

OHSU's website was a success and continues to live on, as Emerge Interactive now has a service agreement with OHSU and both looking to further each other's relationship. 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, contract ratios, font sizes, alt text, mouseless navigation), older browser support (IE9) and graceful degradation . For a site that when from development to shipping in a mere 5 weeks, incorporated a payment gateway, a multi-stage form with a lot of optional hidden fields, our team was amazing as was OHSU for entering content into a website being actively developed.

Onward OHSU's living style guide