Microsoft Clarity stands out as the premier product for comprehending user behavior, enhancing products, and advancing businesses. The recent makeover of Microsoft Clarity isn't solely about its sleek new look; it's a functional and aesthetically appealing upgrade to your workspace, crafted with an emphasis on usability and consistency.

Role: Lead UX/UI Designer, Creative Director

Client: Microsoft | Clarity

Timeline: 5 months

Research

To enhance user experience, we recognized the need to simplify our navigation, which was previously three levels deep and significantly pushed the content down. I conducted usability testing comparing a side navigation (side nav) with a top navigation (top nav). While the side nav appeared more modern, it ultimately proved less usable. Users preferred the top nav, as they appreciated having the words associated with the icons, which made navigation more intuitive and accessible.

Improving UI & features

In our quest to improve the user interface, we focused on creating a usability-centered design that is both simple and intuitive. By leveraging the principles of Fluent Design, we ensured a cohesive and familiar experience while infusing our own unique elements of delight. These custom touches added dimension and visual interest, enhancing the overall user experience without compromising on simplicity and functionality.

Cultivating a brand story

A robust brand is anchored by a narrative and a distinct brand identity that steers its choices. For Microsoft Clarity, the core elements of brand identity include delight, innovation, and significance. The metaphor of a cozy village was a significant inspiration; it allowed us to embrace the characters residing within it and infuse the design with cool, comforting color tones.

Meet the family

Incorporating brand characters can significantly enhance the user experience of your product. They captivate users' attention during crucial interactions within your product. Bruno, the drowsy and irritable bear, highlights errors, perhaps ambling lazily across the screen. Finnick, the cunning fox, appears and disappears, sparking curiosity. Meanwhile, Clementine, the playful cat, is ever-present to contribute her playful antics.

Creating a design system 

The rebrand aimed to capitalize on Microsoft's product space and expand the limits of visual design. It aligns as necessary and builds upon Fluent to develop a comprehensive catalog of assets. The design is responsive to mobile devices and adjusts to the user's role. The dashboard is a reflection of the user, aiming to be both personalized and significant.

Resounding success   

The rebrand resulted in an impressive 11% increase in user reengagement and a 12% boost in user sign-ups. This success was driven by extensive feedback from both leadership and our users. Leadership provided valuable insights that helped shape the strategic direction of the rebrand, ensuring alignment with our company’s vision and goals. Simultaneously, we actively sought feedback from our users through surveys and usability testing, which allowed us to refine the brand identity to better meet their needs and preferences.

The overwhelmingly positive feedback from both internal teams and external users highlighted the effectiveness of our approach. Internal teams praised the new brand for its clarity and alignment with our mission, while users appreciated the enhanced usability and visual appeal. This collaborative effort and the resulting positive reception underscored the success of the product launch, making it a standout achievement for our team.