Microsoft Clarity is a user behavior analytics tool. It helps you understand how people are interacting with your website. You can see what's working smoothly and what's not, and test new designs and ideas.
Clarity provides
Instant heatmaps
See where people click, how far they scroll, and which areas drive the most engagement
Session recordings
Present recordings of user’s interactions for almost any scenario with customizable filtering
Powerful insights
Provide a behavior-focused data dashboard, pinpoint where users get frustrated, and isolate errors to quickly debug.
My focus
Focus 1: First run experience redesign
The challenge
Setup is a critical step to install Clarity before users can view their data, however, engagement during this experience has not met expectations. The screen below represents the current setup page.
We identified key pain points
The process
We began by rethinking the layout to make information more prominent by highlighting certain terms and deleting unnecessary words. We also ensured critical details were placed above the fold. To enhance engagement, we incorporated gamification elements, encouraging users to explore the product's full potential while providing the necessary resources throughout the journey. After several rounds of iteration, we arrived at a version I was satisfied with. To evaluate and refine the design, I conducted user research.
Research Details:
• Methods: Unmoderated usability A/B testing
• Materials: (A) Current FRE prototype & (B) Redesigned FRE prototype
• Platform: UserTesting.com
• Participants: 12 (To reduce order-effect bias, 6 participants saw the current setup first, and 6 saw the redesigned setup first.)
Satisfaction score
• Current setup average score: 4/5
• Redesigned setup average score: 4.9/5
When participants saw the current setup first, they rated it positively (5 or 4.5). However, when participants experienced the redesigned setup first, the ratings for the current design dropped significantly to 3 or 3.5.
The result
From user research, we can determine the redesign FRE serves the users better. The three horizontally laid-out cards present clear installation options. We’ve made these options obvious and included straightforward instructions. The Clarity checklist and gamified elements encourage users to complete all steps and maximize the product’s potential. Learning how to use the product can be engaging for the users and increase the installation success rate.
Focus 2: Branding
One of my primary roles was to redesign Clarity’s product icon to increase brand awareness; the new design incorporates Clarity’s core value, brand identity, and aligns with Microsoft’s branding guidelines. The product icon is used on the Clarity website, the live extension app, social medias, and merchandise.
Developing brand identity
I started by listing out Clarity's core values and used those to develop three key brand identities. I knew the product icon would play a big part in how we communicate the brand.
Choosing shape
Different shapes can help forge clear emotional and psychological connections between a brand and its users. I conducted research on common shapes used to communicate product value and image across industries:
I believe the triangular shape would work best as it conveys boldness, power, strength, and momentum. It looks like an arrow pointing up, providing a clear direction, and communicates growth. It aligns with our three brand identities: precision, direction, and momentum.
Deciding metaphor
Ice mountain
A symmetrical triangle with equal sides conveys stability, like a mountain. Clarity, empowered by our trusted brand, Microsoft, reinforces the idea of reliability and strength.
The ice, made of crystal-clear water, symbolizes transparency, much like the clarity we provide on user behavior. That’s why I believe an ice mountain best represents our brand image.
Drafting ice mountain
I then started exploring icon outlines that would best represent an ice mountain:
To compare which concept worked best, I added colors and paired them with text to see which idea stood out. Concept 2 stood out in design reviews for its simplicity and closer representation of an ice mountain.
Adding final touch
To refine the icon, I replaced the solid blue with a gradient to make the mountain more visually engaging and added corner radius to align with broader Microsoft product icons. To enhance the icy appearance, I incorporated white, blue, and purple inner shadows to make the icon stand out in light and dark theme.
Final deliverable
The final step was creating a scale ramp for various placements and use cases.
Appendix - Other theme explored
Before moving forward with the ice mountain direction, I explored various themes, but none gained consensus from the product team. Design is not a linear process—it involves several rounds of design reviews, incorporating feedback, multiple pivots, and refining ideas to arrive at a solution that resonates with the team and effectively communicates the brand's identity.
Focus 3: Visual design
Since Microsoft has moved on from 2D to 3D illustrations, I kept in mind I had to adapt to the company’s new visual design directions in order to create effective and inclusive visual assets. With this, my 2.5D illustrations aimed to bridge the gap during this transition. In the end, I learned from the process of finding a precise metaphor, converting ideas into engaging visuals, helping users quickly understand the message, and conveying Clarity’s desired information.
