Texas A&M College of Engineering

Texas A&M is a very large school. With a total enrollment of 69,465, it’s the second largest college in the US. 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.

Details

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 for TAMU Engineering Project
Trello board of TAMU Engineering library patterns

Future Flexible

The TAMU Engineering designs showed a lot of different page header treatments for H1s. It was important to me to prioritize keeping this pattern simple, despite the level of variation it needed. Two scheme options, a simplified layout option, and lots of possible child elements provide the pattern with a lot of flexibility.

This flexible but simple 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.

The TAMU Engineering library also supports a flexible grid layout, 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 deliverables on the project were:

  • An Atomic Design pattern library of website components
  • Static frontend templates built from the library’s patterns

Technologies used:

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

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

Credits

NewCity team:

UX Architect: Melissa Beaver

Art Director: Sara Andrew

Frontend Developer: Jenny Slaughter

Content Strategy: Rachel DeLauder

Analytics: Matt Gaskey

Project Manager: Nicole Mosley

The Texas A&M 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

See the live site: engineering.tamu.edu