UNIVERSITY DESIGN SYSTEM

Uni of Vermont

The goal was to redesign the University of Vermont's website to ensure scalability and cohesion across the entire online presence of the institution.

CONTEXT

University of Vermont had, roughly 400 websites, each featuring unique designs, color schemes, and typography. Web management was decentralized and there were no unified brand guidelines. Additionally, there were thousands of content editors. Inconsistency was hindering brand recognition and user experience. I was hired along with other resources from my agency, CoLab, as a Senior Design Specialist to increase team capacity. I worked with their in-house Creative Director, UX Designer and communications team. Fortunately, I already had a relationship with the designer Susie; we had previously worked together for Seventh Generation.

A SYSTEM SOLUTION

The solution was to shift away from a template-based methodology to a component-based approach. We built the Trail Mix design system (now IVY) on InVision DSM. In it we housed the fundamental elements of UVM’s digital identity, along with documentation, assets, interactive prototype links, usage guidelines, and GIT repo access.

A design system would provide content creators with a toolkit of flexible, scalable components to meet various presentation needs. Simplifying the editing process by providing creative options in standardized patterns consistent with the brand.

PROCESS

One of the first steps was developing guiding principles to steer our design choices. I helped establish and maintain them.

Design for people
: Our approach is centered on users.

Embrace accessibility: We champion diversity and aim to provide an inclusive, accessible experience for all.

Build for consistency and scalability: Consistency aligns our visual brand, communication teams, and values.

Design with purpose: Our work is intentional, aimed at informing, engaging, and addressing genuine needs.

After the foundations like principles and atomic elements were established, we started designing components.  We based this work on the parameters outlined in a creative brief and a functional description. We co-authored these docs with the communications teams. Requirements were given to us from that team and we would update the docs with things like character and notes about interactions as the designs progressed. This would be helpful later as reference and training materials for the thousands of editors.

We also conducted testing of edge cases to ensure that the components meet content needs and that the design remains intact with minimum and maximum content at all breakpoints.

CONTENT CHALLENGE

Much of the content we were receiving was quite dense. This was very challenging because  it created pressure to create more components to solve the layout issues the presents. Having too many options gave the illusion of flexibility but added significant development and training time. It also challenged our ability to providing engaging journeys for site visitors with potentially cluttered experiences.

We comprised to a degree but also leaned on our guiding principles and worked to secure strict character limits in high value areas.

We created sample layouts to show how different elements can be combined to meet the communication needs of various schools, colleges, units, programs, and departments, while also providing an enjoyable experience for website visitors. This helped stakeholders visualize and see the big picture, feeling less of a need to over pack elements with content.

OUTCOMES

A new administration came in and stopped the launch. They wanted to shift the brand. Though my role was cut short after a about a year, I can say proudly that what we designed was flexible enough that much of the guts is still in tact. Changes mostly occurred on the surface level. Ivy, the new system present on the live site is largely a duplicate of the Trail Mix, a system I played a valuable role in creating. It is simply customized to work with the new brand direction.

Over the long term, the system has had an impact in a few ways:
  • Made it easier to move from design to development
  • Reduced the time needed for both
  • Improved the ability of content editors to do what they need
  • Provided a drastically more user-friendly interfaces
  • Boosted collaboration and sharing of resources
  • Improved accessibility in the products
  • Strengthened brand consistency and design uniformity