PatternFly is an open source design system, founded in 2014 by the Red Hat UXD team, created to meet the needs of enterprise software applications.
I contributed to the community through design and documentation reviews, new design patterns, and building and maintaining a Sketch symbol library.
Designing in the open
Initially, the majority of Red Hat customers only used one product and cross-product consistency was not a priority. The PatternFly open source design project was launched to create a seamless user experience across the product portfolio.
As an open source project, PatternFly both benefits from the best ideas, no matter their source, and contributes research-tested expertise back to the community. By 2022, more than half of contributors were not members of the Red Hat UXD team. It is one of the few design focused open source projects with contribution opportunities for designers of all experience levels.
Example Red Hat UIs before PatternFly
Example Red Hat UIs after PatternFly
PatternFly design contributions
I led the PatternFly Web team tasked with reviewing existing PatternFly components against use cases for web properties. We evaluated 61 use cases specific to web properties and marketing needs:
- 32 were met by an existing PatternFly component.
- The team contributed 29 new or updated designs and design variations to meet the remaining use cases.
- Of those 29 components, I contributed 18.
My design for the accordion component for web-based use cases, compared to the accordion for use within products
PatternFly design kit contributions
The Sketch symbol library consisted of high fidelity components and developer specs. I contributed 43 components and shared responsibility for maintenance of the library.
Horizontal open tab specs
WebstaurantStore's internal product database, inventory, and logistics tools use the Admin Portal design system, based on the Ant Design system. However, each project team managed their own custom Ant themes and our Figma design library did not match the code in production
Creating centralized documentation, a complete design library, and a shared code repository for our designers and front-end developers to reference will enable our team to:
- Reduce design effort by using common patterns rather than recreating designs for each project
- Reduce development effort by using a common code library
- Provide a consistent experience for users when switching between apps
Documentation process
I am responsible for documenting how we are currently using component and design patterns across tools within the Admin Portal. When there are inconsistencies, I use UX best practices and research with our user base to define guidelines moving forward.
The documentation includes component or design pattern definitions and use cases, variants and when to or not to use each one, examples in context, and accessibility guidance for developers.
Year to date I have written documentation for 20 components or patterns.
Examples of badge documentation (L) and an excerpt of input documentation (R).
Phase 2 improvements
While creating documentation for the current state of our team's projects, I am also making notes of design and accessibility improvements we can implement in phase 2. Rather than tackling documentation and improvements at the same time, we are prioritizing creating a framework we can use in the short term that will allow us to quickly make updates for the long term.
Accessibility updates
- Increase contrast of all component borders to 3:1
- Increase contrast of all text to 4.5:1
- Style default buttons differently from inputs
- Add hierarchy between secondary and tertiary buttons
- Increase click target to 24x24px
- Add underline to links