CHART EDITOR UI REDESIGN
Elevating a chart editing tool through accessible, discoverable UX improvements
PROBLEM
The UI redesign decreased platform usability and accessibility
Forsta Visualizations, a dashboarding platform, recently launched a beta version of its updated chart editor. The redesign introduced a new layout and replaced the previous text-based navigation with ambiguous icons. As frequent users, my team and I found the new interface difficult to navigate, which led to a noticeable drop in efficiency. To address these usability issues, I proposed a redesigned interface that brings back familiar text-based tabs and reestablishes a clearer, more intuitive workflow for building and editing charts.
SOLUTION
Created a familiar layout and implemented power-user capabilities to streamline and support workflows
The new design reintroduces a familiar, modular layout that mirrors users’ natural chart-building flow—reducing misinterpretation and helping users locate settings with ease. The addition of a Shortcuts tab, tailored for power users, streamlines advanced customization and supports a range of workflows.
SOLUTION
RESEARCH
UI modernization should not negatively affect user accessibility
Through heuristic analysis and competitive analysis, I discovered that Forsta’s updated interface sacrificed clarity for modernity—replacing intuitive text-based tabs with ambiguous icons, disrupting users workflows. Meanwhile, competitor platforms like Power BI, Looker, have kept the "old" menus - such as in klipfolio - in their modern interfaces These findings revealed a critical gap in Forsta’s approach: modernization should enhance, not hinder, usability.
O1 HEURISTIC ANALYSIS
Match System & Real World
Over-Reliance on Abstract Icons and Nonlinear Workflow
The beta interface replaces clear text-based tabs with icon-only navigation, creating ambiguity—especially for new or infrequent users—due to the lack of tooltips. This shift disrupts the use of familiar language that aids intuitive navigation.
​
The new summary table also introduces friction, appearing editable at a glance but redirecting users to other sections for changes. Compared to the old interface’s modular, step-by-step flow, the new layout feels fragmented and may interrupt users’ natural chart-building process.
O2 COMPETITIVE ANALYSIS
.png)
Description
Power BI is Microsoft’s user-friendly analytics tool, known for its intuitive drag-and-drop interface, seamless integration and wide range of visualization options.
Description
One of Power BI's top competitors, Looker takes a slightly more modern approach to its interface. It's rated highly for its intuitive design and strong self-service analytics capabilities.
Description
Klipfolio is known for its cloud-first approach and real-time dashboards. Praised for its flexibility and customization options, it’s a favorite among data-driven teams looking for dynamic visualizations and easy integrations.
UI Features
Drop-Down Menus
Tooltip Definitions
Tabbed Navigation
Quick Edits Icons
UI Features
Drop-Down Menus
Tooltip Definitions
Tabbed Navigation
Quick Edits Icons
UI Features
Drop-Down Menus
Tooltip Definitions
Tabbed Navigation
Quick Edits Icons
SOLUTION
DESIGN PROCESS
Create intuitive navigation & test usability
To address the usability challenges identified in the beta version, I explored multiple navigation models to improve clarity and streamline the chart-building workflow. In my research I uncovered common patterns across leading dashboard platforms. Through iterative design explorations and early-stage user feedback I brought back a more intuitive navigation system. These refinements were validated through A/B and preference testing, helping ensure the final design was both efficient and easy to navigate.
O1 ITERATIONS
Original
Iteration 1 - Text + Icon
Iteration 2 - Tooltip
Final Version - Tabbed Menu
I reintroduced tabbed navigation to reflect the old chart editor’s clarity and logical structure. During early testing, users found the beta's icon-only sidebar confusing—especially with key sections grouped under ambiguous icons like "Data." Tabs offer clear, labeled access to distinct editing sections, reducing guesswork and improving efficiency. This familiar, modular layout aligns better with users’ mental models and restores a more intuitive, step-by-step workflow.
Why Tabbed Menu?
O2 USABILITY & PREFERENCE TESTING
Task 1
You want to change the statistical level of your statistical testing on your results. Find where you would do that?
Beta:
4
1 - Cannot Complete
Completed w/ Ease - 5
Feedback:
"It was a bit confusing to locate the 'analysis' section as I had a hard time understanding the navigation icons"
"The organization of the section feels a little confusing with the number of drop-downs included - overwhelming to look at"
Redesign:
5
1 - Cannot Complete
Completed w/ Ease - 5
Feedback:
"This felt very easy to find, the 'analysis' section was easy to locate"
"I liked the formatting once enabling the 'significance test' it felt easy to digest and find"
Task 2
You want to change the font in your chart where would go to locate that?
Beta:
2
1 - Cannot Complete
Completed w/ Ease - 5
Feedback:
"Although I was able to deduct quickly that the paint brush meant format I struggled to find the font section"
"Not sure why the dropdown label was called "general" confusing to understand why font would be there"
Redesign:
5
1 - Cannot Complete
Completed w/ Ease - 5
Feedback:
"Clear labeling of dropdown menu helped me locate the desired edit faster"
"Easy to understand the formatting tab"
Task 3
Try to accomplish the following three tasks: change the chart type, move the base size label to a different position on the chart, and re-sort your legend.
Beta:
2.5
1 - Cannot Complete
Completed w/ Ease - 5
* Re-sorting the legend was not a completable task in this scenario as the original design didn't offer the capability
Feedback:
"Edit was difficult to find the section that held the 'chart dropdown' as series settings didn't make much sense to me."
"Struggled to identify the location of the settings. Seems odd that a editor tool would not allow for the capabilities of sorting a legend or axis."
Redesign:
4
1 - Cannot Complete
Completed w/ Ease - 5
Feedback:
"Using familiar terminology to the platform aided in understanding where to where each edit could be found"
"I found the base size being in the variables section slightly confusing; however, I did like how all base size edits were grouped together."
NEW 'SHORTCUTS' FEATURE
Introduced ‘Shortcuts’ tab that enables advanced users to customize a panel with their most frequently used editing options. This reduces the need to navigate through multiple tabs and dropdowns, allowing for faster, more efficient chart adjustments.
88%
Nearly all respondents rated the new 'shortcuts' feature easy to use and stated it would significantly improve their workflow efficiency
Feedback:
"There are cases where I want to quickly edit each individual chart without having to navigate through the tabs an dropdowns"
"Customizability of the tab seems easy to learn and use."
"It streamlined my workflow—no more wasting clicks navigating tabs I don’t use."
FINAL DESIGN
REFLECTION
O1
O2
Learning Usability Testing
Determining whether a design is successful ultimately depends on how users interact with it. To make this a complete and meaningful project, I knew I had to validate my designs through usability testing to confirm they truly improved efficiency. The challenge was that I had never conducted a user test before, and the process initially felt daunting—especially ensuring users could complete tasks while also providing useful, actionable feedback. What helped was shifting my focus to the data I needed. Once I identified the insights I was aiming for, I was able to design clear, purposeful tasks that revealed how users navigated the interface and where improvements were most impactful.
​​​​​
Future Product Development
Although my current design focused on implementing a new navigation system and a shortcuts feature I want to recognize other features that were brought up during the usability & preference tests. The first being implementing a feature that allows users to implement multiple edits across all charts in a dashboard, enabling users to gain even more efficiencies within their workflow. Second, is incorporating quick edit icons that allow users to perform small edits - font size changes, base size locations - without having to jump into the editor itself. These features would be more targeted to power users; however, with proper wizards or tooltips they can increase efficiencies across all user types.