Materializing the Intangible

How UX stories can help paint the picture of a product's soul.

My Microsoft colleague Nico Nuzacci recently shared this David Fincher quote with me. It really resonated.

"There is a fallacy in how one designs a motion picture experience. I think the fallacy is that it’s a wind-tunnel tested, extremely technical, scientific experiment. That really isn’t the case. There is a lot of technical knowledge and a lot of technical expertise that goes into making a film, but remember, the ultimate takeaway of a film is emotional. You just saw a dream, and either it affected you or didn’t. Louis B. Mayer once said: “the beauty of the movie business is that the only thing that the buyer gets for their cost of emission is a memory.” A memory is evocative because they work on an emotional plane."

While I don't mean to compare the work we do here at Microsoft with Fincher's brilliance, there is still a parallel to be drawn between the two. The similarities come down to the challenge both entertainment content and digital product stories have, which is to establish a connection between an idea and an emotion.

At the end of the day, if the story you want to tell lacks an emotional connection, or fails to spark excitement, then perhaps the story is not worth being told. Now, as we put the finishing touches on our 30th Microsoft UX film, I thought I would share some of my thoughts on the ingredients we revisit time and time again in almost all our videos. These ingredients are all about creating space for uniqueness in each video and yet establishing a connection with one another under the umbrella of our brand.

As Ficher's quote implies, this is not a mathematical formula, but instead a search for balance. This is a choreography for a dance between form and function.

Spaces Reconsidered

When it comes to telling stories about digital products, the use of spaces and objects is often thought of as superfluous. But I prefer to think of them as essential in metaphorically conveying what the products in question unlock for people, and what sets them apart from anything else out there.

From architectural cues to custom furniture designs, to lighting that hints at the passage of time, as well as to the carefully art directed objects that are strategically scattered across rooms and landscapes, all of these seemingly mundane details can in fact help re-emphasize the core message in a story, while still leaving some room for interpretation and curiosity to take place.

Take this this film for Microsoft 365 for instance. Here we celebrated the alignment the Dark Mode across our apps and made specific choices in the design of spaces to emphasize the platform they each represent.

The scenes below (on the left) were crafted to represent the minimalism, sparseness and lightweight qualities that web experiences tend to have. The scenes that followed (on the right), celebrated the shapes commonly seen in iOS experiences, with curvy and soft forms, which are also shared with MacOS apps. At the end, we resolve with a large-scale Windows-inspired space to reflect the proportions and screen sizes of that platform.

By pairing each app with a platform-inspired space lit by colors of each specific app brand palette, we were able to subconsciously convey so much more than we would have if we had tried to be blunt about these connections.

Leveraging brand color was also critical for this Office Scripts story where we embraced a rich world of green inspired by the app colors of Excel. Despite green being a difficult color to work with for designing interiors, I find the result delightful. But I will ask you to be the judge. ??

In this example below from our latest film for Microsoft Loop, the space, furniture and objects all hint at the product's name, its features, and its icon. At the same time, the camera moment and stylized lighting add further purpose to the story, suggesting movement and the passage of time during a day of work. This also highlights how important the role that lighting plays in these stories is. Lighting is everything.

In the end, the viewer is drawn by the activity on the screen, while being further inspired and informed by all the extra context in the periphery of the scene.

Last, but not least, in the design of all our spaces, we strive for a certain level of messiness, adding subtle imperfections, wear and tear and intentional misalignments that can help a space feel lived in and therefore warmer, more relatable, more human.

Crafting guidelines around this approach isn't straight forward because it isn't all about realism. In fact, abstract or surrealist stories like these for Fluent UI and Premium Content can still have a similar result. But for this first ingredient, the main takeaway is embracing environmental design as a storytelling mechanism works!

UX Amplified

The screens of our apps are arguably the most important elements in our stories and the core reason we create them in the first place, so getting it right is important. A big part of doing that is finding the balance between showing off product truth: where the product looks real and unadulterated, and product reimagined: scenes where the product looks deconstructed or enhanced.

We have tried to make sure those enhancements are purposeful as possible. One of such ways has been to add physical properties to surfaces (such as mica in Windows 11) that emphasize some of our design principles or by using depth as a way to better illustrate how objects are stacked in our UI, as per our design language guidelines.

The video for Your Phone App in Windows was probably one of the most successful ones in achieving this balance of romancing interactions, while remembering to snap back to product truth. Below is an example of this mixture where we illustrate many elements representing phone apps, flowing to gather and assemble as a Windows app. This all happens in a more abstract space until it cuts back into a more realistic rendering of the app, showing it embedded within a device and a real room.

We spend plenty of energy explaining how our products work, but we try do so with a variety of less obvious techniques. The examples below, for instance, compare how we used a sphere to show off touch interactions in our Office mobile app and then again to illustrate the ease with which customers can move through text corrections and enhancements in a document when aided by our Microsoft Editor, our writing assistant.

In both examples we kept the movement highly organic, embracing physical properties of materials to make up for the lack of people. This is where animation can really play a role in making a video more human and relatable.

Brand Materialized

When it comes to integrating brand elements in a video, the norm is to focus on the beginning and end of a story. But I have found that to feel forced and often convoluted as many of our stories are about nested products. Take Microsoft Editor for instance, which is about a writing assistant technology within Microsoft Word, Outlook, and Edge, which are all part of Microsoft 365 and ultimately live under the brand of Microsoft.

For that reason, we have been exploring ways to pepper brand elements throughout a story and portraying them as physical objects also appears to help draw attention to that element in unique ways. These different approaches make it more likely that someone will find it enjoyable to watch and ultimately remember it.

Above is a smattering of examples of this approach and, as one would expect, the use of color, composition and expressive animations are really at the core of making these moments memorable.

One of our very first videos with this approach was this piece celebrating the new Office icons. The video is an assembly of shots that deconstruct the icons into digestible parts using color, light, shapes, and material properties as ingredients that illustrate the thinking behind the icon system.

Sound Personified

In animation, more than in any other medium, sound and picture are inseparable. We've been lucky to partner with Zelig Sound to develop our own unique palette for Fluent Sound over the years. Like everything else we do, this work is still evolving, but after creating films for HoloLens, Surface, Dynamics, Office, Windows, Teams and many other iconic Microsoft products, the palette is becoming more clearly identifiable and ownable.

A part of what makes our sonic palette unique is the use of real-world sounds. Whether they are acoustic instruments samples woven together with digital ones, or the sound of physical objects being interacted with, or even a sequence of vocals that is casually integrated. All these helps make the sound (and picture) feel more human.

Given that we use so much CG in our films, we are always working extra hard to humanize these films, and to make sure that they come across authentic and warm. This video below is probably our best example of this approach because it reveals all the sound design detail that goes into making each film feel real and tactile.

This version of the UX film for Yammer is special and includes only the sound design layers. For a complete version with integrated music, watch it here.

Together, all of these four ingredients help uncover what has been essential, not only for our stories, but also as a way to begin teasing at how the product actually feels or should feel. How it sounds and how it looks.

Truly exploring a product's aesthetic go beyond just emulating the product's function. When we take this exercise of creating thematic objects and inspired spaces, this process gradually reveals what I believe to be the very essence of the product. Its "soul" (if it could have one).

This approach can be replicated as a one off for other brands too, but it's the repetition and consistency across any given brand's execution that can transform and improve its image. For that reason, I leave you with this link showcasing a selection of some of the films I have been able to direct over the years in partnership with amazing digital artists and design studios across the globe. Thanks to all of you my dearest partners in crime for making this happen over the years.

Microsoft UX Films on Behance ??

I hope you enjoy my thoughts, and I welcome your feedback in the comments below.