Home
Home
Portfolio
Portfolio
About
About
Contact
Contact

Microsoft 365
new web design and
guidelines

Role

Sr. UX Designer

Client

Microsoft

Year

2023

Microsoft 365 Home page design

01

overview

Microsoft 365 is a product family of productivity software, collaboration and cloud-based services owned by Microsoft.
‍
The Microsoft Design Studio crafted a fresh visual identity for Microsoft 365, unifying all design elements into an recognizable visual language.

The goal of this project was to revamp and establish a holistic artistic direction for the Microsoft 365 commercial web, incorporating the new visual style, and explore an alternative design system. It also involved the creation of web guidelines to elevate the user experience through enhancements to the design system and visual aesthetics.

02

the problem & objectives

One of the most significant challenges was the existing design system was struggling to meet the standards of the new brand being rolled out, resulting in inconsistencies that compromise brand integrity.

Also, keeping cohesiveness across multiple teams and maintaining a high consistent quality control was challenging without proper web guidelines in place leading to a fragmented experience.

Stagnant User Experience and limited adaptability

An old and inflexible design system lead to a rigid and unappealing user experience.
A rigid design system can hinder the site's ability to adapt evolving digital trends. It struggled to incorporate new technologies, making it less competitive in the digital space.

outdated visual language and design system

The current design system failed to effectively represent the brand's current identity. This inconsistency could have diluted the brand leading to a lack of brand trust. Also, not connecting with younger generations could have led to losing market relevance and an inability to understand the preferences of emerging consumers.

Inconsistent brand application across the site

Ensuring consistency across the site during a rollout can be a significant challenge, particularly when numerous teams are simultaneously working on various related projects. These teams may have different interpretations of the brand guidelines, leading to inconsistencies in applying the new brand.

MICROSOFT 365 before
Image showing 4 full web design compositions showing the old Microsoft 365 pages before the redesign.

03

process and implementation

I redesigned Microsoft 365 site with flexibility and adaptability in mind. The brand should be able to evolve and adapt for web based on audiences, and consumer preferences. I considered scalability and future growth when designing the web vision. This ensures that the site can maintain its relevance and longevity in a dynamic business environment.
‍
I curated mood boards, designed new scalable patterns, and meticulously crafted design compositions to highlight the new vision for the Microsoft 365 site. My motto while creating these comps was to radiate brand positivity and crafting meaningful experiences that draw people in while exploring the site.

I actively engaged in collaboration with a fellow senior designers, actively seeking feedback from both the creative director and UX director. Together, we aimed to establish a unified vision for the Microsoft 365 site.

new microsoft 365 visual identity

Image showing a composition of the new Microsoft 365 visual identity. Vibrant colors, people smiling and new deconstructed graphics

04

what I did

01

explored and art directed how THE new visual iDENTITY 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 & set web theming standards

I created detailed high-resolution comps, offering a comprehensive visual representation of the holistic design direction for Microsoft 365 commercial web.

03

elevating a new design system for all microsoft

By introducing these new patterns and refining specific elements of 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 all products for Microsoft 365.

MICROSOFT 365 home page

Microsoft 365 home page redesign composition
before
Old Microsoft 365 home page composition.
After
New Microsoft 365 home page composition with new vibrant colors, bold typography and 3D assets.

new microsoft 365

New Microsoft 365 Education page redesign. Bold colors, typography and images of students and professors smiling
New Microsoft 365 enterprise page redesign
New Microsoft 365 Business page layout. New design
New Microsoft 365 pricing page showing the new design with the new bold 3d elements

new microsoft 365 pricing page

New Microsoft 365 pricing page showing the new design layout with 3D bold graphics
before
Old Microsoft 365 design
 after
New Microsoft 365 pricing page
New Microsoft 365 Education page, showing the new design with bold typography and 3D graphics
before
Old Microsoft 365 Education page
 after
New Microsoft 365 Education page, showing the new design with bold typography and 3D graphics

05

Results & Impact

The recently introduced brand web guidelines for Microsoft 365 have had a great impact across all teams working on web projects and it has opened the doors for a conversation with leadership about a full design system redesign and the unification of all Microsoft design systems into one master design system.

The design teams have now a robust library of customizable templates to pull from when designing new pages. By introducing fresh design patterns and embracing the possibility of a full design system redesign, we've revitalized the Microsoft 365 website's aesthetics and we have also greatly improved the user experience.
‍
These guidelines have also helped to cut reviews in half and it's faster to onboard new agencies and new designers working on Microsoft 365 site projects.

enhancing brand love and consistency

Enhancing brand love and consistency across teams working on web projects has been possible through the adoption of  the web guidelines and the design comps and templates I provided.

one source of truth for all teams

These templates and web guidelines serve as a common reference point, fostering a shared understanding of Microsoft 365 brand identity, resulting in more harmonious collaboration and the delivery of consistent, brand-aligned web experiences.

POSITIVE FEEDBACK and  new POSSIBILITIES

The new web redesign and brand application for commercial web received such a positive feedback from leadership, internal stakeholders and external users that it has opened the doors for a full design system redesign.

06

CONCLUSION

In summary, developing Microsoft 365's brand web guidelines has been a significant achievement for the Microsoft Web Team. These guidelines improved collaboration and 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.
‍
The prospect of a full design system redesign has laid a solid foundation for future growth, fostering streamlined collaboration between design and development teams and ensuring the consistent application of the brand across all digital touch points. This project has not only elevated the Microsoft 365 website but also positioned the user experience for continued success in an ever-evolving digital landscape.


‍