Context
Charts are an integral part of Primer's Observability product dashboard. Observability acts as a central nervous system for a merchant’s payment infrastructure, offering a holistic view of their entire transaction ecosystem. From the moment a customer initiates a payment to the completion of each transaction, every step is recorded, providing them with invaluable insights into the health and efficiency of their payment systems.
My role
As the design systems designer, the project was under my ownership while working closely with another designer who owned the Observability product.
Project duration
2 months (intermittent)
First iteration
Majority of the charts we use are line, area & bar charts, sometimes as a combination of two types as well. We also cater to various other use cases of data visualizations like table charts to ensure that our merchants have the most optimal scanning experience with their data. The data that we show in Observability often requires us to superimpose multiple data points which made it necessary for us to rely on color to make proper distinction. This is why you see so many legend keys and such colorful charts.
Instead of being completely static, one can interact with our charts by hovering over the chart elements to see more specific details about that specific node. This helps increase the focus on that specific chart element and reduces noise from other data points.
During the collaborative design process with Daniel (from the design team), we successfully implemented several positive aspects:
-
Ensured all text elements meet the required color contrast of 4.5:1.
-
Incorporated clear labels for each element within the charts.
-
Enabled hover focus functionality for chart elements.
Identified problems
In some later stages, we identified some areas for improvement while demoing the product to some merchants and also during internal demos:
-
Chart colors lacked sufficient contrast, impacting readability.
-
For high cardinality data, the charts get too chaotic which made it harder to focus one a single element (lines) from the graph.
-
The chosen chart colors did not take into account the needs of color-blind individuals. (Lead PM on this product was also color-blind)
-
There was no keyboard accessibility - which could limit usability for certain users.
While our first approach considered accessibility in the design process, we missed out on a few details from WAI which we aimed to address now. According to the Web Accessibility Initiative (WAI), it is advisable to provide a detailed description for complex images, such as those represented in the charts. This can be achieved through alternative text (alt text), tooltips, or by directing users to a separate page containing a comprehensive summary of the chart’s content. Additionally, the WAI Non-text contrast guidelines recommend maintaining a contrast ratio of 3:1 between graphical elements to ensure their visibility.
Another valuable resource is this article which discusses the use of hover interactions to focus on chart elements, reducing reliance on color alone. To help our case, our current charts already support this functionality, allowing users to hover over elements for more information. However, the charts currently lack keyboard navigation capabilities, preventing users from accessing the elements via keyboard commands.
Overall, while we accomplished some critical design goals, there were notable areas where we could have enhanced the charts’ accessibility, legibility, and usability for all users. This is why we decided to revisit the charts and try to tackle these issues.
Explorations
We went for exploratory approaches that change how our charts look completely. At Primer, we strive by diverging our ideas to the limits and taking help & different perspectives from other designers, developers, and other members of the team. These are a few approaches we took to reduce our dependency on colors and take help from other visual elements. We tried using dotted patterns for the line charts, introducing visual nodes and also a monochrome palette.
While the charts successfully adhered to theoretical color contrast requirements and accessibility practices, we encountered some flaws when testing them with full-color vision & color-blind users on our dashboard, like:
-
In tight spaces, the presence of nodes within the charts made it even more challenging for users to differentiate between the lines.
-
The effectiveness of dotted lines diminished when the chart contained more than four lines, as the dotted pattern became difficult to discern.
-
Although a monochrome palette improved distinguishability between different lines, it created difficulties in mapping the lines to the corresponding legend keys.
Sometimes what works in theory doesn’t work exactly the way we want it.
This experience was not in vain. It highlighted the need for better contrast, even for users with full-color vision. Due to the complex nature of multiple graph elements crossing each other, maintaining a 3:1 contrast ratio among them proved unfeasible. These insights emphasized the importance of finding alternative approaches to address the challenges posed by tight spaces, dotted lines, and color mapping.
Similar challenges arose when exploring patterns and a monochrome palettes for our bar charts.
-
The patterns used in the bars became harder to distinguish from one another due to their size.
-
Utilizing high-contrast colors with a 3:1 ratio (including white) did not align well with our brand identity.
However, we did discover a few effective strategies:
-
Introducing a 1px gap between the bar elements proved helpful in enhancing the distinction between bars.
-
The monochrome palette worked well in this context because the legend keys followed the same order as the bars, making it easier to establish connections between them.
We also considered implementing an accessible high-contrast mode for the entire dashboard. After careful consideration, we decided that we’ll pursue this option later in the roadmap and focus on fixing the usability issues on the chart level for now.
Solutions
We had to make several trade-offs considering what we uncovered in our explorations implementing accessibility features. These insights imposed constraints on our design choices, leading us to deviate from conventional approaches that could potentially undermine the user experience. As a result, we made the following changes to address these considerations and redefine charts at Primer.
Updated colors & order
We enhanced the color system by introducing more vibrant colors compared to the previous version. We decided to stray away from the WAI guidelines suggesting a 3:1 contrast ratio between different chart elements. Our testing revealed that it wasn’t helping our use case much since we have multiple chart elements overlapping each other and our requirement to adhere to the brand identity.
The image below illustrates how the color order in the bar charts made it easier to distinguish between the different graph elements.
Better legend interactions
Rather than solely relying on colors and graph elements, we expanded our approach to enable more interactions within the charts. By incorporating focus elements within the chart, users can now:
-
Hover on a legend key to preview the respective graph element.
-
Click on the legend key to lock the respective graph element.
-
Use the keyboard to navigate through the legend keys and easily correlate each key with its corresponding graph element.
This improvement significantly reduced the reliance on color when multiple chart elements are introduced, enhancing accessibility and inclusivity for all users.
Results & conclusion
The project was a big success in terms of increasing the usability of our charts and the Observability platforms as a whole.
-
According to Hotjar, we reduced the rage clicks down by 28% in the 30 days after release. (data from 203 sessions)
-
Qualitatively, the small improvements were warmly accepted by our users, some of them saying "This is so much better."