The University of Kentucky has pursued interdisciplinary research and creative efforts that address the challenges and disparities of Kentucky citizens for over 150 years. To support this mission, UK Research needed a new Drupal site that helped them demonstrate research being done at the university, and helped the university’s researchers find the resources they needed to continue their work.

Details

  • 2016 - 2018
  • Lexington, KY
  • NewCity
  • Design
  • Development

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.

UK Research pattern planning Trello board.

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.

Deliverables & Technologies

My contributions to the project's deliverables were:

  • High-fidelity design mockups of top-level and interior pages
  • An atomic design pattern library of website components
  • Static front end templates built from the library’s patterns

Technologies used:

  • Design comps were created in Sketch and managed through Avocode
  • 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
  • The final site was integrated in Drupal (not by me)

Credits

NewCity Team

  • UX Architect: Melissa Beaver
  • Art Director: Jenny Slaughter
  • Front End Developer: Jenny Slaughter
  • Back End Developer: Andy Hebrank
  • Content Strategy: Rachel DeLauder
  • Analytics: Matt Gaskey
  • Project Manager: Kristin Sartain
The University of Kentucky Research and CCTS pattern library was built starting from NewCity’s foundational Pattern Lab starter kit, Monolith, which was largely developed by Andy Hebrank and John Williams.

University of Kentucky Research and CCTS Team

  • Alicia Gregory, Director, UK Research
  • Elizabeth Farnsworth, Web Coordinator, UK Research
  • Mallory Powell, Communications Director, UK CCTS