Visualization Type Selector

Users find and choose the best visualization type faster after a redesign of this visualization type selector

Problem

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 visualization type, but the visualization selector was visually unappealing and difficult to use. Additionally, it was poorly engineered. 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

We would redesign the visualization selector using our new modern 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 than the existing components. 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 contained a component that wasn't in the new library, we'd build it and add it
The Work

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.

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, three of which already existed:

Step 3: Create new components

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

Final Design

Finally, the design

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