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.
