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.
Dang! This is a long one. Skip to:
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.
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.
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
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.
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.
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.
Trello board from Emory School of Medicine project. During development, pattern cards move from “in progress” to “done.”
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.
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.
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.
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.
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
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
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.
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.