Sol Lee-Microsoft 365 UI Kit

Summary

App design guidance and pre-built components to create consistent and meaningful app experiences across Microsoft Teams, Outlook, and Microsoft 365.

New technology of app development

"Build once, run everywhere in Teams, Outlook and Microsoft 365."

Learn more

User problem

App creators plan to build their app in Microsoft 365 ecosystem were unable to find comprehensive and up-to-date guidance for all three platforms.

Audit

Opportunities

Legacy screen examples

Update to in-market views

Flat image components

Grab & go style UI components

Only app capabilities list

Clear info of customizable areas

Target audience

"If you have any part in creating a Microsoft 365 app, this is all for you."

Understanding how to craft a Microsoft 365 app is not only helpful to designers but product managers, developers using IDEs, and makers building with low-code tools.

Concept

Vision

Foundational information for all relevant platforms and all app developers.

Customer-centric guidelines validated through research and app developer feedback.

Provide assets that are easy to adopt and build on.

2 Tracks to implement apps

Role

Published Microsoft 365 UI Kit

See the kit

New UI Kit highlights

I have built the new kit that incorporates these important key points.

Highlights 1.

Upscaled content to all platforms with in-market views

Previously, all the resources only provided examples for Microsoft Teams platform with legacy screens. In the new kit, this kit is for apps running within all Microsoft Teams, Outlook, and Microsoft 365 app. All screens reflect the current web and mobile experiences now.

Highlights 2

Components with priorities

Built-in UI components for crafting your designs allow you to get started quickly to start from scratch if you’d prefer.

Highlights 3

Local hosted variables

Component properties and Figma variables to let you quickly and easily modify the look and feel of your designs (mode, layout, etc) to see how your app will look running within different app experiences. These also are consistent with Microsoft's design language, Fluent 2 Web and Mobile.

Highlights 4.

Clear information about Implementation areas

Provide indications of areas of the app experience that are customizable. Also mark core UI area which the app creators need to transfer only data.
Mark these with colors and also patterns for enhancing accessibility of this kit.

Highlights 5.

2 paths to start

Sample app templates and built-in UI components for crafting your designs, allowing you to get started quickly from a template or start from scratch if you’d prefer. Every app capability screen component has multiple embedded layout templates, and also they can find template examples as best examples.