Boosting the usability and increasing adoption through chart redesign
This case study outlines how a simple bug fix turned into a full charting system transformation—boosting performance, customization, and paving the way for AI-powered insights that will change how users interact with data.
Overview
Team
Product Designer
Product Manager
Developer
Timeline
Jan - Feb 2024
In Development
Cateogry
Web, Mobile
Line of Business
B2B SaaS
Project Overview
The chart redesign was initiated based on customer feedback from the pivot table redesign project. Users expressed frustration with similar issues in the charting tool, such as performance problems, limited customization, and poor usability. This led us to expand our focus to address these pain points in the charting system.
Importance to Solve
Some users started to consider alternatives due to chart limitations where they have purchased Kissflow for its reporting capabilities. To retain them promised to provide a better experience and address these challenges.
We expect to reduce churn rate and boost user adoption by 80% by solving this.
Problem
Users faced slow performance, lack of customization, and unresponsive designs, especially with large datasets. No-code users found the charts complex, and mobile users struggled with responsiveness.
Initial Research
We collaborated with the Customer Success team to review recorded calls and analyze the bugs identified from the user list, alongside feature requests from the majority of customers. Key findings included:
Bugs: Users faced issues such as inaccurate data visualization, unresponsive charts, and slow load times.
Feature Requests: Customers widely requested more customization options, real-time filtering, and better mobile performance.
In over 200 support tickets logged in the last quarter, 34% were related to the charting tool.
The chart shows the top feature requests from the customers compared to the number of votes.
Customer Interviews
To gain detailed insights, I selected a customer from each key user group based on the data we gathered. This allowed us to cover a broad range of feedback and better understand the varying needs of each group:
Customers
Low-Code Builder User
Basic User
Heavy Data User
Heavy Data User
Basic Users
These user group were generally satisfied with current charts but requested basic features like sorting and filtering.
Heavy Data Users
These user groups worked with large datasets provided detailed feedback on performance issues, bugs, and slow load times.
Low-Code Builder User
These user groups reported the issues in apps such as no customisation options, responsiveness and usability.
These research laid the groundwork for creating effective method of redesign.
Internal Team Feedback
We interviewed the Professional Services (PS) team, who help customers build low-code apps on Kissflow. Since they closely work with customers, they frequently encountered issues with the reports. Their insights included:
Responsiveness: Reports were not mobile-friendly, they don't adapt when it's used in smaller size and didn’t adapt well to different screen sizes.
Lack of Customization: Users couldn’t change background or chart colors, limiting their ability to align reports with their brand's identity.
Competitor Analysis
To guide the redesign, I conducted a competitor analysis with two key objectives:
Data Visualization Guidelines: I studied the best practices from Google, Microsoft, and SAP to ensure our charts adhered to industry standards usability and accessibility.
Competitor Feature Comparison: I analyzed their chart visuals, customization options, performance, accessibility and responsiveness and identified essential features and functionalities. This helped identify gaps in our chart report and shape the direction of the design.
Tools Analyzed: Chargebee, Freshdesk, Zoho, Posthog, Monday.com, Amplitude, HubSpot, ClickUp, Chargebee, Plausible Analytics, Asana, Glide and others.
These research laid the groundwork for creating effective method of redesign.
Core Problem Identification
Given the large scope of the project, we initially planned to release the basic features based on research findings and user requests. This phased approach allowed us to:
Address immediate user needs by implementing critical features first.
Lay the groundwork for the full chart redesign, ensuring that essential functionality was delivered upfront and that subsequent phases could build upon it.
We identified three key problems with the existing charting system:
Outdated System: The charting infrastructure was not designed for the low-code builder system, making it unsuitable for modern needs.
Charting Library Limitations: The limitations of the existing library led to performance issues, slow load times, and restricted customization.
Lack of Design Guidelines: Without established design guidelines, charts were inconsistent across products, leading to fragmented user experiences and a lack of cohesive visual identity.
Planning
Once the core issues were identified, I moved forward by planning the redesign breaking it down into three key phases
Chart Redesign
Design Guidelines
Design System Component
These phases ensured the redesigned charts addressed both enterprise and no-code users' needs while improving overall performance and usability.
Chart Redesign
Once the core issues were identified, I moved forward with the redesign, focusing on four key areas.
Visuals
Usability
Interactions & Transitions
Accessibility
The final design incorporated all the feedback and phases of the redesign process, resulting in a visually cohesive, highly customizable, and fully responsive charting tool. The updated charts allow users to:
Phase 1 - Feature Release
The new charts include advanced features like real-time filtering, sorting, drill-down capabilities, and data zoom & scroll, providing users with flexible ways to interact with their data.
Drilldown Data
Data Zoom & Scroll
Sort
Advance Filter
Video showing features of chart report
Phase 2 - Chart Redesign
After multiple iterations we have finally improved the chart usability, visuals, experience, and interactions. Based on the user's feedbacks.
Video showing improved charts design
Customized Charts in Dashboard
Different Charts In Dark Mode
Design Guidelines and Reusable Components
After completing the redesign, I created comprehensive design guidelines to ensure consistency across all products. These guidelines covered everything from visual design to interactions, helping maintain a cohesive user experience. Additionally, I built reusable components in Figma, enabling designers to easily implement the new chart designs in future projects, ensuring scalability and consistency across the board.
Impact
Did We Achieve?
32% increase in user engagement.
74% adoption rate for new chart features.
Chart features is being used 10 times per session on average.
Though the redesign is still in the development, we anticipate a 30% further reduction in support tickets and a 80% increase in chart usage once the full visual redesign and performance improvements are rolled out
Post Launch
What Did I Learn?
The project evolved from what started as a simple bug fix into something much more complex—establishing guidelines, creating components, and redesigning the charts. Throughout this process, I had to quickly adapt and learn on the go.
I was also managing other features at the same time, which taught me how to prioritize and balance multiple tasks without losing focus or quality.
I gained confidence in creating design guidelines and building charts from scratch, giving me the ability to handle similar tasks with ease and efficiency.
The project also gave me the opportunity to work closely with developers, especially when we hit roadblocks with the charting library. I researched alternatives, brought them to the table, and collaborated to find the best solutions.
