Home
Home
Portfolio
Portfolio
About
About
Contact
Contact

Dynamics 365
new web design and
guidelines

Role

Sr. UX Designer

Client

Microsoft

Year

2022

New Dynamics 365 home page redesign composition

01

overview

Microsoft Dynamics 365 is a set of intelligent business applications that helps organizations enable agility in delighting customers.

As a Senior UX Designer, I was responsible for exploring how the new Microsoft Dynamics 365 brand expression manifest 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.

02

the problem & objectives

One of the most significant challenges was cohesiveness across teams and maintaining a high consistent quality control when rolling out the new brand identity for Dynamics 365.
‍
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.

lack of visual Identity and brand love on the site

Dynamics 365 struggles to establish a consistent and recognizable visual identity on the site. A strong visual identity is a key driver in building brand loyalty and brand love.

Inconsistent application across pages

Maintaining consistency across the site during a rollout can be challenging. Different  teams, may interpret the brand guidelines differently, resulting in inconsistent application of the new brand.

Lost Opportunities and brand RECOGNITION

Lacking a strong visual identity system can mean missing out on opportunities to effectively convey Dynamics 365 brand's message and values on the site.

dynamics 365 before
Old Dynamics 365 pages examples

03

process and implementation

To tackle this challenge effectively, I began by immersing myself in the new brand redesign. I analyzed the current pages for Dynamics 365, mapped out the main tier pages and looked at the existing designs across different tier pages. Once I gained and understanding about some of the content strategy behind some of the pages I was able to start thinking and designing new templates for all tiers and a unified web design framework for Dynamics 365.

After gaining a profound insight into the brand and how it was organized, I began envisioning Microsoft Dynamics 365 standards for web. 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 resolution customized template options and web standards for agencies and other designers to use while building new pages for Dynamics 365.

new dynamics 365 visual sistem

New Dynamics 365 visual identity New Dynamics 365 graphics for the visual identity

03

what I did

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 theming 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.

dynamics 365 home page

New Dynamics 365 home page design
before
Old Dynamics 365 home page design
After
New Dynamics 365 home page redesign

homepage templates

Example of the new Dynamics 365 redesign composition
Example of the new Dynamics 365 redesign composition 2
Example of the new Dynamics 365 redesign composition 3
Example of the new Dynamics 365 redesign composition 4

new dynamics 365 product page

before
Old Dynamics 365 Enterprise composition
 after
New Dynamics 365 Enterprise composition

capability page templates

before
PROPOSED TEMPLATES

solutions page templates

before
Old Dynamics 365 page design
PROPOSED TEMPLATES
Proposed template for the solutions pages on Dynamics 365Proposed template for the solutions pages on Dynamics 365
expanding the visual identity THROUGHOUT Dynamics 365 ecosystem

As part of the web guidelines, I established templates and a range of expressiveness that varied by page tier. Achieving the right balance within the visual 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 Dynamics 365 homepage and product pages, while also recommending a more subtle use of brand elements on other tiers like feature pages and support pages.

03

Results & Impact

The recently introduced brand web guidelines for Microsoft Dynamics 365 have had a great impact across all teams working on web projects. The website now has a new consistent, vibrant, and unified look. All pages for Dynamics 365 have a visual hierarchy on the site and the web team has now a robust library of customizable templates to pull from when designing new pages.

Enhanced Brand Cohesion on the site

The revamped of Dynamics 365 brand identity on the website has brought a unified and visually consistent experience for users across all pages, strengthening brand recognition and trust.

Improved User Engagement

By elevating patterns within the design system, we created more intuitive and engaging user interfaces, resulting in increased user engagement, longer session durations, and improved conversion rates.

Streamlined Collaboration

The new design web guidelines has fostered collaboration between design and site manager teams, enabling a more efficient and cohesive web process while reducing review times sign offs, and handoff friction.

03

CONCLUSION

In summary, developing Microsoft Dynamics 365's brand web guidelines has been a significant achievement for the Microsoft Web Team and Microsoft Design Studio. It ensured that the brand remained consistent, regardless of the team or external agency involved in web projects. 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 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 Dynamics 365; I also took on the responsibility of crafting web guidelines for multiple products, including Microsoft Viva, Microsoft Teams, Microsoft 365, PowerPlatform, and others.