Test Query Modal

The modal where users can preview the results of the database query using the Test Query Modal needed to be redesigned for the new user interface. This modal provides a way to validate which machines were part of the query and which intentionally weren’t included to be redesigned from the old user interface look.

Case Study

BACKGROUND

The existing modal in the Java GUI interface provided a list of three possible results: Included, Excluded, and Failed. There wasn’t a way to view each list separately - only together. I needed to design a version of the user interface using the new components from the web-based user interface. The process of loading the results is time consuming so providing the user with cues that it was still running was important.

MY PROCESS

I looked at the existing outdated user interface and thought about how the user might use the list. Understanding the long list of results without being able to filter it seemed difficult for the user to understand. I had used the visual filter at the top on a previous project and thought it would be perfect here.

I mocked up the modal using the new components, and added the visual filter, and used the expandable row to show the additional information and added the spinners in the visual filter and in the results table displayed with the results were being generated.

SOLUTION

The Product Manager had not anticipated adding the visual filter at the top but was very pleased with how easy it was to use and understand. In research studies users were very pleased with the improved design.