Voices of UX
Collaborative UX: How PatternFly’s custom Sketch library elevates team productivity
When multiple designers work on the same project, consistency is key. Learn how Red Hat’s UXD Beijing team uses custom libraries to streamline design collaboration.
Consistent design can pose a challenge for one designer on a project, let alone three.
I’m one of three Interaction Designers on Red Hat’s Beijing UXD team contributing to the Keycloak Admin Console rework project. In mid-2019, I started the design in Sketch with the latest PatternFly library, right before PatternFly updated styles and fonts. After these changes were made to the library, our team of three updated designs individually. Since we hadn’t set any internal standards, we used meetings to check and verify our individual work. During the conceptual phase of the project, we didn’t focus much on consistency in our design; instead, we focused on creating the right user flows.
When we progressed into the high-fi phase, though, we met roadblocks due to small variations between designs. In our meetings with developers, they raised questions about those design differences. Why did the same features appear with different styles across different screens?
The PatternFly Sketch library helped us find a sustainable way to design enterprise products, but determining and supporting consistent component usage across our designs became a challenge. On a team with multiple designers, we couldn’t just rely on individual interpretations to deliver consistent design patterns.
The solution was clear: We needed to create our own Sketch symbol library to align each contributing designer.
Using the PatternFly 4 design library as a base, we built our own symbol library to use for our Keycloak Admin Console designs.
Before creating our custom symbol library, our workflow dividing and conquering different design tasks. Documenting the components we used was essential to maintaining consistency across the console, but these reports didn’t regulate design choices on their own.
A single designer with complete ownership of a design can use PatternFly without a hitch — every portion of their work is naturally consistent. Discussions about layout format, alignment, font sizes, and other visual elements don’t get overwhelming because conflicting opinions aren’t likely to surface.
On a project with multiple design perspectives, however, variations are bound to happen. Though our project requirements were straightforward (every page must be coherent and clear), the division of work left opportunities for disparities between product areas. Each designer worked on a different part of the console, which allowed small design differences across our design work.
For instance, variation can commonly occur when using components like labels. Across our designs, we used labels for a status called Enabled. Even though the status name remained consistent across each screen, the labels in the general PatternFly library are highly customizable — a designer might initially use a blue-filled label for Enable, but another designer might forget and use an alternative blue-outlined label for it instead. Changes like these create disparities between designs and lead to delays in the overall design process. Because of setbacks like these, our team had to make design decisions again to come up with centralized solutions. Small details generated big differences and considerable hurdles for us to jump through.
Reporting our component usage for each page became a constant need for — and barrier to — to agile design work.
In the beginning, we had one person do the design patterns for some common features and send them to Google Drive, so the rest of us could download and use them in our designs. But this process led to an onslaught of downloads, one for each and every change. Requiring downloads like this meant each designer had to remember to download updated files after review meetings, something that could be easily overlooked.
We began to see earlier versions bleed into new ones. One missed download would cause inconsistencies across new designs. Our navigation design, for example, underwent several iterations by its original creator, but another team member was still using an earlier version in their designs.
We realized manually downloading design updates wasn’t sustainable, but creating a custom library tailored to our project might be.
First, we drafted a document of pages and features in the Keycloak console which were exclusive and needed consistencies. Each designer wrote down their specific ones that met the project prerequisites. Haley was in charge of gathering requests and making general patterns for them.
I wrote down a pattern of Popover Hints on the document of features that needed to be added on some pages in the console, which let other designers implement my design themselves in Sketch. In the past, we uploaded the Sketch file for that specific pattern to Google Drive for others to download. Now, with this dedicated document, we can quickly add it as a symbol in the Keycloak library and publish on the Sketch Cloud for everyone’s use. My teammates Haley and Kun followed the same steps to expand the library to include their designs.
Once the custom Sketch library was published by the owner designer, the other two designers could download it from the Sketch Cloud website and implement it into their local Sketch library. Each time the library is updated, all designers will be notified by the top red alert on the Sketch App. By clicking on that alert, they can manually update their library to use new design patterns in their own designs.
Our custom Sketch library infused our work with more consistency, a benefit that has resonated well with our three-piece team.
Haley, Interaction Designer and owner of our Keycloak custom library, says she’s very pleased with its function. “As the lead designer, I definitely think it’s a highly useful and usable method, and wish we could have applied this at an earlier time!”
Kun, Associate Interaction Designer, says the library helps our tight-knit team stay nimble. “The library is full of flexibility and consistency, It helps us greatly improve our efficiency as a small team.”
I agree with my teammates. The library not only has general patterns but also includes specification marks for front-end developers to review, which is awesome!
The journey ahead: productive, efficient, and centralized teamwork
Though we started using this library at nearly the last stage of our design process, we all expect a more integrated use of it for future projects, perhaps in the beginning or middle stages of design work. By using a custom Sketch library, we can reduce repeatable work as PatternFly and project updates occur.
Currently, we’re still trying to figure out a way to let everyone in the Keycloak design team contribute their own design patterns to the library on the Sketch cloud. In the meantime, we’re enjoying working with it as a team for our remaining product work and we hope, if your team creates its own custom library, you will too.
We posted our completed designs on the Keycloak Design website for easy collaboration, feedback, and documentation. Feel free to take a look at our work!
Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.
