Rethinking the Lightbox

Visualytics is Meta4 Insight’s data analytics tool. It uses what we call lightboxes to display data in the form of various graphs. 

As Visualytics grew in complexity, its lightboxes were caked with features, leading to a less than intuitive interface. Our goal was to redesign Visualytics so that onboarding new researchers is seamless and immediate. 
April— June 2020
I am owning this project from concept to launch alongside the engineering team (Hongyu Zhou and Yujia Lan) with support from
Kenneth Ott (research director). 
This project is being implemented as we speak! Please check in later for final results.  

︎The Problem

There is a steep learning curve to understanding how to use the lightboxes.

Protobrand is in a period of growth, which means new market researchers need to understand how to analyze data on our platform fast. Unfortunately, the current layout of lightboxes is too confusing to comprehend right off the bat. 

What a lightbox used to look like.

I conducted user interviews with 7 Visualytics users, focusing on their workflow within the lightbox and their expectations when using the tool. 

We found that:

  • New researchers spend at least 2 weeks to 6 months just to understand the basics of how to navigate through the lightbox. 
  • Researchers learn to ignore outdated modules, some of which take up a majority of the screen
  • Some modules take a long time to load— interrupting the analysis workflow

We listed out the information we gathered and created an affinity map to identify trends:

︎The Solution

Reorganize Visualytics’ lightboxes under our new product design system.

Visualytics and its lightboxes are already powerful analysis tools— the issue, however, is how their features were positioned. The lightboxes sacrificed usability as it accrued complexity over the years, causing researchers to withstand long wait times and redundancies under tight deadlines. Furthermore, users were not using the lightboxes to their fullest potential due to the steep learning curve. This alone has shortchanged its capabilities. 

Our solution was to first identify the research teams’ needs and improve them under Plotz, our product design system. 

A Post-Its map of Visualytics I made on my window. This is a fun exercise I like to do to help me identify the different parts of a product and where they should go. Special thanks to #COVID19 for the WFH creativity.

A Hotjar heatmap. This page alone recieved 900 clicks, a majority of them on the Filter panel, Admin dropdown, and Add Lightbox button.
Sidebar: notice how the bar graph runs into the image cloud. Yikes.

We prioritized features by defining our MVP. The interviews taught us that the lightbox could be stripped down to its bare minimum and be better than what researchers were already using. 

Consolidating features in a way that makes sense: 

The lightboxes had all of the functions outlined in our MVP map. Now that all the excess stuff was identified and pushed out of the way, we could focus on how to best consolidate the necessary features so that they would benefit the researchers. 

Seeing as the lightbox is really broken into two parts— Filter and Graph— I looked at what parts could fit into either of those two categories. 

The Filter panel was in need of reorganizing:

Not all graphs are the same— some, like a bar graph, allow the user to define a timestamp for the data they’re looking at. We found that this could be optimized by moving to the left with the rest of the Filter options.

I broke the Graph section down to its most basic parts. It needed a label to describe what kind of graph it is, an area for action items, the graph itself, and for some graphs, an area for removed elements. 

A Word Cloud lightbox. In this particular scenario, users can view respondents’ data in the form of a Word Cloud, as Themes, or in a Color Wheel. To reduce the time spent dragging and dropping unwanted elements from the graph, users are able to hover over an element and X it out of the graph, which then becomes a chip at the bottom. 

A Response Latency plot lightbox. In this scenario, users need to be able to view the exact location of the data points.

We also had to take into consideration the pain points that involved lagging. Lightboxes handle a lot of information, which takes time to load especially when you’re scrolling vertically to see a new box.  Through testing, the engineering team and I adopted a tab system that would only load one lightbox each:

We observed how researchers analyzed data as they normally would to determine the prototypes’ areas of improvement.

I sat with researchers and watched as they satisfied tasks on the prototypes and listened to their thoughts. 

Fortunately, the learning curve was dramatically less steep— credited to the lack of clutter found in the Filter panel. The newest user still had to learn what certain terms like Profile and URL Variables meant, however, she found the redesign was much easier to learn than what she was experiencing with currently. 

Here’s a table that quantifies our success: 

Had we had more time to improve Visualytics, I would have paid closer attention to how Plotz, our design language, suits our design needs. As the company plans on expanding Visualytics, we will undoubtedly add different kinds of graphs and filtering options that will put our design language to the test. My goal would be to make sure our design language is scalable as Visualytics grows. 

Made with ❤ by sukanyaray_