Open source meets open design (system)

Nowadays, we still audit the PatternFly website before designing and adding new components to our design kit. This prevents us from duplicating work if there is already a PatternFly component that may fit our needs. Most of PatternFly’s components are suited for product or app environments, but if we see something that our marketing team could use, we discuss and prioritize.

Used fundamentals as standards

When writing website documentation for our components, we only wanted to write standards that are fundamental to each component. No fluff, no gray areas, just clear language about how things should be used. We also wanted to include multiple sections so that a user gets the complete picture of a component or pattern—so when they leave the website to start working, all of their questions will have been answered.

Created a single source of truth

The design kit and website can both function as sources of truth. The design kit is the source of truth for the latest components and patterns whereas the website is the source of truth for documentation.

Small team, big launch

A scrappy team of designers, developers, and architects set out to build the design system website in three months. Although the website was just an MVP, it included more than 20 component pages and hundreds of images.

Outcomes

Better internal collaboration

Even before the website launched, we were sharing the design kit with other internal teams and external vendors who also use Adobe XD. Now that the website is live, multiple teams across the organization continue to use the design kit and reference the website for their projects. These resources, in combination with a shared voice, allow us to have more productive conversations and richer working sessions with other design and development teams.

Shared library and hub for documentation

We are unified in our goal of creating harmonious user experiences and developing web components together as a collaborative team. We have shared the design kit across Red Hat teams and even with external vendors like agencies.

Eating our own pet food

Our team has been using the design kit and website for a multitude of projects now as a way of eating our own pet food or as a form of quality control. In the first of our series of quarterly design system surveys, we have received the following testimonials.

“I've been extremely impressed with how much the design kit has grown over the past year, from the range of screen views to the detailed themes. It’s such a helpful and necessary resource.”

“The limited amount I’ve used the website, I’ve loved it! I think it’s especially a great resource when working with vendors.”

“Overall, I love the website! It's so clean and there’s so much well-thought-out information.”

“Love how it's organized, super easy to find what I'm looking for.”

Growth

New ways of collaborating

Collaboration with the PatternFly team has evolved beyond checking their website every now and then. We attend their design meetings, have discussions with them in Slack, and sometimes contribute to their design system.

Collaboration with our developers has improved as well. For some projects, designers and developers will pair up and work closely on building things together instead of designers handing off specs to developers and then working on other projects. This process of collaboration and communication has transformed the way we work and improved the quality of work that we create.

Surveys and spreadsheets

We rely on our team members to express their opinions about the design kit and website, positive or negative. Their feedback not only helps us understand how to make improvements, but it also gives us ideas about what features to put on the roadmap. Our philosophy is to build what our users want based on their feedback, not dictate what they should or should not use based on our assumptions.

We are also looking into creating a forced ranking spreadsheet in order to prioritize features. This will help us a) audit what features we need to build, b) leverage data to learn how important those features are, c) have more streamlined discussions with developers, and d) provide visibility or reporting to stakeholders about the future of the project.

Get involved

The design kit is maintained in Adobe XD. To view the kit link or request access to use it in Adobe XD, visit the Get Started page. To view our GitHub repo, click here.

To contact the design system team or if you want to contribute, start on the UX website.

It has been quite the journey and our work is far from over. We want to build the best product that serves Red Hat employees, customers, and vendors. If you would like to share ideas with us or participate, let us know.