VCU COMPASS

While working at Virginia Commonwealth University, I contributed as a UI designer on the Compass Framework and Design System. 

Compass is VCU’s website builder. It integrates with a content management system to provide web managers components to build ADA compliant and on-brand websites.  A core part of Compass is the documentation, which:

  • Clarifies the framework’s limitations 

  • Explains how to best use the available components

  • Roadmaps in-progress and planned developments 

WHAT IS T4

Terminal 4 is a developer and provider of a digital marketing & web content management systems. We built a framework that is really easy for University departments and organizations to deliver and manage very large, highly dynamic, responsive Websites.

DESIGN TOOLS

Adobe:

Photoshop

Illustrator

Adobe XD

UX TECHNIQUES

Huristic Reviews

Collaborative work sessions 

Spreadsheet building

Documentation

THE CHALLENGES

  • To get the whole University working better together.

  • Make it simple for developers.

  • Create an easy-access to resources for web managers and developers.

  • To be very thorough with the design system, "no stone was unturned".

  • Get buy-in and approval from the management level to even start this project. 

  • Cross-unit initiative from Technology Services and University Relations.

  • Had challenges collaborating with Technology Services because they originally had their own templates. They thought they owned this project.

THE GOALS

MY ROLE

I was on a team that consists of other designers, content strategists, University Relations developers, digital directors, and technology services director and developers. This was University Relations Department and technology services initiative that resulted in everyone collaborating and exchanging files and lots of meetings about how the framework will work and what goes in to the design system. As a designer for this project, I lead the user research, the design, testing, and implementation using Atomic Design principles. 

UX RESEARCH

To begin, we conducted an audit of all components, patterns and features VCU websites currently use on a regular basic. We utilize components, patterns and features that include common UI components such as navigation, hero images, buttons, search bars, input fields and call to action confirmations.

After completing my audit, i looked externally to the market. What were other companies doing with their design systems that i can learn from? I looked at Google’s Material Design and Bootstrap framework. From what they used, I got ideas on what i can add to my design system.


ATOMIC DESIGN PRINCIPLES

I proposed we practice this existing methodology — Atomic Design by Brad Frost. 

atomic_elements.jpg

ATOMS

On the Atomic level, this is the smallest basic elements. Atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional. Consists of:

STRUCTURE

  • Grid = 12 column CSS grid.

  • Layout = cards of different sizes, shadows and borders accounting for variety of uses.

STYLE

  • Typography = used Roboto and all its weightings due to it having more of a professional and “trusting” visual feel.

  • Colours = primary, secondary, tertiary, highlight, borders, alerts and colours for all design system use cases.

  • Icons = based on FontAwesome’s icon repository.

  • Buttons

MOLECULES

Like in chemistry, molecules are groups of atoms bonded together that take on distinct new properties. They are simple groups of UI elements functioning together as a unit.

SEARCH

  • Lable atom, Text input atom and a button atom.

Molecules-search.png

ORGANISMS

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms.

HEADER

  • Search form molecule, Header 1 atom, Sub Header atom and tertiary navigation molecule.

HERO

  • Photo atom, Header 2 atom, Body text atom and a button or a link atom.

Molicules-header.png
Molecules-hero.png

TEMPLATES

Templates place organisms into a layout and articulate the design’s underlying content structure. They can be swapped out and replaced in sections. In these templates must account for the dynamic nature of content, so the properties of components like image sizes and character lengths for headings and text passages needs to be accounted for. At this phase I design for responsive behaviours. Templates are the page’s skeleton and we’re able to create a system that can account for a variety of dynamic content, all while providing needed gauidelines for the types of content that populate certain design patterns.

  • Size of Hero image

  • Character count of Header 1 

  • Character count of sub header

  • Does it have a Button or a link ?

  • Character count of Header 2

  • Character count of sub header

  • Is it a Button or a link ?

  • Three CTA

  • Size of image

  • Is it clickable ?

PAGES

Pages are specific instances of templates that show what a UI looks like with real representative content in place. 

RESULTS

Compass launched in Sept 2020 and is composed of building blocks that help web managers create websites that are:

  • On-brand and consistent across vcu.edu

  • Accessible and compliant

  • Easy to manage

Compass will help web managers efficiently build websites, minimizing development costs. These efficiencies should open up time for web managers to be more strategic in their roles to analyze and optimize VCU websites, making our web presence more impactful.

BRAND CENTER