Optimizing Usability and Workflow: PEGASUS Design System

UX Design Case Study


I created the PEGASUS Design System to standardize web design at Dallas College and is based on the concepts of Atomic Design. I used Jekyll, Bootstrap, Adobe XD, and SiteImprove to create guidelines for faster page-building, a consistent user experience, and accessibility. It serves as a valuable training tool and reference guide for the web team and beyond.

PEGASUS stands for Patterns, Elements, and Guidelines for Accessible Styles, Usability, and SEO.

My Roles and Responsibilities as Lead Contributor


Guided by Atomic Design principles

Information Architecture

Guided by Atomic Design principles


I wrote over 12,000 words for this guide

UI and Visual Design

With Adobe XD and Illustrator

Front-End Development

With HTML, CSS/SCSS, Jekyll, Bootstrap

Prototyping Templates

With Adobe XD


  • Until 2017, Dallas County Community College District (DCCCD) had eight separate websites on different platforms, with different designs, and managed by different teams
  • When we integrated all eight websites into one unified platform, I created a very basic style guide, based on Bootstrap, to help support the different web teams
  • In 2020, DCCCD restructured as Dallas College and a new, integrated needed to be built


As we transitioned from eight separate teams to one, we had to address the following problems:

  1. Conflicting and inconsistent design
  2. Uneven approaches to accessibility
  3. Duplication of effort among teams
  4. Lack of understanding about when and why to use certain patterns

Phase 1

Research & Strategy

We needed a much stronger set of documented standards that would:

  1. Craft a unified, consistent, and intuitive digital experience to support the new brand
  2. Ensure consistent implementation of accessibility and WCAG compliance
  3. Leverage our existing experience and knowledge of Bootstrap
  4. Improve the efficiency and quality of building web pages while also reducing frustration in web staff
  5. Be clear about when, why, and how to use patterns and components

User Research

Team Brainstorm & Workshop

  • Empathize
  • Define

As we transitioned to a new brand and website, I held a workshop session with my team (users of the design system) about the style guide we had already been using.

Recommendations From Workshop

Simpler pages

Move from one very long page to many smaller pages, making it easier to navigate and digest

Intuitive Nav

Organize patterns and elements into an intuitive structure

Use Cases

Explain when and how to use patterns and components

Cheat sheets

Provide abbreviated cheat sheets that are easy-to-reference

Conceptual Research

Adapting Atomic Design

  • Define

To develop an organizational scheme for PEGASUS patterns and components, I studied and adapted Brad Frost’s approach of atomic design into the following framework:


Elements are the most basic and fundamental building blocks (type, color, icons)with which to build pages and layouts in PEGASUS.


When two or more Elements come together, they form a Pattern which is reusable block of generic content.


Specialized Patterns that are either for a specific use or contain any sort of functionality comprise a Component.


Elements, Patterns and Components come together to provide Templates for Pages, Modules or Snippets.

Technical Research

  • Define

The library would need to be standalone and live outside of the content management system we used for the main website. But managing what could become 10, 15, or even 25 static HTML pages would be out of the question because of how redundant parts of the work would become.

Recommendations From Research

Enter Jekyll. The flexible and dynamic generator of static HTML sites. With this tool I could easily maintain as many pages as would be needed.

Information Architecture

Using Siteimprove, I did an audit of how often patterns and components were used in the website and determined which should be cut, kept or cleaned up. 

Using the structure outlined by Atomic Design, I mapped each element, pattern and component. This provided the beginning to a structure and sitemap

Phase 2

Design & Development

The development of PEGASUS amounted to four major parts:

PArt #1

Designing the patterns and components

PEGASUS consists of five elements, 10 patterns, seven components, four utility types, and dozens of variations therein.

See examples of these patterns and components to the right.

1. Feature Cards

…are examples of a flexible pattern used throughout the website

2. Accordions

…come in two styles and two sizes to adapt to a variety of uses and needs.

3. People Cards

…were created to consistently showcase contact information for faculty or staff.

3. Award Cards

…provide a standardized pattern to display degree or certificate information.

Part #2

Writing the documentation

I wrote over 12,000 words across 40 web pages giving clear directions to users on when, why, and how to use components and patterns.

1. Accessibility

…guidelines are highlighted in yellow and signified with an accessibility icon and the heading “Accessibility Note.”

2. Best Practice

…notes tell users how and when to use components so their execution is consistent.

3. Style

…messages explain different ways that patterns can be styled and which class combinations to use.

PArt #3

Building the HTML and CSS

The entire stylesheet for DallasCollege.edu was reorganized and rewritten using SCSS. And I rebuilt all of the HTML from the ground up.


…allowed us to use organize our CSS file into chapters, sections, and subsections and use easy variables to control color, typography, and spacing.

2. HTML5

Semantic HTML5 was used not only in the creation of of components, but also the building of the PEGASUS website itself.

PArt #4

Creating site UI and graphics

I created templates for page layouts using PEGASUS elements and designed all of the icons and banners used in the website.


2. Icons & Graphics


PEGASUS Design System

Launched Product

Lessons and Personal Insights

What Did I Learn?

This entire process taught me not only how to design components but when and why.

PEGASUS was extremely valuable in training and onboarding new members to our team.

This documentation has saved our team hundreds of hours of needless churn and wheel-spinning.