microsoft teams
web design and
guidelines
overview
Microsoft Teams is at the forefront of digital transformation. It helped people to stay together in unprecedented historic moment. It’s that all-in-one app that brings people together in a single shared space. Microsoft Teams enables people to connect in real time to accomplish amazing things together.
In my role as a Senior UX Designer, I assumed the lead design responsibilities for Microsoft Teams shortly after joining the team. Over the years, I had the privilege of contributing to multiple projects, including continuous design improvements for Microsoft Teams' web pages. Witnessing the application's evolution and growth has allowed my design work to evolve in tandem. This case study will primarily focus on my most recent assignments, and the future direction of Teams.
the problem & objectives
When I first joined the team and started working on Microsoft Teams, the platform confronted a lot of challenges. Microsoft Teams struggled with a lack of a compelling visual identity, leaving its online presence without a distinctive brand image. This was particularly challenging during the critical period of the pandemic when an engaging user experience was crucial worldwide.
Additionally, the lack of effective team communication led to brand inconsistencies across various pages and the product. The absence of design standards and quality control created a disorganized site, confusing and frustrating visitors as they navigated the site.
To address these challenges, the design studio created a cohesive visual identity, and I pushed the boundaries of the design system on the website and implemented the web guidelines to ensure a consistent and harmonious web presence. When formulating the web guidelines, my main goal was to establish a unified framework for brand web applications, fostering clarity in art direction, reducing inconsistencies, and improving communication among stakeholders.
Absence of a compelling visual identity on the site
The absence of a compelling visual identity on the site marked by generic and and uninspiring design elements failed to engage and captivate visitors. This impeded the creation of a memorable online presence.
Inconsistent experiences across product and marketing pages
The inconsistencies between product and marketing pages led to a jarring transition for users, impacting the overall user journey. This disconnect hindered a seamless branding, potentially confusing visitors.
Inconsistent brand application across pages
Maintaining consistency across the site during a rollout can be challenging. Different teams, interpreted the brand guidelines differently, resulting in inconsistent application of the new brand.
MICROSOFT TEAMS before
process and implementation
When I first joined the team and started working on Microsoft Teams, the brand presence was nearly non-existent, with the sole identifiable brand element being the distinctive purple color. This marked a period when all Office applications were designed to share a consistent visual identity on the website.
I started to create wireframes aiming for a more immersive experience and seamless flow, getting rid of the heavy black devices, introducing new UI treatments, the new 3D emojis for the first time on the site, playful background colors, and a more human-centric approach into the web design; I aimed to broaden its universal appeal and marrying the app experience with the web experience.
Additionally, I actively explored the boundaries of the existing modules on the site, proactively requesting changes to align them with the envisioned designs for Teams.
As I pushed the creative boundaries for Microsoft Teams, our web and brand leadership began to envision the endless possibilities this transformation could offer. One specific web project I crafted in 2020 played a pivotal role in steering Teams toward its evolving trajectory and acted as the catalyst for the current brand identity.
NEW microsoft teams visUAL ID
Here are current examples of Microsoft Teams' Visual ID, crafted by the Design Studio to enhance the brand. I used these mood boards as the foundation for all my designs and formulated the web guidelines according to these visual standards.
01
pushed the creative boundaries on web
I expanded the scope of what was achievable on web, existing modules and brand possibilities, leading to innovative user experiences and a distinctive web presence.
02
designed and set theming standards for current visual Identity
I created detailed high-resolution comps, offering a comprehensive visual representation of the holistic design direction for the current visual identity and future explorations.
03
explored the next visual ID in collaboration with the product team
I teamed up with the product team to work on a fresh look for Microsoft Teams site based on the new visuals. This partnership helped us find cool ways to represent the brand visually.
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.
future stage for microsoft teams home page
before
After
2020 microsoft teams consumer home page was the pivotal project in steering Teams toward its evolving trajectory
In 2020, I was tasked with redesigning the Microsoft Teams Consumer page, with a focus on updating the product UIs to showcase the new "together mode" feature. Simultaneously, the product team was developing 3D emojis for the app and renders for social. Capitalizing on this opportunity, I introduced preliminary wireframes and concept designs that proposed a fresh approach for presenting these new features and shifted Teams visual identity. These designs omitted the traditional device framing for the UIs and incorporated the new emojis and organic shapes, introduced gradients and more saturated purple hues to create a more vibrant and consumer-friendly composition, departing from a corporate look.
(Highlighted comp below)
teams homepage design evolution 2019-2023
alternative designs home page
Here are some alternative designs I came up with during the future stages of the brand evolution on web. The purple-themed composition was among the initial high-resolution designs I crafted; later, leadership opted for a more subtle and lighter approach, steering Teams away from the dark purple theme.
download page
before
After
new TEAMS PRICING page
before
After
Results & Impact
The recent updates to the Microsoft Teams website have led to a significant transformation of the site and user experience. Through a comprehensive redesign, the introduction of engaging 3D visual elements, and refinements to the design system, we've effectively established a consistent brand identity that extends across all web pages. This has led to an improved in brand recognition and user trust. The result has been a remarkable improvement in user engagement, with increased interactivity, and improved conversion rates.
As a result to all this work, we have witnessed a surge in user satisfaction and engagement, reaffirming Microsoft Teams' position as a leading communication and collaboration tool. This redesign project has not only strengthened the online brand presence but also solidified the commitment to providing an exceptional user experience for all Microsoft.
Pioneering a fresh chapter for Microsoft Teams site
This initiative marked an innovative and transformative phase in the development and growth of the Microsoft Teams website. It represented the introduction of novel web strategies, innovative features, and transformative changes that will define the future of the site and design system.
positive feedback and improved in user engagement
Users now find the platform more intuitive, visually appealing, and user-friendly. The incorporation of dynamic elements, more immersive experience, story telling, cohesiveness with the app experience and 3D emojis, has added a vibrant and consumer-friendly dimension to the site.
consistent brand implementation across the site
The web guidelines have ensured that the brand's identity remains coherent and recognizable to users, regardless of which page they navigate. This consistency is crucial for reinforcing brand recognition, building trust, and conveying a unified and professional image.
CONCLUSION
The Microsoft Teams' redesign and web guidelines project not only delivered significant victories in terms of brand consistency, streamlined collaboration and engagement but also it filled me with great joy and a sense of fulfillment to be a part of such a transformative journey.
The creation of brand web guidelines represents a major milestone for both the Microsoft Web Team and the Microsoft Design Studio. These guidelines have played a vital role in maintaining a consistent Microsoft Teams brand, regardless of the team or external agency involved in web projects. This enhanced collaboration among teams across different Microsoft organizations, minimizing brand inconsistencies and off-brand instances.
This project highlights the immense potential of collaboration and teamwork between the web design team and the app product team. Engaging both teams from the project's beginning has significantly influenced the quality of the final product and the overall web experience.
