How I Redesigned Charts And Created Guidelines?
Listening to our users' struggles with charts helped us to completely redesign Kissflow Data Visualization. The new "Data Visualization" enhanced usability and aimed to increase report utilization. This approach has made data insights more accessible, engaging, and enjoyable for everyone.
My Role
Lead Designer
Platform
Web & Mobile app
Timeline
3 Months
Overview
What Kissflow Does?
Kissflow is about building custom apps for business with no code and also offers tools for managing cases, and workflow efficiently.
"Quickly build, Market ready Apps in Moments"
What is the problem?
Imagine yourself trying to make sense of cluttered charts, searching for crucial data, only to find that it is hard to figure out within the stack of issues and outdated design. This daily frustration left our users feeling overwhelmed and dissatisfied.
Discover
What Was the Initial Plan?
After taking the initiative to improve analytics and reports, and successfully completing the Pivot Report improvement, the next item on the list was the Chart Report. I gathered data and examined existing UX issues and bugs, which led us to believe that only minor fixes were needed.
What Was the Unexpected Twist?
With the initial research and list of issues and bugs to fix, I started to work on the wireframe. However, the Kissflow app builder team came to us highlighting that our charts were not modern, lacked visual appeal and customization, forcing them to create custom ones.
This feedback made me realize that our charts needed more than just a fix; they needed a complete overhaul, which was a significant shift from our original plan. This meant we had to start over and understand user problems better.
Research
What User Expects?
To understand the problem, I conducted interviews with users and our revenue operation team to learn how they interact with charts in Kissflow and other BI tools. These conversations revealed several key issues,
"I have faced many issues when there's more data, the labels get overlapped. In the column chart, the zoom slider doesn't work right. When I click the legend, it removes the corresponding chart."
"Some features like enable data points don't work. When there are more data the chart overlaps with the header making it hard to use the charts properly."
"There are no customization options. I want to change colors and apply a theme to match my dashboard, but the charts don't let me do that."
"The charts looks dull and does not grab attention. The colors and layout makes it hard to consume data."
"They aren't mobile-friendly. On small screens, I have to scroll to see the charts."
Goal
What Were Our Main Goals?
Based on the research findings, we defined our main goals for the redesign:
Enhance visual appeal
Make charts mobile-friendly
Provide customization options
Ensure consistency across all charts
Improve usability
Ideate
What Did We Learn from Competitors?
To refine further, I looked at competitors' charts to understand their design, features, and layouts. I studied their guidelines on color use, chart types, labeling, and data accuracy. I also reviewed open-source chart libraries to find useful features for our charts, ensuring our redesign is competitive and user-friendly.
How Did We Plan to Solve the Problems?
With these insights, I planned to break down the improvement areas into three key categories:
Visuals
Improving typography, lines, colors, and arrangements.
Interaction & Transition
Enhancing user interactions and transitions.
Accessibility
Making charts usable for everyone, including those with disabilities.
However, there was a problem. The charts varied visually within Kissflow because different modules had different chart visuals, as teams built them without consistent UI guidelines. To unify the chart experience and design, I planned to introduce data visualization guidelines to the Kissflow design system.
Wireframe
How Did We Design the Solution?
I began the wireframing process. I also created design guidelines and added components to our design system. These guidelines were inspired by research and user feedback.
I tested the layout with stakeholders and users, they loved the initial improvements, but color choices were debated. Through multiple iterations, incorporating color psychology and harmony principles, a palette of 10 chart colors was defined, meeting WCAG color contrast and accessibility standards.
Final Design
Iterating the Design
The redesigned charts, based on thorough research and inspiration, were implemented and well-received by stakeholders and users. Stakeholders and users loved the improvements.
"I love the customisation options that are given, it would be helpful if you can make this live. I am waiting to use that."
"The new charts are visually appealing and fresh, I like how they look modern."
"Charts fit perfectly in the apps, even in 300px the chart was responsive."
View Designs >>>
Post launch
What We Achieved?
Though the redesign is still in the development phase, pre-launch user testing showed significant positive feedback. Users loved the enhancements, highlighting the success of the redesign. We are eagerly waiting for post-release data to track the real numbers.
What Did We Learn?
Throughout this project, several key learnings emerged,
User feedback is crucial
Listening to users and understanding their needs and pain points is essential for creating effective solutions.
Iterative process
Multiple iterations refine the product to better meet user needs.
Data-driven decisions
Analyzing usage data helps identify key areas for improvement and guides the design process.