Embracing Vibrant Universality in Fluent Illustrations
Rethinking our illustrations to create better user experience for our customers
By Jay Tan & Alexis Copeland
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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
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.
