Managing visual complexity w/ contrast and progressive disclosure
Overview
Revenue teams consistently track and measure various metrics throughout their day to monitor their performance, deal health, and overall sales pipeline. These teams create benchmarks to be able to quickly determine if results are doing well or need more attention. There is an expected level of cognitive load users manage while analyzing data visualizations, but once a user has to figure out what they are looking at, then they become frustrated, abandoning the report.
Role
As the UX Designer, I collaborated closely with a product manager, a sales engineer and the Director of UX to design a solution and define it's interactions. Through early collaboration, I was able to understand the problem and define a design goal of reducing the benchmark line visual complexity/clutter.
Problem
Customers are struggling to identify the values and labels connected to the benchmark lines. Due to the complexity of the data visualizations customers need to be able to easily distinguish overlapping benchmark lines from each other.
Goal
Help reduce users cognitive load when comparing performance metrics to company benchmarks by improving their visual contrast and interaction flow.
Design
My first design decision was to research ways to design with contrast because we established through early that we couldn't rely on color to distinguish the lines from each other. After a couple of iterations, I evaluated the pros and cons of each solution and landed on using a hover interaction to identify switch between dashed (normal) and solid (active) lines.
I presented my solution to the Director of UX who suggested changes to the visual weight of the lines, the alignment of the labels and the hover interaction. She also challenged me to ensure that I was prioritizing displaying critical information for customers. I met briefly with my Product Manager to ask about the most important information for users and to ensure that my designs were still aligned with the goals of the project.
Ultimately, we made the decision to prioritize the label of what's being measured and to remove the numeric value from being permanently visible to only being visible during the hover interaction. I also reduced the visual weight of the dashed (normal) lines by adjusting the transparency and enhancing the design interaction.
Solution
For the final design iteration, we decided to remove the numeric benchmark value and prioritize the benchmark label inside of the pill, which identifies what's being measured. The ever-visible solid lines were changed to dashed lines with an 75% opacity to represent an alternate interaction state and provide less visual distraction. The hover interaction changes a dashed line to a solid line with 100% opacity and a tooltip displaying the numeric benchmark value.
