JasperReports Server Visualization Selector Tool

Define Structural and Behavioral Requirements

The old visualization selector had a very rigid design that made it incredibly fragile. New visualization types are frequently added to the selector, and it wasn't originally built to flexibly handle this. We needed to have a flexible structure that could handle an unknown number of visualization types. Because the number of visualization types was constantly growing, we also needed to make sure users could easily find a specific chart type in a large list of chart types.

Incorporate Existing Components

We had already built our own component library containing components that lent themselves well to a more modern-looking visualization selector. We planned to stick to a similar structure as the old visualization selector, so it was just a matter of putting the pieces together. We did play with the placement of various elements during this phase, but nothing new had to be conceptualized for the framework of the selector.

Create New Graphics

The icons in the old visualization selector were aesthetically outdated and looked poor on high-resolution displays, so we redesign every icon. All three designers on the project designed and created these new icons in Sketch. We used the SVG format so the icons looked great on both standard- and high-resolution displays.

Prototype

Interactive prototypes were constructed in InVision because we needed to show the desired functionality to stakeholders before the design was handed off to developers. These prototypes also served as a reference for the developers and QA as the selector was being built and tested.

Build the Design

We had a central branch that was the source of truth for all the components. Within this branch it was standard practice for me to construct complex components as a resource for developers. Following this practice, I put together the pieces of the visualization selector and handed it off to developers.

Final Design