Bringing cohesion to Microsoft Intune design
Microsoft Endpoint Manager, nestled within M365 enterprise suite, faced a unique design challenge. While adhering to the Ibiza design system, it deviated significantly from the Fluent UI standard that unified other Microsoft products. This inconsistency caused confusion and friction for both users and designers, making Intune feel like the "Wild West" of the M365 suite. By redefining Intune's design language, components, and patterns, we weren't just creating a more cohesive look and feel for the users; we were empowering designers and developers to deliver a unified and intuitive experience for users across the entire M365 suite.
Space, Grids, and Layouts
Applying Intune spacing
The base unit is 4 pixels which allows a scale of supported sizes. A 4x system reduces confusion while being easy to implement.
The global spacing ramp is easily applied to designs across a wide set of needs. Here are some examples of how Fluent spacing
is applied throughout Intune components and layouts.
The global spacing ramp is easily applied to designs across a wide set of needs. Here are some examples of how Fluent spacing
is applied throughout Intune components and layouts.
Component spacing
Within components, smaller spacers are used to ensure a strong implied relationship between each element while also guaranteeing they are perceivable and distinct.
Pattern spacing
Consistent spacing in patterns is crucial to creating familiar visual rhythm and design cohesion across products so that people can jump in quickly and easily.
Layout spacing
Use space in layouts to direct the eye to areas of high importance and guide people to what they’ll need to see next.
Layout spacing deviations-10px spacing
Use 10px spacing for the MEM module to create a slightly larger visual separation compared to the standard 4px grid.
Grid
The grid provides the fundamental groundwork for placing visual elements. Working on the grid ensures a standard direction for creative decision-making across products and a responsive framework for design on different devices. It makes an app look coherent, enhances visual hierarchy, and balances design.
Types of grid
All grids are made up of three elements: columns, gutters, and margins.
All grids are made up of three elements: columns, gutters, and margins.
Columns
Columns are the building blocks of a grid and mark where elements should be placed. MEM follows a 12 column framework, common for its flexibility and easy division because it allows you to divide the given area into half, thirds, fourths, and sixths.
Gutters
Gutters are the negative space between columns and their width should be a multiple of the base unit. To better adapt to a given screen size, gutter widths can change at different breakpoints.
Margins
Margins are the space outside of the grid columns and rows. Margin widths can be fixed or percentage-based and can change at different breakpoints. MEM uses 10px margin on the top and 20px margins for the bottom, left, and right sides of the content blade.
This likely applies by default unless overridden for specific situations.
This likely applies by default unless overridden for specific situations.
Typography
Type ramp
The type options provide clear style direction and semantic roles for creating scannable hierarchies and a sense of balance. This ramp uses Segoe UI as the standard typeface on Azure portal. We primarily use Regular and Semi-bold, with Semi-bold typically
used for headers and sub headers.
used for headers and sub headers.
Text alignment
Fluent uses baseline alignment to distribute vertical space. This creates a consistent visual rhythm within a layout.
Baseline grid
Traditionally in graphic design, a baseline grid was used to set the leading from one line of text to the next. However, on the web or Figma, they distribute text by line-heights instead of the baseline.
Text colors
Applying color can emphasize or de-emphasize text. Using a primary color on text will give it more visual prominence than the standard text color.
Accessibility
Colors in Microsoft Experiences must pass WCAG AA contrast ratios. Standard text must have a contrast ratio of at least 4.5:1 with the background. Large text (above 18.5 pixels Bold, or 24 pixels Regular) must have a contrast ratio of at least 3:1. Interactive components and non-textual components (like icons) must have a contrast ratio of at least 3:1 against adjacent colors.
Design tokens
Design tokens are stored values used to assign Fluent styles like color, typography, spacing, or elevation, without hardcoding pixels and hex codes.
Colors
Color
Color is a tool used to express style, evoke emotion, and communicate meaning.
What makes it emotional?
Experiences are intuitive and expected, creating a feeling of reliability and trust.
Status colors: A semantic approach
Semantic colors communicate at-a-glance information by building on real-world associations, like red for danger, yellow for caution, and green for positive feedback. Using them consistently and pairing them with other indicators help reinforce these contexts and decrease cognitive load.
Components & Guidelines
This involved creating a comprehensive style guide, complete with:
Examples: Real-world usage demonstrations to solidify understanding.
Templates: Ready-made components to streamline development and ensure consistency.
Specifications: Detailed technical guidelines for precise implementation.
Empty states
Illustration aligned to Ibiza illustration empty state style (grey illustration)
Refer to the guidelines and work with content designers for feature specific title, message, and link.
Refer to the guidelines and work with content designers for feature specific title, message, and link.
No data
No access
General error
Data visualization
Data metrics are quantifiable measurements that track and assess the performance, health, and overall effectiveness of a system. The utility of data visualization can be divided into three main goals: to explore, to monitor, and to explain.
Data metrics-standalone
MEM data metrics leverage Azure's familiar 6-status color scheme for consistent visualization.
This color scheme is ideal for monitoring and drilling down into your data.
Content style guidance for metadata labels and large numbers
Use simple labels for quick recognition, with data tooltips providing additional details when needed. To ensure clear communication within limited space, shorten MEM data metric labels using truncation, keywords, or abbreviations, and include data tooltips for additional information if necessary.
No Abbreviations for large number
In general, don't abbreviate thousand, million, and billion as K, M, and B. Spell out thousand, million, and billion, or use the entire number. Spell out the actual number.
In general, don't abbreviate thousand, million, and billion as K, M, and B. Spell out thousand, million, and billion, or use the entire number. Spell out the actual number.
Report summary module
The report summary module condenses a larger report into a concise overview with key findings and data metrics. The data metrics have the drill-down capability to gain granular insights. For example, a compliance report might show a high percentage of non-compliant devices. Drilling down could reveal which specific policy is causing the most issues or which device types are struggling.
The report summary module consists of 3 components:
Module (top bar, title, and context menu)
Timestamp (optional)
Metrics
Interaction
The report summary module offers several interactive features to facilitate a deeper exploration of the data:
Report Title: Clicking on the report title in the module will redirect you to the full report, providing a comprehensive view of the data.
Context Menu: The context menu (accessible through "..." or a similar icon) offers options to:
Refresh: Updates the data metrics with the latest information.
View Report: This is functionally equivalent to clicking the report title and redirects you to the full report.
Clickable Data Metrics: Each data metric within the summary module is clickable. Clicking on a metric will trigger a drill-down functionality, filtering the data view in the report based on the selected metric. This allows you to quickly focus on specific areas of interest for further analysis.
Report Title: Clicking on the report title in the module will redirect you to the full report, providing a comprehensive view of the data.
Context Menu: The context menu (accessible through "..." or a similar icon) offers options to:
Refresh: Updates the data metrics with the latest information.
View Report: This is functionally equivalent to clicking the report title and redirects you to the full report.
Clickable Data Metrics: Each data metric within the summary module is clickable. Clicking on a metric will trigger a drill-down functionality, filtering the data view in the report based on the selected metric. This allows you to quickly focus on specific areas of interest for further analysis.
T-shirt sizing & spacing
Single stacked horizontal bar chart
A horizontal bar chart is a type of bar chart where the bars are displayed horizontally instead of vertically. This makes it particularly useful for visualizing and comparing categorical data series, especially when the category labels are long or numerous. Each bar's length represents the value of a data point within that category. This allows users to easily compare the relative values of different categories side-by-sideC.
Composite List View
CompositeListView includes a Command bar, Search box group, and Details list.
Command bar
Command bar features buttons for various commands and a total item counter.
Order of operation: For all list views, the order of operation follows in order of 1. Refresh 2. Export ( depends on data connection), and 3. Columns (if 2 or more columns in the list). Scenario-specific commands would follow the common commands.
The position of Add or Create: Add or Create command is always the first command. Additional commands come after the common commands.
Search box group
Search box group comprises a search bar, search bar tip, and selectable filter pills that allow users to add filters.
Details list
Details list displays data in a tabular format with rows and columns. Users can sort information by clicking on column headers. Within each row, specific details in the columns might be clickable, allowing users to drill down to more information.
Card
A card is a container that holds information and actions related to a single data point, like a contact or a product listing. Cards are snapshots of content that are typically used in a group to present collections of related information.
For best Accessibility:
By default, each card has a role of "group" to aid screen reader navigation.
Consider using attributes like aria-label to provide clear and concise labels for the card's content, especially when the content itself might not be easily understandable by screen readers.
For best Accessibility:
By default, each card has a role of "group" to aid screen reader navigation.
Consider using attributes like aria-label to provide clear and concise labels for the card's content, especially when the content itself might not be easily understandable by screen readers.
Variations
MEM cards come in two variations, each designed to present information concisely:
1. Text-only card: This variation focuses on textual content. It provides a clear and concise summary of the information using text elements like headings and descriptions.
2. Illustration + Text summary card: This variation combines visual elements with text. It includes an illustration or icon to visually represent the concept and a text summary to provide additional details.
1. Text-only card: This variation focuses on textual content. It provides a clear and concise summary of the information using text elements like headings and descriptions.
2. Illustration + Text summary card: This variation combines visual elements with text. It includes an illustration or icon to visually represent the concept and a text summary to provide additional details.
Anatomy
Interaction
The entire card surface functions as a button.
Quick access data grid
MEM Quick access grid view is designed to present data in a categorized manner, making it easy to scan and understand at a glance. It provides a clear and organized view of information, ideal for scenarios with multiple categories. Users can explore specific categories or data points in more detail by initiating a drill-down action.
* WCAG 2.1 > Horizontal scroll. It doesn’t reflow.
Anatomy
Accessibility
Microsoft Endpoint Manager prioritizes inclusivity by meeting or surpassing WCAG 2.1 AA standards, ensuring a diverse and inclusive experience.
Tech accessibility means a design can be used by people of all abilities. So acknowledging that everyone has limits to their abilities, and those limits can change at any time. ex) closed captioning. Temporary disability-location or physical (ear/eye infection)
Accessibility is a goal, a destination. Inclusive design is how to get to that destination:
Accessibility is a goal, a destination. Inclusive design is how to get to that destination:
Reflow
Roadmap: TBD