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
Guided by Atomic Design principles
I wrote over 12,000 words for this guide
UI and Visual Design
With Adobe XD and Illustrator
With HTML, CSS/SCSS, Jekyll, Bootstrap
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:
- Conflicting and inconsistent design
- Uneven approaches to accessibility
- Duplication of effort among teams
- Lack of understanding about when and why to use certain patterns
Research & Strategy
We needed a much stronger set of documented standards that would:
- Craft a unified, consistent, and intuitive digital experience to support the new brand
- Ensure consistent implementation of accessibility and WCAG compliance
- Leverage our existing experience and knowledge of Bootstrap
- Improve the efficiency and quality of building web pages while also reducing frustration in web staff
- Be clear about when, why, and how to use patterns and components
Team Brainstorm & Workshop
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.
Adapting Atomic Design
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.
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.
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
Design & Development
The development of PEGASUS amounted to four major parts:
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.
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.
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.
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.
PEGASUS Design System
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.