Evolving the PatternFly Visual Language

As the application landscape evolves, design resources must also evolve. The PatternFly community has rapidly grown and technology has evolved so we are now able to push the boundaries. PatternFly was originally designed with a utilitarian mindset, focused on supporting data dense management applications. This mindset shaped the design of the PatternFly we see today.

With the growth of PatternFly, we now have a more diverse community. This diverse audience brings a much more diverse set of applications and use cases. Specifically, they have brought consumer facing applications, which have a marketing focused aesthetic that is missing from our current design. These new consumer style applications bring different styling expectations such as, bold, colorful graphics which help them stand out from their competition.

In an effort to support these new consumer style applications, we have taken a few steps to evolve our current design to meet these needs. Our goals are to create new graphically bold styling. The focus of this effort is on the look and feel – color, sizing, positioning, imagery, type, icons and will not affect content or interactions.

Since styling can be subjective, it is important to gather quantifiable data to inform design decisions. We conducted a desirability study to compare our current design against two new designs. All three concepts used the same content and interactions to easily compare.

Measuring Look and Feel

Desirability studies are designed to measure participants’ emotions by giving them a vocabulary of positive and negative word pairs that they can assign to each design. Additionally to ensure we received a definitive result, we also asked each participant to choose which design best described one of a series of positive attributes.

Twenty-two participants were lead through an identical workflow foreach concept. Then, they were asked to rate each concept, based on the provided vocabulary, and encouraged to share any additional thoughts for each. We also gathered additional information about the participants, such as company, occupation and their role.

The Concepts

Using the sample application content and Red Hat branding as a base, we designed three concepts. The control design uses our current PatternFly design styles. The new concepts use two different styling techniques to display content. The dark design relies on heavier graphics and imagery whereas the light design utilizes typography and color to establish hierarchy. We purposefully exaggerated each concept with the intent of generating a distinct reaction to more easily compare the desirability of each concept. These are just concepts, specifically designed to get a reaction, to validate a new visual direction.

The Results

We calculated the total number of positive and negative words associated with each design concept. A majority of the feedback was positive for each concept. The control design receiving majority of the negative word associations and the Light receiving a majority of the positive.

We broke down the words associated with each concept and arranged them by frequency. The saturation of the color is associated is scaled to reflect the frequency.

The control design received 44% of the total negative words associated with the concepts. As stated above, this concept reflects the current PatternFly styling, which was created with a utilitarian approach. The study reflects this strategy with the highest associated terms being “Useful” (20) and “Conservative” (9).

The dark design received neither the most positive or negative responses. The highest associated terms were “High Quality” (21) and “Confusing” (8). This concept was rated highly for ‘Unwelcoming’, potentially a result of the dark black and red values, which people tend to associate with evil.

The light design received 36% of the total positive words associated with the concepts. The highest associated terms were “Interesting” (22) and “Conservative” (5). Every participant rated this concept as “Interesting”.

We compared each design across the total positive and negative word counts. You can see in each design how we improved or regressed as you look at the frequency across terms.

Overall Performance

Lastly, we asked users to choose between each design based on the positive terms above. For example, which design is the ‘highest quality’? You can see in the results below, participants rated the new concepts higher than the current PatterFly design by a margin of at least 50%. The darker design rated highest for “High Quality” and “Easiest” to use while the lighter design rated highest for “Innovative” and “Satisfying”.

We also examined the data by role. There was a distinct preference between participants with business and design backgrounds. The business participants preferred the dark while the designers preferred the lighter design. One theory could be that participants with a sales background prefer the more bold and impactful designs because it helps their products stand-out from the crowd whereas designers prefer a more nuanced and subtle approach.

In summary, the data shows that users prefer the newer designs three times as much as the control.

What’s Next?

Since these designs are just concepts to test a direction, there is still a lot of design decisions and work left to be done. There are many considerations that these designs do not address.

This is only the starting point. It will take time to create a great solution to fit the PatternFly community’s needs. As we progress, we will continue to keep you updated.