Vanderbilt University

A unified design system that actually scales

When Vanderbilt approached the Upstatement team looking for a design system that would knit together their myriad of internal and public-facing digital properties, we knew we had found our people. The Vanderbilt team was ready to tackle the ambitious goal of centralizing their entire digital presence. They had hundreds of different sites, landing pages, and third-party systems – each with a different look, content strategy, and (in some cases) technical stack. To help realize their admission and matriculation goals, they were ready to invest in quality design and improved user flows that showcase the Vanderbilt way. At Upstatement, we love creating truly functional design systems for our clients to use and evolve well past our time together – we were in.

What We Did

  • Research & Strategy
  • Design System
  • Component Development

What We Made

A collage of three images. Top-left shows a historic red brick building with a pointed tower and lush greenery. Top-right is an aerial view of the University campus with pathways, trees, and a pond. Bottom-right depicts students working in an art studio by large windows.

The new design system unifies the main public-facing web properties and the new university-wide intranet. At the same time, we created unique elements that delineate between the experiences. This means a more impactful and bold voice for prospects and deeper support for the current community.

The comprehensive pattern library helps the school speak to external audiences across Vanderbilt’s many properties. From the homepage to admissions to individual programs and schools — they needed a rich system that brought these together. Building a library of components isn’t always enough. We’ve seen even the most carefully designed systems fall apart during real-world use. That’s why we stress-tested each component in a series of prototypes utilizing real content and constraints. These prototypes gave Vanderbilt’s teams clear examples to models for similar pages — and ensured the system could sustain the intentional evolution of a large website like vanderbilt.edu.

Pages from the Vanderbilt University's website overlapping and featuring "Vanderbilt" as a prominent heading and a student writing in a notebook on the left side and a historic campus building surrounded by greenery on the right side.

The design system showcases how components and component groups need to function together to make any interface offer a context-specific balance of utility and emotion. Our series of prototypes are where we put these components to the test, demonstrating how different components fit together and expressing content strategy through real-life use cases. This empowered them with the tools they need today and can grow with them as their needs evolve into the future.

From a design perspective, we wanted to provide their team with a wide range of tools that could support any scenario. The result is a spectrum of pages — from a highly functional page to describe an academic program to a super visual article experience designed to introduce prospects to the city of Nashville.

Amazing partnership, insights, and execution.

Steve Ertel Vice Chancellor for Communications and Marketing

Flexibility was also important to individual schools, colleges, and offices who wanted to work within our consistent visual system, while also expressing the unique personality and mission of their area. Our system allows these groups to use distinct landing pages that set them apart while also giving them powerful tools that enable them to leverage on tools and content that already exists — like pulling in a feed of stories or a live program search. We built each page to work in both dark and light color themes to offer even more variety.

A display of various Vanderbilt University digital materials, including articles and stories.
The word "Radical" written in the Theinhardt typeface and the word "Collaboration" written in the Jjannon Display typeface with an aerial view of a sprawling campus with greenery, a close-up of a person walking near a historic building, and a color palette with black, beige, gold, and off-white.

One of the most rewarding outcomes of the project was the relationship we built with Vanderbilt’s team. We collaborated with the core team on everything from stakeholder management to content development and presented all of our work as a unified group. Every decision was driven by thorough collaborative workshops, interviews, audience surveys, user testing, and other research conducted throughout the course of the project.

We didn’t build just a website, but a digital ecosystem that can be used to evolve their web presence for years to come. We’re so excited to see how it grows along with them.

Up Next: