In 2018, Workday began replacing its charting library based on D3 with a new library designed for larger data sets. The team updated the design system to address various concerns, with the most critical focus being the accessibility of fill patterns used to represent color.
I began the engagement by researching the current fill patterns used in the d3-based visualizations. I found that the existing patterns did not align with the current design system and were often difficult to interpret at a small scale. Therefore, I needed to create a new set of patterns to address these issues.
I adopted a clean slate approach to design the fill patterns. I began by selecting basic elements to examine the density in space. As I explored options from less dense to denser patterns, the foreground and background unveiled new shapes to work with. For instance, crossed lines formed diamonds in the negative space.
The chart system needed to support a wide variety of chart sizes. The biggest challenge involved finding fill patterns that suited small spaces. I collaborated closely with the developer, iterating through multiple prototypes to select patterns that fit well in those confined areas.
The existing implementation used circles as identifiers in the legend. To enhance the legibility of fill patterns, I proposed using rectangle shapes that would make the fill patterns recognizable at a small scale.
Once I selected patterns, I began to incorporate colors from the design system at Workday.
Defining the logic for how to use the solid colors in the fill pattern mode was the next step in determining the appropriate level of legibility. How could we determine the right level of fidelity in our patterns?
I worked with the developer to create a tool that evaluates the contrast levels between charting colors and the fill patterns to calculate a score based on legibility standards. It used color interpolation methods for blending between the two values. I used this tool to generate a set of high contrast color and fill pattern pairs.
After several iterations, I selected a version of the interpolated color for each fill pattern. We shipped this first version with limited internal testing, primarily based on the internal team's feedback. I normally would want to test the selection with users and with different screens, but we were working under intense time constraints and shipped my recommendations for the first release.
The project was well-received by users and the color and fill patterns improved accessibility across the platform.