Challenge
The UK Research team had two main goals for their site: to demonstrate the important and impactful research being done at the university, and to make it easier for the university’s researchers to access the assistance and resources that the UK Research team provided.
To help the UK Research team reach audiences both on and off campus, I created a functional, modular design and accompanying front end pattern library.
Defining a Design Direction
To help the UK Research team identify visual styles and functionality that would work well for them, our NewCity team conducted a “gut check” test. In this test, UX Architect Melissa Beaver shared a set of example homepages from similar sites.
The UK Research team members had 20 seconds to view each page, then quickly record their first impressions about what they saw. Afterwards, we interviewed the participants about what stood out to them — good and bad.
I interpreted the results of the gut check test into two different element collages for the UK Research team to review. Both collages attempted to demonstrate functionality and styles that reflected what the team positively reacted to during the test.
Some of the most well-liked sites included Scientific American, Science Friday, and the Metropolitan Museum of Art. UK Research specifically asked for treatments that were bold and news-inspired.
UK Research element collages.
Click images to view in lightbox — use the zoom tool in the top right of the lightbox viewer to see details, or download a zip of full-resolution artwork.
After review, the UK Research team decided to move forward with collage 1, but with the color palette from collage 2.
Page Designs
In the page designs, I prioritized modular, stacking-friendly blocks that work together or stand alone. The final site would be built in Drupal, so I wanted to ensure the pieces I designed would work well in a flexible environment.
UK Research page designs.
Click images to view in lightbox — use the zoom tool in the top right of the lightbox viewer to see details, or download a zip of full-resolution artwork.
Translating to Code
During the design phase, I also began front end development. This process started by creating a Trello board to catalog all the patterns for the pattern library. This board helped me plan and organize, and also helped the rest of the project team follow along with the development process. As I built out the components in Pattern Lab, I kept this board updated with their status.
Extending the Library
After the UK Research site launched, one of their research cores, the UK Center for Clinical and Translational Science (CCTS), came to NewCity for help extending the library. CCTS’s new site needed the look and feel of the parent organization, but also needed to have some of their own personality — a lighter, less bold visual look that reflected the Appalachian community they serve.
Given the existing pattern library, I was able to work with the CCTS team to tweak the design modularly. Starting at the atom level, I made small CSS changes that supported their more specific brand. The atomic library structure allowed us to quickly change the visual styles to better tell the CCTS story.
