Skip to content

UX/UIFluent Design

Embracing vibrant universality in Fluent illustrations

Rethinking our illustrations to create better user experience for our customers.

By
Jay Tan & Alexis Copeland

  –   The estimated reading time is 8 min.

A whimsical, abstract scene featuring a wavy white surface with scattered colorful objects including a green star-shaped figure, a pink egg, a blue and purple disc, and a curling orange line. On the left, translucent blue blocks form a small structure.

Illustrations serve as a window into our imagination. They have the power to stir emotions, enhance experiences and spark profound thoughts. From the early days of simple clip art in Microsoft Word and PowerPoint to the sophisticated visuals available today, illustrations have enhanced and enlivened user experiences, transcending language barriers and cultural divides.

Meet our new Fluent Illustration style, designed to simplify and unify our products with a distinct Microsoft aesthetic.

As practitioners of human-centered design, consistently engaging our users and gathering feedback is crucial to crafting meaningful experiences. Through a semiotic analysis, an opportunity was revealed to evolve our Fluent illustrations into elements that resonate more significantly with our customers. Semiotics, a study of signs and symbols, breaks down the meaning of everything from cultural representations and languages to brands and emojis.

Our studies showed that while our illustrations could be described as colorful, inclusive, and genial on a surface level, they were received within consumer culture as uninteresting and emotionless. The flat vectorized style that was once hugely popular across the industry was now communicating sub-optimally and potentially evoking ideas and themes that were misaligned with our company values.

To continue being relevant and create delightful customer experiences, we had to apply the lessons we were learning from our current illustrations and progress in tandem with Microsoft’s evolving brand and culture.

Illustration of three scenes: a diverse group of people posing together; a bearded person on the phone with checklist icons; a person with glasses thinking, surrounded by icons of a calendar, light bulb, and phone.
A visual reference of Fluent’s previous flat, character, vector based illustration style.

Our 5 Fluent Illustration Principles

As Microsoft’s Brand team was actively evolving their brand principles, an opportunity arose for a partnership that would allow both our brand and our products to grow together in alignment with our company’s mission and values. Integrating shapes and symbols from our Fluent design language across both the user journey and marketing campaigns would generate greater cohesion and harmony for our customers, thereby fostering a more seamless end-to-end user journey. To achieve this, we first had to ground our illustrations in our universal brand principles: human, vibrant, dimensional.

A minimalistic design features a white square with a green triangle and a blue triangle on it, accompanied by a yellow circle, resembling a landscape. To the left, faint icons for various functions such as music, settings, and notifications are shown.
Inspired by Fluent iconography, we repeat, reuse, and re-purpose a series of connected shapes and objects across our design language.

Evolving our Fluent illustrations meant enhancing our products’ personality and creating dynamic user experiences. With this in mind, we aimed to craft a library of illustrations that would reflect playfulness, collaboration, and inclusion, while driving inspiration and connection. This led to 5 core guiding principles that drive our illustration work today.

A grid of 16 colorful, stylized icons on a white background. Icons include an envelope, documents, potion bottle, calendar, pencil, conversation bubbles, book, speech bubble with emojis, heart, rocket, shopping bag, and a gear.
A gallery view showcasing a selection of evolved Fluent illustrations.

1. Humanity

Shapes, colors, and symbols — all of which are embodied within illustrations — carry a wide array of cultural significance. Aligning closer to humanity called for us to not just create but to practice inclusive design. By inviting in the perspectives and experiences of our colleagues worldwide, we created illustrations reflective of Microsoft’s ideals and values, and that more accurately depicted the human condition. We transitioned from intricate portrayals of individuals immersed in specific professional scenarios, to simplified symbols of human creativity and productivity that resonate with a broader spectrum of vocations and cultures. This shift avoids reinforcing stereotypes and instead promotes a message of collective human potential and unity, making them both timeless and accessible

A digital illustration featuring a central purple figure surrounded by a circular gradient ring. The ring transitions from red to orange, green, and blue, with small beige spheres at each color transition point. The background is light gray.
Using simplified and universal symbols to drive greater resonance.

2. Color and Gradients

Choosing the right color palette is critical given colors’ notable impact on our moods and emotions. Certain colors evoke a sense of urgency or anxiousness, while others exude calm and joy. Our desaturated color palettes that were once unique to each product transitioned to a vibrant, shared, Microsoft brand palette that was more energizing and inspiring. Adopting our brand palette in our user experience enables us to create greater brand love, while also fostering cohesion across our products. There is also the added benefit of reducing redundant and repetitive workload within each product group.

Two icons side by side: the left has a white background with a sun above two green triangles; the right has a black background with a moon above the same triangles. Both feature a blue circle partially behind the shapes.
Colors and materials tell a special, re-imagined story in dark mode.

3. Dimension

In the past, illustrations were approached more as an afterthought, perceived as ‘stickers’ or ‘decorations’ that were placed on top of a user interface to add to an experience. Bringing our product experiences to life called for us to sculpt 3D shapes and figures from the surfaces of our product and design our illustrations into our user interface.

3D shapes and figures emerge from the surface to bring our products to life.

Fluent’s Elevation system acted as a guide in how we approached designing 3D within a 3D space. This included aligning elements like visual space, depth, elevation, and camera angles. Creating forms that emerged from the surface added a human element and sense of tactility to our users’ experiences. Camera positioning and perspective within Fluent’s Elevation system now grounds our 3D illustrations in a tangible surface, bringing dimension into experiences without distracting user interactions. Many concepts now also include a moment of action, change, or interactivity. Through overlapping forms, dynamic placement of objects, gradient trials, and textured brush strokes, we can depict connections in a way that is universally understood, reinforces movement, and emphasizes metaphors.

4. Sophistication

As our customers’ tastes and perceptions mature, our methods of engagement must evolve in tandem. Transitioning from an illustration style that echoed the purity and innocence of childhood fables, we now aspire to embrace a more sophisticated aesthetic. Our new direction favors 3D renderings that exude a sense of depth and movement, capturing the complexity and richness of the adult imagination. Sophisticated renders invite contemplation, multiple interpretations, and evoke a spectrum of emotions that allows us to connect with our customers on a deeper level.

A white maze with a brain-like shape on a light background is seen, featuring five colored balls (red, orange, yellow, green, and purple) situated within its intricate paths, and parts highlighted with blue and purple hues.
Sophisticated renders that inspire new ideas and connect on a deeper level.

5. Playful

While sophistication is a cornerstone in our new direction, playfulness is just as vital. Microsoft’s brand resides at the intersection of these two themes, balancing elegance with a touch of lightheartedness. Our previous set of illustrations leaned towards sharp contours and more straightforward compositions, conveying a sober, literal quality. Moving towards more fluid and expressive forms in our new set of illustrations brings a sense of rhythm and vitality. As we embrace organic shapes, curves, and asymmetries (elements that mirror the natural world), we can explore abstract ideas and break free from rigid constraints. But playfulness is not just about form; it is about movement. Subtle hints of motion animate our visuals while dynamic elements spark curiosity, encouraging viewers to linger, explore, and discover.

A colorful abstract composition featuring a stylized notebook with vibrant shapes and textures. The notebook has a purple pen and a mix of circular and wave-like forms in green, yellow, and shades of pink and orange on a white background.
Fluid and expressive forms bring greater energy and imply movement.

Alleviating Cognitive Burden

Evolving our Fluent Illustration library was just one part of elevating our customers’ experiences. To further add value, we recognized the need to address the cognitive overload our users faced. Our previous illustrations often duplicated accompanying written copy, creating unnecessary mental strain and occasional confusion. Being more intentional with how our illustrations harmonized with other elements within the user’s experience could help alleviate this.

Two cards side by side. The left card shows colorful 3D shapes and text: "Find more apps. Start a project, find the right template, and more. All in one place." A "Next" button at the bottom right. The right card depicts a drag-and-drop file upload area with an arrow pointing to it, and text: "Drag & drop your files, or select them from this device." A "Bring your files here!" button at the bottom right.

Through research and consideration of different learning styles, we explored how UI (user interface) elements beyond illustrations — such as layout and copy placement — could alleviate cognitive burden. We found that images and other UI elements need to work together to enhance both efficiency and emotional impact for customers. By positioning headline text above an illustration and placing description text or buttons below it, we significantly reduced cognitive load and enhanced user comprehension. We also began embracing concepts that were more symbolic and universal through a singular metaphor, resulting in greater clarity.

When individual applications within a broader product ecosystem look and feel different, greater cognitive burden may result due to our customers having to context switch constantly as they move between applications. To tackle this, we pivoted towards more general-purpose illustrations used across different applications, reducing the overall volume of bespoke illustrations, and enhancing design efficiency through a shared library. We also leveraged our Fluent iconography to repeat, reuse, and re-purpose a series of connected objects. This built a sense of familiarity for our customers around shapes, objects, and metaphors, enabling a much more enjoyable, cohesive user experience, while generating greater focus within their workflows

A collage of abstract designs featuring colorful geometric patterns, a grid of digital icons, a folded paper shape, 3D app icons on pedestals, a shield emblem, and vertical lines blending various hues.
Expression across product, brand, and marketing embodying our creative principles; human, vibrant, and dimensional.

Embracing the Continuous Voyage

Much like a forest, where each new season brings new growth and transformation, our illustrations reside in a perpetual state of evolution. There is no “end product.” Rather, each set of illustrations creates fertile ground for more refined work to grow from in the future. As our thoughts and perspectives evolve through customer feedback and engagement, so do our illustrations to reflect those learnings. This is the essence of evolution in design — a continuous flow of creativity within a community that breathes life into ideas, turning them into visuals that are not only aesthetically pleasing but also rich in meaning and emotion.

Special thanks to the amazing group of designers across Microsoft and Buck who came together to bring all of this to life.

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.

Redefining Productivity

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