PEGASUS Design System

Patterns, Elements, and Guidelines for Accessible Styles, Usability, and SEO


Introduction

  • Organization: Dallas College
  • Product: PEGASUS 
  • Timeline: 2018-2020

Background

For years, the web teams of DCCCD (Dallas County Community College District) were segmented and siloed. We were all working on separate websites built on different platforms. But, in 2017, the first step was made to integrate all nine websites into one unified experience.

Nine different websites hosted on different platforms with different navigation.

Problem

There were now over 20 different content editors, web designers, and developers, on eight separate teams, all making edits and creating pages on one website. The duplication of efforts resulted in constantly reinventing the wheel only to produce pages that were inconsistent and at times, confusing.

We needed to create guidelines and standards that:

  • made it easier and faster to build web pages
  • helped craft a unified, consistent, and expected experience on all district web pages
  • explained how, when, and why to use visual elements and patterns
  • ensured consistent implementation of accessibility and WCAG compliance
Inconsistent design patterns

My Role

While I led this project, I was also the primary contributor. Those contributions included:

  • Developing a strategy and framework for the system.
  • Planning and organizing the information architecture for the site.
  • Writing descriptions and use cases for patterns, guidelines, components, and templates.
  • Designing the layout and format of the PEGASUS site.
  • Coding the individual components as well as the entire website using HTML, CSS/SCSS, and an HTML preprocessor (Jekyll).
  • Launching and implementing the system/site.
  • Developed and delegated development of patterns in Adobe XD for quick prototyping.

Tools & Methods

Atomic Design

HTML/CSS/SCSS

Bootstrap

Siteimprove

Jekyll

Adobe XD


Process

Research and Strategy

Empathize

User Research

Before PEGASUS, we had a rough web style guide that provided a lot of the patterns that we could use on the website but it lacked explanation and context. So, the first thing I did was talk to my team to find answers to these questions:

  • How often do you use the style guide?
  • How beneficial is it to your workflow?
  • What is it missing?
  • What would improve your workflow?

The answers I learned were not surprising but they did help me focus on the improvements that would provide the most value:

  • Move from one very long page to many smaller pages, making it easier to navigate and digest
  • Organize patterns and elements into an intuitive structure
  • Explain when/how to use certain components
  • Provide abbreviated cheat sheets that are easy-to-reference

Conceptual Research

To determine how to organize and structure all of the patterns, I studied Brad Frost’s concept of atomic design:

  • Elements: The simplest pieces of UI design like typography, color, icons, etc.
  • Patterns: A combination of elements that can be more flexibly used
  • Components: Special patterns that are interactive or have very specific use cases
  • Templates: A combination of patterns and components to make either a module template (section of a page) or a page template (a whole page).

Technical Research

I knew that the library would need to live outside of the content management system we used for the main website because it needed to be standalone. But managing 25+ static HTML pages would be out of the question to maintain.

Enter Jekyll– the flexible and dynamic generator of static HTML sites. With this tool, I could easily maintain as many pages as the library would need.

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 I outlined based on Atomic Design, I mapped each element, pattern, and component. And now I had a structure and sitemap. 

A diagram showing the information architecture for the PEGASUS site.
A diagram showing the information architecture for the PEGASUS site.

Design & Development

There were a variety of pieces that constituted the development of the PEGASUS site:

  • HTML/CSS: For the new Dallas College website, the entire stylesheet was reorganized and re-examined. We began using SCSS to generate the stylesheet. And all the HTML was rebuilt from the ground up.
  • Writing documentation: We wanted users of PEGASUS to have clear directions on when, why, and how to use the various patterns and elements, as well as notes for responsive design and accessibility.
  • Visual design and graphics: I created templates for the layouts of the pages and designed all of the icons and banners used on the website.

Adobe XD Libraries

To make full use of the updated sets of patterns and elements, they needed to be adapted and designed in Adobe XD. We saved them as colors, typography, and components within XD so we could use them for fast wire-framing and prototyping.

Styles brought into Adobe XD

Solution

  • PEGASUS stands for Patterns, Elements, and Guidelines for Accessible Styles, Usability, and SEO
  • Brings consistency in visual design and code
  • Library allows for much quicker page builds
  • Clarity about how and when to use elements
Screenshot of the PEGASUS page

Conclusion

PEGASUS is currently referenced several times a day by every member of the team (including myself). As we’ve hired and onboarded new team members, this documentation has been incredibly valuable as a training tool and handy reference guide. We try to update, fix, and append it every chance we can. 

Examples of PEGASUS In-Use

Here are examples of pages created using the design language established by PEGASUS: