Data visualisation library and design system components
The problem
- The lack of Design System guidance on charts leads to product inconsistencies that can confuse users and compromise usability and accessibility.
- Designers and engineers have to build charts from scratch every time a new one is added to the product, which adds time to projects.
Goals
- Create a Figma Data Visualization Library with accessible and standardized charts that designers and engineers can use in their projects.
- Build charts as design system components to improve quality and velocity.
Audit
- The first step was to try and understand the current state of Udemy’s charts, when and where we use them.
- This helped us spot patterns we want to keep as well as inconsistencies that could confuse users.
Benchmark research and best practices
- To guide our first explorations, we also looked at what other companies are doing.
- There’s a lot of literature on how to design charts to ensure readability and accessibility, and we make sure to consult them.
Design explorations
- Multiple iterations, explorations around color and accessibility, and design reviews.
- We collaborated with the design system team, engineers and accessibility consultants.
Usability testing
Research questions:
- Can users understand that they can scroll left/right to see more data points?
- Do users understand they can click on a data point to open the tooltip?
Results:
- Both options are effective to signal the chart is scrollable.
- Most participants didn't struggle to find the tooltip.
A data visualisation library with guidance:
A company-wide document that product teams can consult when building in-product data visualisation.
The document is a step-by-step guide to ensure easy of use.
Step 1: Use the diagram to pick a chart
Step 3: Consult chart specs
We focused on the 3 most used charts we have in-product:
- Bar/column charts
- Line charts
- Donut charts
Prototyped chart interactions
.jpg)
.jpg)
