Skip to content

Visual DesignUX/UIBrand

  –   The estimated reading time is 10 min.

Designing the new era of Teams

A digital illustration of a desktop chat application interface on a floating screen, surrounded by colorful abstract shapes and smiling faces. Various chat messages are visible alongside user profile icons on the left, with additional virtual avatars and emojis around.

Today marks the debut of the new Microsoft Teams app, released in public preview for Windows customers. As one of our most customer and design-driven releases ever, it’s crafted from the ground up to be faster, simpler, and more flexible. It also reflects a multi-disciplinary journey of customer understanding — from redesigning channels and simplifying chats, to leveraging motion design and enhancing personalization options. Everything currently on view is the result of deep collaboration and iteration. While most features detailed here will be available this June, others will roll out between then and the end of the year.

Close-up of a new feature in Microsoft Teams being unveiled by peeling back to reveal a toggle for switching to "New Teams." The interface shows the "Chat" and "Activity" sections with the purple header in the background.
The visual refresh in Teams includes more intentional usage of the signature Teams purple, as well as the introduction of the Windows 11 Mica material.

Product-making is often a dance between responsive and proactive decisions. Responsively, we want to understand and address customer feedback. Proactively, we want to explore new territory and dream up future visions. To find the right balance, it’s important to embrace something rarely valued in today’s fast-paced world of product development: self-reflection. For Microsoft Teams, the app had such a meteoric rise since its 2017 launch that when envisioning its next chapter, it seemed vital to first look back. Essentially, did we get it all right the first time?

Simplified & streamlined

A screenshot of Microsoft Teams interface on a Windows 11 desktop. The Teams window shows a conversation about an upcoming project launch, with multiple team members discussing and reacting to messages. The background displays the Windows 11 default wallpaper.
Our streamlined channels experience reduces complexity and cognitive load, and we’ve adopted a more familiar post-and-reply experience at the top.

Beyond channels, we further reduced complexity and cognitive load by spending countless hours going screen by screen, moment by moment, surface by surface, to justify whether certain things really deserved to be there. This resulted in streamlined chat headers with fewer buttons and a simplified chat compose that reduces noise to make the feature more purposeful. As designers, we don’t see this as “hiding” features, but as putting them in their rightful place so you can stay in the flow.

To further keep you in the flow, we’ve also leveraged Microsoft Loop. Currently in public preview, Loop is a new app that uses components—portable pieces of content like lists, tables, or notes that sync across apps—to foster fast, dynamic collaboration. Within Teams chats, you can now work directly on a Loop component without ever leaving the app.

Finally, design enhancements for stage and presenter views (i.e., seeing other participants, raised hands, etc.) help improve meeting experiences. Whereas you couldn’t previously see the participants of a meeting while you were presenting, you’re now able to present and view your audience at the same time — giving you full context and control. Collectively, these changes refresh and redefine Teams to work more fluidly for you whether you’re in an office, at home, on the go, or any place in between.

A computer screen displays an open spreadsheet titled "Bliss Bear - Go To Market Campaign" with graphs and charts. On the right side, a video call is visible with four participants' video feeds, showing three people and one person's profile picture.
Presenter view in the new Teams gives you more context and control by allowing you to see meeting participants while presenting.

A fresh new look

A computer screen displays a chat conversation in a messaging application. The app window shows a list of contacts on the left, with an active chat with several exchanged messages on the right. The desktop background is the default Windows 11 wallpaper.
Our new chat experience empowers you to bring more of your own creativity and process into Teams, and forthcoming features like group profile pictures and group theming allow for deeper customization.

Another visual change you’ll notice is the addition of group profile pictures and group theming, further customizing Teams’ chat experience. As Principal Design Designer Daisy Geng explains, “to help create a sense of personal space within Teams, customers can set a profile picture for their groups in any group chat. They can also set a group to be a particular color theme, rather than just have everything be the default Teams purple. If you’re going through a long chat list, distinct avatars or colors make it easier to navigate and give personality to those groups that you interact with most.”

By setting a group to be a particular color, rather than everything being the default Teams purple, you can better navigate and give personality to those you interact with most.

Motion-designed & Fluent-aligned

“Motion design isn’t just about fun animations, it’s a powerful tool for providing clarity, guiding customer focus, and aiding in the passage of time. In the context of loading, we use carefully orchestrated animated sequences to speed up our customers’ perception of time by keeping them focused and engaged during the process,” Principal Design Manager Casey Baker remarked. For perceived performance, much rests on the loading sequence itself and we leaned on our motion designers’ ability to orchestrate how UI elements appear.

Motion designers crafted a different loading sequence for the new Teams, greatly improving perceived performance.

We applied it scenario-by-scenario, view-by-view, and if a loading sequence fell below a certain threshold, it was filed as a bug with the same level of importance as someone being unable to join a meeting or open Teams. That degree of prioritization and cross-disciplinary collaboration led to dramatic improvements in performance — both perceived and real — hallmark characteristics of the new Teams.

An image showing two tablets on a colorful surface. The left tablet has an event invitation displayed with a smiling person, while the right tablet displays a diagram with pink lines and boxes. Surrounding objects include balloons, ribbons, and abstract shapes.
As major contributors to the Fluent design system, the new Teams is wholly aligned with Fluent.

More expressive

High-five is the first of more Together emoji to come

Designed for you

A collage of five screenshots shows different email and team collaboration interfaces. Screens include a simplified compose screen, a message with a request to join a team, a list of teams, a calendar overview, and a menu with various team options.
Elements of the new Teams experience

Read more

To stay in the know with Microsoft Design, follow us on Twitter and Instagram, or join our Windows or Office Insider program. And if you are interested in working with us at Microsoft, head over to aka.ms/DesignCareers.