Data Visualization Type Selector

A redesign of the visualization type selector enables users to find and choose the best data visualization type faster

Problem

Data visualization type selector was cumbersome to use and hard to maintain

One of the most common activities performed in JasperReports Server (JRS) is visualization creation. The first step in creating a visualization is to select the type, but the visualization selector was aesthetically unappealing and difficult to use. Additionally, its rigid structure couldn't flexibly adapt to the constantly growing number of visualization types.

In brief, we had three problems to solve:

  1. Outdated visual style
  2. Many usability problems
  3. Lack of scalability
Solution

Redesign the visualization selector using our new component library

A small team of engineers and designers were already building a custom component library that offered a more modern aesthetic, better scalability, and improved maintainability. The rollout strategy for these new components was to integrate them gradually—any new features or improvements would use the new component library.

We defined a three-step approach for the redesign:

  1. Improve the design for better usability
  2. Replace old components with new components
  3. If the design required a component that wasn't in the new library, we'd build it and add it
Design

Step 1: Improve the design for better usability

Identify usability issues and define the requirements to address them

Usability Issue

Requirement

Each visualization type was represented only by an icon. The icons had tooltips with the name of each visualization type, but that required the extra effort of a hover action.

Each visualization type needs to be clearly and quickly identifiable.

The dialog box was growing progressively larger as more visualization types were added, and there was no way for users to adjust the height or width. It would eventually reach an unmanageable size, which would likely frustrate users.

The dialog box should gracefully handle a growing number of visualization types, and users should be able to control the size of the dialog box.

There is no obvious way to confirm a selection—the only action provided is a close button at the top of the dialog box.

There needs to be a clear mechanism for confirming or cancelling a selection.

It was becoming more difficult to find a specific visualization type from the constantly expanding list.

A specific visualization type must be easy to find within a large list of visualization types.

Explore design ideas and create wireframes

To keep project scope focused, the UX team decided to keep a similar structure to the existing visualization type selector. After generating many designs within this scope and receiving iterative feedback from the product team, one emerged as the strongest option.

Step 2: Replace old components with new components

The new design contained four major components: dialog box, tabs, buttons, and icons. Three of these components already existed:

Step 3: Create new components

The new component library had an icon component, but it lacked an icon variant for visualization types. All three UX designers on the project contributed to designing and creating new icons.

Final Design

The new design improved usability and simplified maintenance

The final design provided solutions for the key problems identified early on, creating a better user experience:

  • The outdated visual style was replaced with a clean, polished design
  • Usability was significantly improved with clear labels and selection indicators
  • The implementation of scroll and resizability improved scalability
The Team

Other Team Members

  • 1 Product Manager
  • 1 Project Owner
  • 2 Developers
  • 2 UI/UX Designers
  • 1 QA Engineer

My Contributions

  • Designed components
  • Created icons
  • Built interactive prototypes
  • Constructed the design in HTML/CSS