The Emory University School of Medicine (SOM) is a leading medical school with top-ranked programs in biomedical education, research, and health-care services. The SOM’s small but mighty web team asked NewCity to help them create a complex site that demonstrated their passion and prestige. I contributed by building a pattern library and assisting with some visual designs.

Details

  • 2018
  • Atlanta, GA
  • NewCity
  • Design
  • Development

Challenge

The SOM’s new site needed a visual design that incorporated both the university’s new brand and the school’s own personality.

The school encompasses many independently managed departments and lab sites, which needed to be brought under a single visual style, front end library, and management system.

To help the SOM wrangle their many sub-departments, I created a flexible front end pattern library and accompanying usage/style guide. Using their library, the SOM’s content editors are able to create pages that meet their diverse needs while staying within the constraints of the brand.

Building on an Existing Foundation

SOM already had a strong design foundation, since Emory University had just gone through a major rebrand.

SOM would be one of the first sites to launch under the new brand standards, so in addition to launching a new site, we were introducing that branding to the university community. We didn’t want to reinvent that branding, but we did need to interpret it for SOM specifically.

To help inform the design direction, we asked SOM to choose between three element collages. Lead designer Sara Andrew made two options, and I made a third.

Existing branding from the Emory University Brand Guide (shown for reference not my work!).

Collage I created for the Emory School of Medicine. For a better look, click to open the image in a lightbox and use the zoom tool in the top right. To see without compression, download a zip of full-resolution images for this project.

Visual Design

The SOM team chose a hybrid of mine and one of Sara’s collages to continue the design direction. As art director, Sara created a set of primary design comps based on the two collages.

Although my primary role on the project was front end developer, I was able to contribute to the visual design of some of the interior pages. Following Sara’s existing direction, I designed a set of comps for departments, labs, and some other tertiary pages.

Flexible Content Block System for Tertiary Pages

These text-heavy tertiary pages needed a good system to break up content and make it easier to scan. Since many labs and departments lacked photography resources, they also needed a way to inject more color and interest into the page.

I designed a set of flexible modular blocks for SOM’s tertiary pages. Designed to compliment existing top-level page components that were more visually complex, these simple blocks can be mixed and matched according to the editor’s needs.

To demo the concept to the SOM team, I made an example comp showing some useful combinations of the blocks. While large, it only shows a fraction of what can be created with this simple set.

Flexible blocks example. Click the image to open the whole collection in a lightbox it’s long!

Flexible Blocks in Action

To help the SOM team demonstrate the modular features of the design to their stakeholders, I made variants of each design using the blocks.

Department Page Variations

These variations show how the flexible blocks can be used to create different layouts within the same template, allowing SOM’s many departments the freedom to build homepages that support their needs.

Click pages to view in lightbox. Use the zoom tool in the top right to see more detail, or download a zip of full-resolution images.

Art direction by Sara Andrew.

Lab Page Variations

SOM’s labs had diverse needs some were large, with many announcements and photos. Smaller labs needed a simpler layout that didn’t depend on photography. This set of comps shows lab examples from simple to complex.

Click pages to view in lightbox. Use the zoom tool in the top right to see more detail, or download a zip of full-resolution images.

Art direction by Sara Andrew.

Additional Designs

I made two other small page designs for SOM a history timeline and a person profile.

The history design contains a set of flexible blocks connected by dots to form a timeline. The blocks have a small set of options to showcase historical images and highlight important events.

The profile design features a card to provide quick information about a person.

Design + Development

Although my contributions to SOM’s visual design were small, it was incredibly valuable to be able to participate in the process. When I began the front end development, I had much more insight into the project and its needs than I would have had I not been involved in the design stage.

Following Sara’s direction and critique was a great learning experience. It was the first opportunity I had to collaborate with an experienced senior designer on a project a valuable, educational experience that I continue to draw from.

Better Ways to Collaborate

When Sara and I began collaborating on designs, NewCity didn’t have a reliable method for designers to work together we passed Sketch files back and forth through Slack.

To streamline our process and make it easier for her to review my work, I set up a project with Abstract to get our designs into version control. It made the process easy for us and led to NewCity adopting Abstract as a documentation method and source of truth for team members.

Pattern Library Production

For a large site with many content contributors like SOM, an atomic design pattern library is a good front end strategy. Before I began coding, I audited the designs to identify what the patterns would be.

I usually use Trello to organize all the patterns onto a board. As each design is produced, I review the comp and make decisions about what the atoms, molecules, and organisms will be. I also plan the template structure and color-scheming system.

Screenshots from SOM’s pattern kanban Trello board. Click to embiggen.

With the beginnings of a plan in place, I began development in Pattern Lab. During development, any changes to the plan were recorded in the Trello board, making it easier for nondeveloper team members to follow along with what was being built and when. Each pattern documented on the board was coded into a library of modular parts.

Development Strategy

Emory University uses Cascade CMS for all their sites, including SOM. NewCity doesn’t do Cascade development in-house, so we partnered with a third-party agency to integrate the site. When we do CMS integration ourselves, it’s generally a collaborative process multiple developers working together and contributing to a single repository.

Since I knew we’d be handing off development of SOM sending my code off into the void I wanted to ensure the smoothest possible build process for our integration partners.

One of the best ways to achieve that is to simplify and normalize the patterns as much as possible. That means keeping markup minimal and demonstrating all of a pattern’s possible variations (within reason combinations are exponential).

This is a strategy I try to follow in all my libraries, but a good SOM example is the project’s teaser molecule. A more complex version of the flexible blocks I designed for labs and departments, teasers are everywhere in the SOM site.

Some of the Emory School of Medicine’s many teaser options. This modular approach provides flexibility for the content editor, while minimizing complexity at the integration stage.

All of these elements are the same base pattern, because they all serve the same purpose: to tease another page’s content. The visual styles vary, and the content can vary, but these teasers are just different ways to do the same thing.

This approach keeps integration simpler for developers, and minifies the broad number of component choices that content contributors have to make.

I discuss a lot of development strategies for pattern libraries in Designing and Coding for Patterns.

Documentation for All

Each pattern in the library is accompanied by a markdown documentation file that describes its purpose, content options, and class variants. This documentation was intended for developers: the third-party integrators, any potential developers on the client team, or anyone at NewCity tasked with future expansion of the project.

That documentation is fine for developers, but SOM’s content managers needed a different kind of reference. Working with NewCity’s content strategist Rachel DeLauder, I built a public-facing style guide that explained what the patterns were and how to use them effectively from a content editor’s perspective.

Pattern Lab made it easy for me to build the style guide directly into the library. This allowed for live examples of the patterns in the guide. Rachel helped me write usage guidelines more oriented toward the site’s contributors than developers.

Armed with the style guide, SOM’s small web team was able to focus more on getting work done, rather than fielding questions from their many contributors.

Examples from Emory School of Medicine Style Guide. Click to enlarge.

How to Improve

When I start a new project, I try to improve on the things in the previous one that didn’t work so well. For the School of Medicine, one thing I would have done differently was how I handled the button hover animation.

On hover, the triangle shape in the top left corner of the button wipes to cover the entire background.

Button with animation showing highlight swiping across from top left at 45 degree angle

See live examples in the SOM library.

My solution was to make a pseudo element rectangle, rotate it, then scale it on hover. This functions as it should, but it requires a wrapper inside the link/button element. At the time, it seemed like an okay compromise. It’s not though.

Especially in a scenario like this, where integration is completed by another agency, I can’t guarantee the wrapper will always be there. Some third-party tools might not even give the client the option to add a span inside a button. So in those cases, the wipe effect is lost and the user only sees a basic fade to the hover background color.

Pseudo elements don’t even render on the input buttons (input type=”submit”, reset, or button) so the effect is lost there too. Which makes completing forms a lot less fun.

A Better Solution

I rebuilt the effect using a background gradient instead, which works much better. See it in Codepen.

Deliverables & Technologies

My contributions to the project's deliverables were:

  • An atomic design pattern library of website components
  • Static front end templates built from the library’s patterns
  • A style guide with usage guidelines for content contributors
  • An element collage describing a possible design direction
  • Design mockups of tertiary pages following the existing visual design system

Download a zip of high resolution design assets

Technologies used:

The pattern library, static templates, and style guide were built using Pattern Lab, and:

  • Twig, SCSS, and coffeescript to build the templates
  • Docker, Gulp, and GitLab to run the project

Design comps were created in Sketch and managed through Abstract

Credits

NewCity Team

  • UX Architect: Eva Floyd
  • Art Director: Sara Andrew
  • Designer: Jenny Slaughter
  • Front End Developer: Jenny Slaughter
  • Content Strategy: Rachel DeLauder
  • Analytics: Matt Gaskey
  • Project Manager: Erin Simmons
The Emory School of Medicine pattern library was built starting from NewCity’s foundational Pattern Lab starter kit, Monolith, which was largely developed by Andy Hebrank and John Williams.

Emory School of Medicine Team

  • Elizabeth Thompson, Senior Associate Director of Web Projects and Communications
  • Jen King, Director of Communications

Cascade CMS integration by Cascade Factory.

Learn more about the project by reading NewCity’s Emory School of Medicine case study.