How a Designer Proposes and Pitches Data-Driven Improvements

Adding logic to a designer's intuition

This part definitely needs improvement!

As a product designer, you always have the urge to fix your app's flaws and bring its quality to the next level. However, the areas for improvement that a designer spots aren't always visible to everyone else. This is especially true when there's no negative feedback reflected in the metrics. If there aren't any palpable issues, it might actually be more rational not to "bother" making improvements.

In the Alarmy app, there was a screen that didn't have any obvious issues, but still felt like it needed improvement through my designer eyes. It's this Alarm Editor screen right here.

Looking at this screen, I had a vague thought: "There is a lot of unnecessary information causing high visual fatigue." I felt that the icons in the list were completely dispensable. Because the Alarm Editor icons represent "Alarmy-specific features" rather than universally used ones (like trash cans, magnifying glasses, or hamburger icons), I also wondered, "Do these actually offer immediate help in understanding the features?"
But this was purely my own hypothesis, backed by zero evidence. Since the editor screen is a page that heavily impacts user usability, I couldn't persuade everyone based solely on my own thoughts.

Adding evidence to the hypothesis

So, I decided to use an eye-tracking tool called VisualEyes for my rationale. VisualEyes is a tool that uses AI to predict and visually represent user eye tracking, interest distribution, and complexity. You can easily use it by installing a plugin in Figma, Sketch, or XD.

When I uploaded our existing Alarm Editor screen, this was the result.

Let's look at the three sets of data: Attention, AoI (Area of Interest), and Clarity.

• Attention: This screen predicts user eye-tracking and expresses it as a heatmap. You can see that the user's gaze doesn't linger much on the icons. They pay less attention to the icons than expected. Also, their gaze only stops at the first few letters of the feature names.

• AoI: This represents user interest in a designated rectangular area. It shows how high or low the interest is in a specific zone compared to the average interest across the entire screen. Since the information that needs to be clearly conveyed in the editor list is "icon + feature name," I designated this section.

• Clarity: Literally indicates how clear the screen is. The green areas are uncomplicated and clear, while the red areas are complex and unclear. The clarity of the current screen is 75%.

Interpreting the data from the existing screen goes like this:
1. Users don't pay much attention to the icons.
2. Users don't focus on the entire feature name. (They only pay attention to the first word.)

So, how can we improve this screen?

If we remove the icons that aren't getting attention anyway and increase the color level of the feature names, wouldn't that help users focus more on the "feature names"—the most important information on the editor screen? Let's check it out right now.

• Attention: Compared to the existing screen, the gaze now lingers across the entire feature name.

• AoI: Interest increased across all list items, except for the "Label" at the very bottom.

• Clarity: By removing the icons we suspected of causing visual complexity and increasing the contrast of the feature names, clarity improved to 82%.

Once intuition is verified with data, it's no longer just intuition.

Working with evidence showing numerical improvements across several items allowed me to have more persuasive conversations with our members, and proceed with the task with high confidence as a designer.
The VisualEyes tool I used also offers free basic features, so I definitely recommend giving it a try when you lack the evidence to pitch your ideas to stakeholders. :)

VisualEyes - Optimize your UX via Attention Heatmaps and Clarity