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 


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.





Adobe XD


Huristic Reviews

Collaborative work sessions 

Spreadsheet building



  • 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.



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. 


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.


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


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:


  • Grid = 12 column CSS grid.

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


  • 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


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.


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


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


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


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


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 are specific instances of templates that show what a UI looks like with real representative content in place. 


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

  • On-brand and consistent across

  • 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.




Dallas, Texas 

Tel 757-572-4053


  • Twitter
  • LinkedIn