UX/UI Archives - Microsoft Design

A person with curly hair is sitting on a couch, using a laptop. The screen displays a presentation slide with the title "Location" and some charts or graphics. The person's hands are on the keyboard and trackpad.

UX/UI

The age of the design hacker

Six practical mindsets for building secure and resilient UX

A Sign-in screen for Microsoft appears with fields for email or phone number, overlaid on a colorful, abstract background filled with floating shapes and playful icons like a keyboard, heart, and smiley face emoji.

Windows - UX/UI

Reimagining our front door

Using positive psychology to craft delightful sign-in & sign-up experiences

Abstract image featuring smooth, rounded shapes in shades of red, pink, and orange with a glossy, almost glasslike appearance against a gradient background. The forms blend and overlap, creating a soft, fluid composition.

Design Thinking - UX/UI

Making UX research insights and frameworks beautiful

Discover how one team transformed a complex UX research framework into a visually engaging artifact to make insights stick and spark alignment across teams

Design Thinking - UX/UI

A mobile-first approach for Microsoft 365 Copilot  

How Microsoft is reimagining productivity from a mobile-first lens

A green cutting mat with 3D letters, numbers, and symbols in white; surrounding papers show typeface samples and color swatches. The word "Calibri" is printed on the mat.

Design Thinking - UX/UI

From paper to pixels: The evolution of ClearType and onscreen reading

How we made digital text like printed words on paper

A Windows 11 desktop with the Start menu open, showing pinned and recommended apps, search bar at the top, and taskbar shortcuts at the bottom over a blue abstract background.

Windows - UX/UI

Start, Fresh — Redesigning the Windows Start menu for you

This is the first post in our new Beyond the Surface series, a behind-the-scenes look at how craft comes to life in Windows products and features.

A bold and colorful graphic with geometric shapes in blue, orange, and beige features the text "Evolving Human-Centered Design.

Design Thinking - UX/UI

Evolving human-centered design: Part 1

Our approach to Human-Centered Design, and the gaps therein

An abstract digital artwork featuring overlapping geometric shapes and gradients in blue, purple, and pink hues. Circles, rectangles, and lines blend with small squares, creating an energetic and colorful composition.

UX/UI - UX Research

UX design for agents

Microsoft principles and guidelines for building agentic experiences

Windows - UX/UI

A glimpse into the history of Windows design

A translucent, abstract shield-like structure with ridged textures on a soft pink background. The shield casts gentle shadows, creating a wavy effect on the surface. A small triangular piece is separated from the main shape.

Design Thinking - UX/UI

Secure by design: A UX toolkit

Human error causes a majority of security breaches. Our UX toolkit can help you build secure and empowered user experiences.

Continuous white line art of diverse faces on a black background highlights "Aretmide ♥ Microsoft" and "illumination & interaction" below.

UX/UI - Hardware

Illuminating the next era of computing

A futuristic exploration between Microsoft and Artemide based on the interplay of light and technology.

Visual Design - UX/UI - Fluent Design

Embracing vibrant universality in Fluent illustrations

Rethinking our illustrations to create better experiences for our customers.

A tablet and smartphone display a design interface on screens, with a colorful and creative backdrop. The tablet's screen shows design categories and a search bar, while the smartphone displays assorted design templates. Objects around the devices enhance the artistic theme.

AI - Visual Design - UX/UI

AI-Powered creativity with Microsoft Designer

How we made a visual design tool for everybody

Visual Design - UX/UI

Redefining productivity with Outlook

Our design journey to redefine Outlook for Windows through craftsmanship, intelligence, and personalization.

A still life composition featuring various 3D-rendered letters and shapes in white and red. The scene is illuminated dramatically with light and shadow, and a translucent fabric drapes softly over part of the display. The setting is minimalist and artistic.

UX/UI - Content Design

The hidden power of typography

The science behind how design choices influence perception and behavior

Inclusive Design - Design Thinking - UX/UI

Inclusive Design’s next wave breaks for mental health

Our toolkit for designing with cognitive diversity extends into wellbeing

Inclusive Design - Visual Design - UX/UI

Microsoft Design Week 2024

A comprehensive guide of what’s what for Microsoft Design Week

Collage showcasing various Aptos font styles and their applications, including Display, Condensed Light, and Black. The images highlight different alphabets, symbols, and context uses, such as a portrait, map, and typographic grid.

UX/UI - Content Design - Brand

A change of typeface: Microsoft’s new default font has arrived

Introducing Aptos, our modern successor to Calibri

AI - Design Thinking - UX/UI

Microsoft Power Pages and the age of low-code no-code

The design thinking behind a new website building experience

AI - Design Thinking - UX/UI

Behind the design: Meet Copilot

When the system is the product; on crafting the next generation of user experiences

Visual Design - Design Thinking - UX/UI

Microsoft Loop and the future of collaborative experiences

The design thinking and user research that turned into Microsoft Loop

Visual Design - UX/UI

Designing the new era of Teams

A multi-year design journey to rearchitect Teams from the ground up

UX/UI

Designing a new Outlook experience

Our design journey to modernize Outlook

A cute, fluffy green monster with large, round eyes and thick blue eyebrows on a purple background. The monster's fur appears soft and fuzzy, giving it a friendly and whimsical appearance.

Visual Design - UX/UI

The Feelings Monster, building a character with all the feels

On designing for mental health and the power of emotionally safe spaces

A grid of various 3D emojis on a light-colored background, featuring hand gestures, people dancing, hearts, balloons, musical notes, magnifying glasses, sun and moon icons, and other symbols. A large 3D yellow-haired dancer with a red dress stands out in the center.

Visual Design - UX/UI - Fluent Design

Designing in the open(source)

Why we’re excited to freely share our emoji for you to remix

AI - Design Thinking - UX/UI

Slowing down to speed up

A cross-discipline collaboration to ethically leverage AI and improve in-person shopping experiences

UX/UI - Fluent Design

An emoji for your thoughts

Why we refreshed our 1800+ emoji to support the new landscape of work

Windows - UX/UI

Windows 11: Designing the next generation

Leveraging customer insights and empathy to create for a billion people.

Two hands gently hold a glowing blue cube against a dark background. The light from the cube illuminates the hands and creates a soft blue glow around them. The image has a mysterious and futuristic feel.

Design Thinking - UX/UI

Touching holograms

How the Microsoft Mixed Reality Studios explored more immersive interactions

Grid of 24 colorful squares, each featuring different typographic elements, including letters (uppercase and lowercase), numbers, and various fonts. The colors range from soft pastels to vibrant hues, showcasing diverse design styles and text textures.

UX/UI - Brand

Beyond Calibri: Finding Microsoft’s next default font

We’ve commissioned five new custom fonts–which should become our next default?

"A serene background with soft pastel colors and abstract shapes. The word 'Give' is prominently displayed in white text with a heart symbol above the 'i'. Below, a search bar contains the text 'The search that gives back' and a magnifying glass icon.

UX/UI - Brand

Give with Microsoft Bing

How your web searches empower everyday giving

Design Thinking - UX/UI

Reinventing online shopping on Microsoft Edge

Helping shoppers save time and money with an intelligent browser

A laptop displaying a document is surrounded by six floating screens showing various apps: email, calendar, spreadsheets, slides, chat, and social media. The setting is a modern workspace with plants in the background.

Design Thinking - UX/UI

The next chapter of collaborative experiences

How we’re pushing collaborative technologies beyond the status quo

A person with short light blue hair stands against a gradient purple and blue background, looking at their smartphone, which emits a glow.

Visual Design - UX/UI

Designing dark mode

How we’re crafting Dark Mode experiences across Microsoft 365 that adapt to your daily flow

Floating screens displaying a software interface against a white background. The screens show various menu options, settings, and user forms, primarily in blue and white colors, suggesting an interface for managing and configuring system settings.

Design Thinking - UX/UI

Creation at cloud scale

How we streamlined resource creation in Microsoft Azure to improve usability, consistency, and accessibility

UX/UI - Iconography

Redesigning the Office app icons to embrace a new world of work

Design is becoming the heart and soul of Office. Learn how we evolved our visual identity to reflect the simple, powerful, and intelligent experiences of Office 365.

Abstract illustration depicting a contrast between a light and dark theme. The left side features light, simplified software icons, while the right side displays a darker, more complex data visualization with graphs, cubes, and interconnected networks.

UX/UI

A cloud for everyone

Tailoring complex experiences for every user level

Two side-by-side computer screens display a dashboard interface. The left screen shows a light-themed interface with graphs and charts, while the right screen shows the same interface in a dark theme. Both are set on a desk with office items.

Design Thinking - UX/UI

Designing for scale and complexity

How we implemented the Fluent Design System across Microsoft Azure to improve usability, consistency, and accessibility for a highly complex and evolving cloud

A collage of floating computer screens displaying various Microsoft Office applications, including Word, Excel, PowerPoint, and Teams. The interfaces show different documents, spreadsheets, presentations, and communication threads, set against a light grey background.

Design Thinking - UX/UI

Designing for power and simplicity

How we evolved the Microsoft Office 365 user experience to support a more simple, powerful, and intelligent suite of connected products

A screenshot of an email application on a Windows operating system. The screen displays the inbox, sent items, drafts, and multiple project folders on the left. The main window shows an open email with the subject "Catching up" and an image of a person with long hair.

Windows - UX/UI

Digital design is never done: Evolving Windows 10 mail and calendar

How our team made fan-loved functionality more Fluent