Emory School of Medicine

The Emory University School of Medicine is a leading medical school with top-ranked programs in biomedical education, research, and healthcare services. The School of Medicine’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

Challenge

The Emory School of Medicine’s new site needed a visual design that incorporated both the University’s new brand, plus the school’s own personality.

The School of Medicine encompasses many independently managed departments and lab sites, which needed to be brought under a single visual style, frontend library, and management system.

To help the School of Medicine wrangle their many sub-departments, I created a flexible frontend pattern library and accompanying usage/style guide. Using their library, the School of Medicine’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

The School of Medicine (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 the School of Medicine 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 Emory University Brand Guide (shown for reference – not my work!)

Collage I created for Emory School of Medicine. Hover to zoom or click to open the image in a new window.

Visual Design

The School of Medicine team chose a hybrid of mine and one of Sara’s collages to continue the design direction. Sara created a set of primary design comps for based on the two collages.

Although my primary role on the project was frontend 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 blocks 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. Click here to see the full comp in a new window. The comp shows only a fraction of what can be created with this simple set.

Flexible blocks example. Hover to zoom or click the image to open the whole collection in a new window – it’s long!

Designs using the flexible blocks

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

Hover each comp to zoom or click the image to open in a new window.

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.

Hover each comp to zoom or click the image to open in a new window.

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 frontend 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.

Hover each comp to zoom or click the image to open in a new window.

Finding a new collaboration method

When Sara and I began collaborating on designs, NewCity didn’t have a reliable method for designers to work together. 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 frontend 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.

Screenshot of emory pattern audit it trello

Trello board from Emory School of Medicine project. During development, pattern cards move from “in progress” to “done.”

Pattern open to checklists in trello board

To-do items inside a pattern card (buttons, in this case). All the different classes and variations are recorded here and checked off when tested and complete.

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 non-coding team members to follow along. 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 the School of Medicine. 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.

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

example of teaser variants

Some of 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.

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 towards 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.

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 deliverables on the project were:

  • An Atomic Design pattern library of website components
  • Static frontend 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

Technologies used:

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

  • Twig, SCSS, 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

Frontend Developer, Designer: Jenny Slaughter

Content Strategy: Rachel DeLauder

Analytics: Matt Gaskey

Project Manager: Erin Simmons

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.

The Emory School of Medicine pattern library was built starting from NewCity’s foundational Pattern Lab starter kit, Monolith, which was largely developed by John Williams and Andy Hebrank.

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