design systems

Workday began to replace its D3-based charting library with one made for larger data sets in 2018. I worked directly with the engineer building this functionality to design a feature to view charts with color-blindness.

I am excited about making the internet more accessible for all, so this was an exciting project to work on.

The engineer created a custom tool that I was able to rapidly prototype several iterations that would narrow down the correct fidelity of the patterns.

The Workday Design System team updated the design system to include fill patterns for better accessibility across the platform.

Chart Feature for Accessibility

In 2018, Workday began to replace its D3-based charting library with one made for larger data sets. The Workday Design System team updated the design system to include fill patterns for better accessibility across the platform.

Bespoke Existing Fill Patterns

At the project's start, I studied fill patterns in our D3 visualizations and found they didn't align with the design system and were unclear at small scales.

Elements to Examine Density

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.

Search for the Correct Density

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.

Working with Color

Once I selected patterns, I began to incorporate colors from the design system at Workday.

Modes of Color Selection

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?

Referencing Legibility Standards

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.

Testing Values of Interpolation

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.

Well Received and Incorporated

The project was well-received by users and the color and fill patterns improved accessibility across the platform.

In addition to designing new features for design systems, I utilize Figma to efficiently create, edit, and share files with developers and other designers. When working with Apiture on their development portal, I created a component library to enable accurate and consistent design creation, while preparing for the addition to the AUI Design System.

Design Systems

design systems