Texas A&M Engineering Experiment Station

Texas A&M Engineering Experiment Station (TEES) is a research and development agency that focuses on applied research in defense, energy, health care, infrastructure, and manufacturing. While TEES is an independent state agency, it is affiliated with the Texas A&M School of Engineering, who worked with NewCity to redesign their website in 2017. After that launch, we partnered up again to extend the School of Engineering library to TEES.

I updated the visual design to better fit the TEES brand while still reflecting their affiliation with the School of Engineering. The existing atomic design pattern library I built for the School of Engineering made the redesign process quick and painless.

Learn more about the base project by reading the Texas A&M School of Engineering case study.

Details

Growing From an Existing Foundation

The TEES library would be a clone of the existing School of Engineering library, with a light design refresh and three new patterns to extend the library.

On the visual side, it was important to keep the look and feel of the School of Engineering, while reflecting TEES’s specific voice.

On the development side, it was critical to keep the library structure, organization, and markup as similar to the original as possible. Since the School of Engineering team would be integrating the new TEES site, it was important to keep that architecture parallel and familiar to the site they’d integrated previously.

Design Refitting

Our existing School of Engineering Pattern Lab library made it easy to blend the TEES branding into an existing design. Based on TEES’s existing site, I developed a new color palette and typography rules. The modular construction of Sara Andrew’s original design allowed me to easily apply these basic design settings to the new design.

Design refit from School of Engineering to TEES. College of Engineering base design by Sara Andrew. Click to enlarge, use the zoom tool in the top right of the lightbox viewer to see more detail on the longer pages. You can also download full-resolution comps.

Extending the Library: New Patterns

This small project had an allowance for three new patterns for TEES’s library. NewCity’s team worked with TEES to identify components they would need that were not part of the base library. After review, the team decided to build a new 50/50 slab feature, a new homepage hero, and a new global navigation.

New Pattern: Home Hero

The School of Engineering homepage hero used a grid layout from the school’s library. That approach works well for the school’s prospective student audience, but is less functional in the TEES context. NewCity’s Director of User Experience Melissa Beaver created a new homepage hero wireframe that allowed TEES to quickly and directly state their purpose and share their research.

Based on the wireframe, I created two hero layout options for the TEES team to choose from (screenshots below). After review, the TEES team chose the two-columned layout that put the introduction and feature story side by side (on large screens). During this process, we also tried out some different color options for the hero and page headers. I loved the bright teal! But unfortunately it was too similar to the primary brand color of a competing organization. We switched to the red/maroon to stay closer to Texas A&M branding.

Home hero layout and color options. Wireframe by Melissa Beaver shown for reference. Click images to view in lightbox use the zoom tool in the top right to see more detail or download full-resolution images.

New Pattern: Global Navigation

Since the School of Engineering site obviously had global navigation, this was more of a redesign than a new component. We switched to a light background instead of the academic maroon, and designed new megamenu drop-downs structured for the needs of TEES’s audience.

Because of my development background, it was easy to create designs that allowed for minimal code changes to the existing navigation patterns.

New global navigation for TEES. College of Engineering base design by Sara Andrew. Click to enlarge use the zoom tool in the top right of the lightbox viewer to see more detail. You can also download full-resolution images.

New Pattern: 50/50 Feature

This pattern is simple but flexible: a full-width slab for two side-by-side (on large screens) content areas, plus a title and optional intro for the section. Three colorways allow the pattern to be used on a variety of pages.

50/50 feature in three color options.

Quick and Collaborative Development

Once the design decisions were made, development updates to the “new” library were fast and easy. I was able to quickly remap sass variables for the color palette, swap fonts, and tweak a few vertical spacing settings. Many of these tweaks happened live during the design demo to the client.

The School of Engineering/TEES team were repository collaborators, so it was easy for them to track changes to the library relevant to their integration, or file issues if something wasn’t working properly.

Deliverables & Technologies

My contributions to the project's deliverables were:

Technologies used:

  • Design comps were created in Sketch and managed through Abstract.
  • The pattern library and static templates were built using Pattern Lab, and:
    • Twig, SCSS, and coffeescript to build the templates.
    • Docker, Gulp, and GitLab to run the project.
  • The final site was integrated in Cascade CMS by the client.

Credits

NewCity Team

  • UX Architect: Melissa Beaver
  • Art Director: Jenny Slaughter
  • Designer: Sara Andrew
  • Front End Developer: Jenny Slaughter
  • Analytics: Matt Gaskey
  • Project Manager: Nicole Mosley, Natalie Brown
The Texas A&M Engineering Experiment Station pattern library was built starting from NewCity’s foundational Pattern Lab starter kit, Monolith, which was largely developed by Andy Hebrank and John Williams.

The TEES designs were based on the original Texas A&M School of Engineering site design by Sara Andrew.

Texas A&M Engineering Experiment Station Team

  • Tricia Speed, Associate Director of Communications
  • Taylor George, Senior Web Developer
  • Jarrett David, Web Developer
  • Marilyn Martell, Senior Assistant Vice Chancellor for Marketing and Communications
  • Pam Green, Director of Strategic Communications
  • Barbara Mendoza, Director of Engineering Communications
  • Joya Mannan, Assistant Director of Marketing and Communications

Cascade CMS integration by the Texas A&M Engineering Team.