George Mason University’s College of Science (COS) came to NewCity needing a replatform to Drupal 8 that showcased their unique programs and R1 research status, while remaining within the parent university’s strict brand standards. I built a Fractal pattern library and led the NewCity team in pattern decisions to create flexible content containers for the college’s many departments and degree programs.

Details

  • 2019
  • Fairfax, VA
  • NewCity
  • Development

Starting with Consensus

When I began working on the COS project, I started by leading the project team in component reviews. In this case, that meant assembling the entire team (designer, UX architect, project manager, back end developer, and myself) together in work sessions. As a team, we identified what the project’s needs were, what components their library would need, and what options those components would have.

This collaborative approach is not typical of NewCity projects, and it allowed us to reach a consensus about what we were creating before we created it. As we went through the process of deciding as a group what we were capable of building, we better understood each discipline’s needs, capabilities, and restrictions. This understanding led to a better-defined system and a lot less fixing in the QA stage.

We used a large shared Google doc to rough out ideas during our review. Those decisions were then converted into stories in Pivotal Tracker.

Excerpt from component review and example of pattern in Pivotal Tracker.

Flexible Features, Supportive Slabs

One of the most versatile, commonly used patterns in the COS library is the Feature pattern. Designed to feature a single subject on a landing page, the Feature organism can contain a headline, text content, a list of links, and an optional aside (usually a photo or video). It’s intentionally open-ended, and only has three modifier classes. But that short set of modifiers, combined with COS’s six available color schemes, can be used to create a diverse set of page elements.

.feature––fancy-aside

.feature––fancy

.feature––minimal

Modifiers for feature

Feature flexibility examples:

The COS library also has a large set of edge-to-edge slabs. These flexible containers can hold any content, and can stack on a page in any order indefinitely. There are several texture options, and each can be used with any of the available color schemes. This creates a broad set of container options for COS’s content editors, meaning they can create a variety of page designs from a relatively limited set of parts.

Texture options, like opacity for photos and color for illustrations, can be easily tweaked by designers or developers in the scheme’s settings:

$color-schemes: (
off-white: (
background: color(off-white),
spire-texture-invert: false,
spire-texture-opacity: 0.08,
tile-texture-invert: true,
tile-texture-opacity: 0.8,
photo-texture-opacity: 0.15
)
);

Example of texture settings in color-scheming setup. In the real library, schemes have a LOT more settings used by different patterns.

Some of the slab variants in the COS library. See all of COS’s slabs.

Automated Color-Contrast Reference

When I began development on the COS project, one of NewCity’s internal initiatives was to improve the client experience in our style guides. As a member of the style guides team, I used COS as a test project for creating an automatic color-contrast reference tool.

This simple demo page consists of a loop through all the colors defined in the library’s color palette. It checks the contrast between the two colors, and applies a pass or fail badge depending on if the combination meets WCAG AA contrast standards.

A future way to extend this tool would be to show the “fail” badges on the patterns themselves when noncompliant combinations are made with a way to easily toggle it off for production, of course.

Automatic contrast testing reference in the COS library. Click the image to view in lightbox.

How I'd Improve: Working with Color Schemes

Elegant, modular color scheming is a problem I enjoy finding new and better solutions to. The COS project has six different color scheme options. That doesn’t sound like a lot, but combined with how much variation there is in each pattern, the color scheme definition for this project became very large very quickly.

Each scheme supports about 150 color settings that’s wayyy too many! It would have made for a much better system if some of those variations could have been condensed or negotiated.

Since building the COS scheme system, I’ve found better solutions to the scheming problem and am working on a blog article to discuss them.

Example of scheme looping in scss

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

Technologies used:

The pattern library and static templates were built using Fractal, and:

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

The final site was integrated in Drupal (not by me)

Credits

NewCity Team

  • UX Architect: Jennie Salamoun
  • Art Director: Rodger Bridges
  • Front End Developer: Jenny Slaughter
  • Back End Developer: Andy Hebrank
  • Content Strategy: Rachel DeLauder
  • Analytics: Matt Gaskey
  • Project Manager: Natalie Brown
The George Mason University College of Science pattern library was built starting from NewCity’s foundational Fractal starter kit, Monolith, which was largely developed by John Williams and Andy Hebrank.

George Mason University College of Science Team

  • Tracy Mason, Assistant Dean, Strategic Communications and Marketing
  • Dale Pokorski, Director of Information Technology and Security
  • Laura Powers, Assistant Director, Marketing and Communications
  • Julia duMais, Web Specialist