ROLE
-
Conducted qualitative and quantitative research to identify pain points in the charting tool.
-
Redesign the charting experience, ensuring charts were accessible.
-
Managed iterative releases, gathered feedback, and improved usability, increasing completion rates by 20%.
TEAM
1 Product Designer + Owner (me)
2 Engineers
1 QA
1 Technical Writer
1 Content Marketer
Our core business users rely on charts to communicate key insights in infographics, reports, and proposals. However, the existing charting tool had major usability issues and lacked essential accessibility features, making it difficult for users, especially those using assistive technologies, to interpret data. Missing labels, poor contrast, and no screen reader support created barriers and hindered our ability to meet the needs of our diverse user base.
PROBLEM
User Pain Points
I conducted both qualitative and quantitative research to analyze how users interacted with our existing charts. Usability tests and session recordings revealed several key pain points:
-
Small, disorganized thumbnails made it hard to find the right chart type.
-
The settings panel was confusing, with redundant options complicating edits.
-
Users were frustrated by the need to manually save changes after each adjustment.
-
Many user-created charts lacked contrast, alt text, and screen reader compatibility, making them inaccessible.
Qualitative data also validate some of these findings and provided clear next steps:
-
20% of users edited a chart, with pie, column, and line charts were the most commonly used types, making them the priority for the MVP release.
-
Only 35% of users completed a design with charts.
-
"Save chart settings" was the most clicked action, indicating frequent manual saves and adding unnecessary clicks to the workflow.
-
Majority of "Click on Chart Settings" actions were related to label editing.
.webp)
How might we...
How might we help users turn data into accessible, meaningful visual stories?
User Objective
Make it easier for all users to create, understand, and engage with data visualizations.
Business Objective
-
Engagement Rate: Increase the percentage of users editing charts from 20%.
-
Completion Rate: Increase the percentage of users completing chart designs from 35%.
-
Encourage usage of accessibility features in charts, such as chart patterns and alt text.
ACCESSIBILITY & USABILITY FIRST
Redesigning the charting tool gave me an opportunity to rethink how users engage with data. I want to build an intuitive charting experience with a focus on accessibility.
My approach was grounded in the POUR principles from the Web Content Accessibility Guidelines (WCAG). These principles became the foundation of the redesign:
-
Perceivable: Provide accessible color palettes, chart pattern fill options, and alternative text support to make charts more accessible to users of assistive technology.
-
Operable: Ensure users can access and edit the chart using keyboard navigation.
-
Understandable: Allow users to apply data lables, axis titles, and legends for clarity.
-
Robust: Ensure the charts are compatible with screen readers, and that alt text is included in exports.
Optimizing the Charting Experience
Before diving into accessibility features, the first step was to make the chart creation process more intuitive. The interface was refreshed to better align with our branding while enhancing efficiency and accessibility:
-
Redesigned chart menu: Charts are now organized into categories, making it easier for users to find the right chart type quickly.
-
Streamlined editing panel: Reduced visual clutter by grouping related settings together, making the most-used options easier to access.
-
Chart swapping: Users can instantly switch between chart types without losing their data.
-
Support keyboard & tab navigation: Full support for keyboard shortcuts ensures that users who rely on non-mouse navigation can interact with the feature.
Making charts accessible
I also introduced several tools to help users create data visualizations that meet accessibility standards:
-
The built-in contrast checker allows users to check contrast ratios between chart elements and backgrounds.
-
The chart pattern fills option applies patterns to charts, making data easily distinguishable.
-
All charts now support alt text descriptions, with an automatic generation feature that creates descriptions with just one click.
Making charts accessible
I also introduced several tools to help users create data visualizations that meet accessibility standards:
-
The built-in contrast checker allows users to check contrast ratios between chart elements and backgrounds.
-
The chart pattern fills option applies patterns to charts, making data easily distinguishable.
-
All charts now support alt text descriptions, with an automatic generation feature that creates descriptions with just one click.
Building a Scalable Chart Library
To make this feature scalable, I built a library of chart components, reusable styles, and standardized icons. This system not only ensures consistency across all chart types but also to streamline future expansions and updates.
SHIP FAST AND ITERATE
With just two months to release the first version, we took an agile approach—breaking the project into manageable slices and continuously refining them based on user feedback.
Our priority was to ship a functional and accessible charting tool from the start. We focused on the most commonly used chart types, such as pie, donut, bar, and column charts, while introducing key accessibility features early on, including contrast checking, chart patterns, and alt text support.
Listening, Testing, Improving
After releasing the first slice, I conducted usability tests and in-app survey to measure its impact, and the response was positive:
-
76% of users found the new chart editor easier to use.
-
Users liked the alt text and pattern fill options, making their charts more inclusive.
However, user feedback also highlighted areas for improvement. Users requested a better data table editing experience, more precise data controls, and flexible label styling options. This feedback gave us a clear roadmap for the next iterations.
Second Release:
Refining the Experience
Building on initial feedback, we added support for CSV file uploads to make data entry faster. We also implemented advanced formatting controls, such as decimal precision and separator options, giving users better control over their data.
.png)
Third Release & Beyond:
Expanding Possibilities
With a solid framework in place, we expanded to 16+ chart types, including stacked bars, histogram, and scatter plots. We continued to refine customization features, while iterating rapidly based on real user feedback.
IMPACT
The redesign of the charting tool resulted in notable improvements:
-
We saw a 30% increase in user engagement, from 20% to 26%.
-
We didn’t see the expected engagement with accessibility features in charts. Future updates could include in-product nudges, AI automation, or preset accessible chart options to encourage more usage.
-
The completion rate increased by 22%, indicating that more users are successfully finishing their chart designs.
This project also laid the groundwork for future updates. We were able to roll out new chart types more quickly and efficiently in the following quarters. This scalability ensures that we can meet user demand for more accessible chart options.
Learnings
Ship, Iterate, Repeat
Adopting an agile approach showed me how products evolve in response to real user feedback. By rolling out features in slices and gathering real user feedback continuously, we refined the design at each stage, creating a more user-centric and polished final product.
Designing for Usability and Accessibility
Creating a good editing experience, especially for complex tools like charting, requires a balance of usability and functionality. Making it accessible added another challenge. Through thoughtful restructuring and a focus on user needs, I learned how to design an interface that’s both inclusive and functional.