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.
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
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 delegating development of patterns in Adobe XD for quick prototyping.
Tools & Methods
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 in 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 approach 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 off Atomic Design, I mapped each element, pattern and component. And now I had a structure and sitemap.
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 of 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 in 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.
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
Conclusion
PEGASUS is currently referenced several times a day by every member of the team (including myself). As we’ve hired and on-boarded 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:
