PatternFly is Red Hat’s design system and React framework for building UIs. Many of Red Hat’s products source their UI patterns primarily from PatternFly, including Red Hat’s flagship product, OpenShift. PatternFly has users all over the world and serves projects outside of Red Hat as an open-source community, which means that anyone with a great idea can contribute.

I led the design of Patternfly.org, as well as served as the Scrum Project Manager for the PatternFly team, organizing engineering and design release cycles for the design system.

Customer Insights & Ideation

I partnered with the user research team to execute two user research studies that informed the design of the website and design system layout. In our user research studies, we focused on testing the site navigation and new users’ understanding of what the website offered.

Planning & Scope Definition

I planned the site redesign and advocated for design and engineering resources to implement the site, ultimately advocating for a Visual Designer and 3 engineers. At the same time, we were building the design system with 15 designers and engineers I managed to see our design system components come to fruition.

Design Execution & Validation

I executed journeys, flows, and wireframes. I designed wireframes with responsive design principles in mind for desktop and mobile enabled web. We validated these designs with our community. I unified 4 disparate web platforms, including a GitHub community in one place.

Project Management

I led the design system team in 16 successful releases of the PatternFly design system components. My project management activities included hosting daily stand-up, sprint planning, hosting community wide demos, and grooming our development stories.

Leadership

I led PatternFly community meetings and demos to keep our community informed about the website development and design. We published our work on YouTube to make it available to the whole community.

THE CHALLENGE

Create a new website for the PatternFly v4 release, while simultaneously building the community vision for the release to ultimately increase adoption.

I followed the stages above to complete a comprehensive design process. My design process included strategically working and building relationships across teams to bring the PatternFly design system to life.

As part of the design process, I identified problems that need to be addressed as part of the website redesign.

1. Users found content hard to find.

2. Users had complaints about the navigation.

3. We needed a new brand for PatternFly 4.

4. Components were not a11y.

This user research informed the next phase of the design process, the low fidelity wireframe stage.

We created low fidelity wireframes that showed different navigational paths and we had both a quantitative study, as well as a quantitative study. We wanted to record what navigational path was the quickest, as well as which navigational path was easier to understand.

These low fidelity wireframes explored different ways we could accomplish the goal of creating a new PatternFly website. We successfully determined we would move forward with the left-hand low fidelity wires.

After deciding on a direction during the low fidelity wireframing stage, to create the high fidelity wireframes I brought in the branding, content, and font. We continued to user test the platform and improve the documentation.

Conclusion and Next Steps

After we implemented patternfly.org we learned that it was a success with PatternFly users. Here’s what we heard from users:

“PatternFly did a great job with the new release”

“The PatternFly site has really improved”

“The new site navigation is much easier to use”

We weren’t done after this great feedback. Next we wanted to refine more features after the site MVP, and we asked users to file their issues on GitHub. We have worked on addressing their feedback ever since.

My work didn’t stop there. A big part of my job was socializing and evangelizing other teams to adopt the design system and use it consistently in the Red Hat product suite.

• Socializing the system: I met with other teams frequently and published our progress on the PatternFly design community to answer questions about the design system. This way we could ensure that over 90% of Red Hat products would adopt the PatternFly design system.

• Providing trainings to designers and engineers: We hosted Sketch based PatternFly trainings to designers and code-based trainings for engineers across Red Hat.

• Attending conferences: Conferences allowed us to get in front of the design system users and socialize the changes for their feedback.

• YouTube community: Our community meetings allowed community members to contribute, educate the community, and demo components.

• Scrum project management: I was the project manager for 15 designers and engineers as we released the components.

Even after the website was implemented, we continued to release components in the GitHub community.