TL;DR?

As a UX Designer on Microsoft Clarity, I led the redesign of the filtering experience on Microsoft Clarity

Project summary

Investigated filtering on Clarity, identified issue & re-framed the task, and led the re-design of the advanced URL filtering on Microsoft Clarity.

Quantifiable impacts

The process

The product

Clarity is a behavioral analysis tool that helps Clarity users to understand user interaction within their websites. Users can filter URLs to view heatmaps & user session recordings.

The initial task

Initially, I was tasked with two things: rewriting the Regex guide strings for URL filtering on Clarity and adding a button to allow users to filter multiple URLs simultaneously.

The issue & re-route

Clarity received user feedback that URL filtering  was confusing. The PM asked for better strings, but I found the core issue was the use of Regex itself.

Regex isn't for everyone

At first, I didn’t know what Regex was. And neither did other designers on my team. Moreover, per user feedback, a majority of Clarity users were not familiar with Regex.

Overwhelming learning curve

Clarity provided a Regex help guide, but it was hard to find, boring, and overwhelming. This list below is just the tip of the iceberg.

Problem statement

After identifying the gap between our team and the users, I presented my findings and gained consensus to re-route the project. Here is the problem statement for the new direction.

Research & Ideation

To see how other competitors have solved this issue, I did a competitive analysis.

What do users want?

Competitors used a 'sentence builder' with operators for URL filtering. I chose to implement this in Clarity as it is intuitive and caters to users both with and without Regex knowledge.

Multiple rounds of brainstorming sessions

To come up with a  new design & logic that makes sense throughout Clarity, I collaborated with the PM to pick our brains and I was able to come up with a solid solution.

New URL filtering in filters

Before

The only option to filter URLs was using Regex. Also, filtering multiple URLs wasn’t supported.

After

The new design for filtering URLs is similar to writing a sentence, which users are familiar with. Also, the new design allows editing or deleting of any component of the filter inline.

New URL filtering in Heatmaps page

Consistent filtering experience

Users can select operators in the Heatmaps page as well. Also, a panel for URL filtering opens up when user clicks ‘+’. to provide consistent experience within the given limited space.

Reflection

Working on the URL filtering feature with a sentence builder and operators was a rewarding challenge. The project required a deep dive into competitors' operator usage and an in-depth study of Regex in Clarity. By analyzing these elements, I developed a set of operators tailored to meet the diverse needs of Clarity's users.

• The process sharpened my skills in user research, problem-solving, and interface design, ultimately leading to a more intuitive and efficient user interaction.
  ‍
  
• Most importantly, I learned to question tasks, even if confirmed by others, as there is always a chance that the real core issue has not been identified.