Microsoft’s Design team talks about rearchitecting Teams “from the ground up”

Kareem Anderson

As Microsoft takes the wraps off its new Teams upgrade that uses half the system resources as its predecessor, utilizes easier to use UI elements, quick account switching, AI integration and more, the company dropped a companion note about all the work that went into today’s release.

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.

Microsoft kicks off its companion blog with an emphasis on the company’s self-reflection that led to some of the major changes that are now present in Teams 2.0 such as how to “fully adopt Fluent Design System,” and addressing perhaps the biggest customer pain point in performance.

The adoption of Fluent Design System led the Microsoft team down the road of simplification and making the Teams app more streamlined.

Initially, we chose to follow a chat-like model for channels (open field at the bottom and a conversation that flows bottom-up) because threaded conversations were a unique differentiator for Teams. But this is where we needed to be humble and admit mistakes based on feedback; differentiator or not, the model confused people. Now, we’ve flipped things to adopt a post-and-reply experience at the top, which feels much more familiar.

Microsoft Teams 2.0 UI Flow

In addition to creating a more chat-like experience with in thread @mentions and organizing channels, users can now look forward to fewer buttons being displayed at all times as well as a simplified compose window with less clutter.

Microsoft Loop makes an appearance in the preview version of Teams 2.0, allowing users to use recently made components such as Excel tables, charts, notes or lists from other Office 365 applications within Teams chat.

Perhaps the most notable visual change awaiting users is the new presenter view that allows those presenting in a conference video to see the other participants while sharing visual data, and does so in a sort of Adobe Photoshop island-like way.

In Teams 2.0, Microsoft’s design team purposefully de-emphasized the classic purple accented motif to, “step back and create room for these other experiences — which you bring into Teams — to shine because your personality and expressions shouldn’t have to compete with our brand.”

Teams 2.0 Color Schemes

Not to fear, dark modes will still adhere to system preferences and restore the brooding dark greys of the old app, but now the app boosts other colors to draw attention differing actions within the application.

Similar to Facebook Messenger, the Teams adopted color theming and group chat profile pictures to help Teams members create a personal space within Teams as well as draw on a sense of community.

The Microsoft team also admits that it leverages animations now to reduce users perceived load times with the application, “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.”

Teams 2.0 Animation UI

 

That is not to say that Microsoft didn’t actually address load times in Teams, which it did through a scenario-by-scenario process of investigating load sequences and tackling those that fell below an estimated internal threshold based on a prioritization of customer feedback.

Another leading cause in the reduction in load times is the platform switch to React which adhered to Microsoft’s next level Fluent design standards in Fluent 2 from the previous Fluent UI React v9. Moving to Fluent 2 allowed the Teams engineers to leverage a more robust theming system which offers a better holistic design-language as well as a performance and accessibility boosts through coding integrations.

While Teams is also rolling out its 3D avatars to help users be a bit more expressive when they don’t actually want to be on camera, the team behind Teams 2.0 wants to also tout the more practical application of its Together Emoji platform that will probably be used more often than 3D avatars, respectfully.

Teams 2.0 Animations

With Together emoji’s, users can leverage a more “dynamic form of expression.” Some of these shared experiences between two people using the Together Emojis will begin with animated hi-fives with more to come.

All in all, the new Teams 2.0 update is a rather massive under-the-hood upgrade that should net customers better performance and a bit more personalization when using Teams, however, it being enough to endear people to corporate chat is an entirely different thing to measure.