microsoft viva new design & guidelines
overview
Microsoft Viva is the first digital employee experience that helps every person in an organization to connect, learn, engage, and grow no matter where they work. Viva empowers people to be their best.
The Microsoft Design Studio crafted a fresh visual identity for Microsoft Viva, unifying all design elements into a cohesive, and easily recognizable visual language.
As a Senior UX Designer, I was responsible for examining the integration of the new Viva brand expression within the website and developing comprehensive brand web guidelines. These guidelines were designed to ensure that internal designers, external agencies and vendors could effectively implement the brand within the website framework, maintaining consistency and quality.
the problem & objectives
In an organization as big as Microsoft, the involvement of multiple teams and external agencies working on similar projects poses substantial challenges.
One of the most significant challenges was cohesiveness across various teams and maintaining a high consistent quality control. Having tens of teams and external agencies working on web-related projects has led to a fragmented brand identity and web user experience across the site.
When I crafted the web guidelines, my primary objective was to create a consistent framework that provided a clear art direction and holistic point of view for brand web application, unified design efforts, mitigated visual inconsistencies, reduced user experience disparities, and facilitated smoother reviews among site managers, UX designers, external production agencies, and stakeholders.
poor communication & brand knowledge gaps
Lack of communication and gaps in brand knowledge led to a muddle of messages and visual approaches, resulting in unclear objectives and agencies operating without a clear unified brand vision for the site.
brand DILUTION and overall Misalignment
External agencies inconsistently and inappropriately utilized new brand elements, confusing and portraying a weakened brand image, message, and values.
LONG Time-Consuming Project Reviews
Lack of brand knowledge and proper brand web application led to spending a lot of time reviewing projects and going back and forth with feedback from marketing site managers and external production agencies.
Microsoft Viva before
process and implementation
To tackle this challenge effectively, I began by immersing myself in the new brand redesign and engaging in multiple discussions with the Creative Director responsible for the rebrand to gain a deep understanding of the brand's essence. This process allowed me to analyze existing designs across different tier pages and initiate the development of templates for all tiers and a unified web design framework for Viva.
After gaining a profound insight into the brand, I began envisioning Microsoft Viva standards for web without limitations. This creative exercise enabled me to explore a wide range of visual possibilities while also identifying and highlighting the constraints within the current design system.
Once leadership approved the overall visual ID implementation and direction then I started to crafted high res customized templates and web standards for agencies and other designers to use while building new pages for Microsoft Viva.
examples of the new Microsoft viva visual expression
01
explored and art directed how new visual iD applies on the site
I focused on making the new visual identity fit seamlessly into the web design for a consistent user experience and and a unified brand presence.
02
designed high resolution comps and set web standards
I created detailed high-resolution comps, offering a comprehensive visual representation of the holistic design direction.
03
conceptualizing new patterns and elevated the design system
By introducing these new patterns and refining the design system, I aimed to enhance the digital experience making it more modern, and user-friendly.
04
created the new design web guidelines
I developed comprehensive design web guidelines that served as a roadmap for consistent and effective design decisions across our digital projects.
VIVA HOMEPAGE before
VIVA HOMEPAGE After
examples of microsoft viva pages after
Achiving the right balance for the whole viva ecosystem
As part of the web guidelines, I established a range of expressiveness that varied by page tier. Achieving the right balance within the Viva ecosystem was critical for an effective implementation. I offered direction on utilizing more prominent brand expressions for higher brand awareness on pages such as the Microsoft Viva homepage and product pages, while also recommending a more subtle use of brand elements on other tiers like feature pages and support pages.
Results & Impact
The recently introduced brand web guidelines for Microsoft Viva have had a great impact across all teams working on web projects. The website now has a more consistent and unified look, showcasing the brand's strength and messaging.
team collaboration 40% more EFFICIENT
Design iterations have become significantly quicker, allowing the design team to work on designs 40% more efficiently and mainstreaming feedback from marketers regarding brand applications on web.
Optimizing reviews and Brand consistency
We've also halved the time it takes for review processes, enhancing communication between different teams and giving the Microsoft Viva brand a more cohesive and recognizable presence.
Efficient Onboarding for Brand Consistency
New team members and external agencies can now grasp the implementation of brand elements quicker. This has eliminated tribal knowledge, reduced ambiguity, and minimized off-brand feedback.
CONCLUSION
In summary, developing Microsoft Viva's brand web guidelines has been a significant achievement for the Microsoft Web Team and Microsoft Design Studio. It ensured that Viva's brand remained consistent, regardless of the team or external agency involved in Viva projects. These guidelines improved collaboration between multiple teams from different Microsoft organizations, preventing brand inconsistencies and off-brand situations. They also streamlined the design process and provided a comprehensive perspective on how the brand should be represented digitally.
The new brand web guidelines provided the leadership team with a clear vision of how a product brand could excel on the site, prompting broader discussions about enhancing the overall Microsoft web design system and updating existing patterns and modules that can scale to other Microsoft product brands.
This project marked a significant collaboration between the web design team and Microsoft's Design Studio. My role extended beyond creating web guidelines solely for Microsoft Viva; I also took on the responsibility of crafting web guidelines for multiple products, including Microsoft 365, Microsoft Teams, Dynamics 365, PowerPlatform, and others.
