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 25x25, 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.
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.
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.
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.
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.
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.
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
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
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