A Responsive, Platform-Agnostic, Ready-to-Use Design System for Columbia Digital Projects
Columbia University currently has 19 schools and five campuses across Manhattan and New Jersey. With the University's decentralized structure, there was no branding consistency.
The branding resource repository, available to all Columbians, can be used on any Columbia digital project. It includes:
A layout system
Browsable collection of patterns
Documentation for all elements
Examples of each element used in a project
Project Goals
The goal was to provide a single source of elements and a code base for designers and developers that was informed by branding guidelines.
We sought to create an out-of-the-box resource for website development, and provide a user-centered, research-based foundation for any Columbia digital projects. This enables our clients to focus on content creation.
With its ready-to-use code, the design system we provided was platform-agnostic, modular, responsive, accessible, and in keeping with University web development, design, security, usability, and identity guidelines.
The Process
We rallied our partners across the University to co-create the design system, including the Office of Public Affairs and Strategic Communications, owner of the University’s branding. We also invited our designer and developer colleagues from multiple departments to contribute their skills and time to this project.
After only two meetings, the team settled on all the elements and components needed for phase one. We referenced the design esthetic from Columbia Sites — our University Drupal platform — as the source of the design system.
Our original project timeline estimated project completion by Feb 2020.
Alpha Style Guide
We created an alpha version of the style guide as a reference for all the components we were building. We settled on bootstrap as our HTML, CSS, and javascript library.
The design system was launched with 15 essential components in March of 2021 after having been briefly delayed by Covid-19.
We launched two projects using the design system while it was in development. The Covid Information Commons website uses Columbia Sites, but the COVID-19 database page was a custom development feature. The integration is seamless.
Future Phase
Because Columbia’s senior leadership recognized the utility of the design system, it is now an official project managed by the project management office, with appropriate tracking, planning, and timelines.
In addition to completing the design and development for remaining components, we plan to create multi-tiered service offerings that cater to different needs. We are also planning to make this site a one-stop shop for all guidelines: branding and identity, design, usability, editorial, and accessibility.
New timeline including phase 2 completion.
We created these design elements, currently available to download from Figma to use as your wireframe and design guide.
