Texas A&M College of Engineering

Texas A&M University (TAMU) is a very large school. With a total enrollment of 69,465, it’s the second largest college in the United States. The College of Engineering at Texas A&M also very large — one out of every four students on the A&M campus is an engineering student.

One of the reasons for that population is “25×25,” the college’s goal to increase enrollment to 25,000 by 2025. To get there, the college needed a new website powered by an extendable pattern library to grow along with them.

These stats are accurate as of February 2020 when this case study was written.


Pattern Planning

Developers are not usually part of the design discovery process at NewCity, but on the TAMU Engineering project I was able to participate in a design sketching session. In this collaborative workshop with NewCity and TAMU team members, we brainstormed some design ideas for pages in the Academics section.

We talked through all of the pages’ goals as a group and recorded them with sticky notes. Then each participant chose a page and quickly sketched three or four rough wireframe drawings of possible ways to best communicate the concepts from the sticky notes. I chose the “Beyond the Classroom” page, so after reviewing the stickies, I roughed out three possible ways to show that information on a page.

After sharing our ideas with the group, we each chose one of our sketches and quickly sketched a more detailed version on a larger sheet of paper. The concepts in the sketches were then used by the UX and design team when they created the pages.

“Beyond the Classroom” topics on sticky notes and my resulting very rough sketches.

Sketches from other members of the project team from NewCity and the College of Engineering.

As the high-fidelity designs were produced, I planned the structure of my pattern library using Trello. During development, the project team was able to use my patterns Trello board as a reference for what was going to be built, what had been completed, and what was still being worked on.

On this project, we used the Trello board to help with release planning patterns were labeled with release groups to allow the project management team to track which patterns would be completed during which time frame.

Trello board of TAMU Engineering library patterns.

Future Flexible

While developing the TAMU Engineering library, I did my best to optimize for pattern flexibility and future growth. Some of the best examples of this optimization were found in the Page Header and Grid components.

Page Headers

The TAMU Engineering designs showed a lot of different page header treatments for H1s. It was important that there be one pattern to render these, despite the level of variation they needed.

Two scheme options, a simplified layout option, and lots of possible child elements allow for a single Page Header pattern with a lot of flexibility.

This approach makes the library easier to extend or adapt as the college grows.

Design mockups showing variation in page headers needed by this library design by Sara Andrew.

Modular Feature Grids

The TAMU Engineering library also supports a flexible grid component, which can be used to highlight a collection of items in squares. The designs only show a handful of layouts, but the goal for the component was to allow the client to build any kind of grid, with any combination of items.

Grids are made up of grid blocks, a special molecule specifically created to build the grids. Grid blocks have several size and content options. Thanks to the flexible child blocks, the grid itself only has to be responsible for containing the blocks not their individual styles.

Again, the result is a simple component that provides a lot of options. According to our integration partner, the grids were very easy to integrate thanks to the basic markup and modular construction.

TAMU Engineering’s grid was built using CSS Flexbox; if built today, CSS Grid would have been a much better approach to create this layout. The homepage design shows a slightly different grid layout that necessitates a nested grid in Flexbox, but would not have if using display: grid.

Grid organism examples in the TAMU Engineering library.

Extending the Library: TAMU TEES

After the TAMU Engineering project was completed and the site had launched, we worked with the TAMU team again to fork the Engineering library and tweak it to fit a new design within the existing brand.

The Texas A&M Engineering Experiment Station site needed to reflect the College of Engineering site, but have its own subtly distinct style. The site also needed to use existing patterns from the College of Engineering library to allow the college’s in-house team to integrate it easily themselves.

Read more about how I extended the existing library in the TAMU TEES case study.

Excerpt from TEES research page

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 Pattern Lab, and:

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


NewCity Team

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

Texas A&M College of Engineering 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 Cascade Factory and the Texas A&M Engineering Team.