WVU Design System
The WVU Design System provides a clear set of principles, guidelines, and best practices, along with a library of reusable design components, with extensive documentation on how to use them. This helps us achieve higher efficiency and consistency when building WVU-branded design projects on the web.
The Problem
Web designers and developers lacked a clear set of principles, guidelines and best practices to consider when designing WVU-branded websites. This allowed for visual inconsistencies across our sites and duplicative efforts when building website templates.
The Solution
In order to develop the WVU Design System, the UR - Digital team formed a committee with other designers across the WVU Campus. Over several months, the committee established goals and user needs and brainstormed how to meet those needs. We recognized the need for a clear a set of principles upon which WVU website designs should be based, for example open collaboration, being accessible and inclusive, and being above all user-focused.
We also conducted a visual audit of existing web design components, came up with a list of components we needed, then designed and built these components using Sass and HTML, making the code available for all WVU designers to easily integrate into their own websites.
We also established a system by which other designers and developers can contribute to the system by designing and submitting their own components.
Lastly, we developed a website to display this information and document how to use our visual components.