Fusing art & design in UX storytelling

How product storytelling can solve problems and kickstart healthy debates.

A large collage of style frames created over the years for Microsoft product stories.
Opinions expressed here are my own.

I feel lucky to have grown up in the 1980s and ’90s. It is clear that the growing tension between analog and digital seen in much of the content that was created in those two decades shaped my interest in visual arts and cemented my pursuit of a career in the field of design.

Some of what I loved then, still stands as iconic creations for many of us. The exuberant music videos by Peter Gabriel, as well as the mesmerizing art films of The Quay Brothers, sparked in me an interest for stop motion, as well as an appreciation for staccato rhythm in animation. The exhilarating cel-animated Akira from 1988 and the immersive video installations of Bill Viola were equally influential, revealing brand-new mediums and processes I hadn’t yet seen.

A photograph of a large posted in Tokyo of an Akira-inspired illustration.

Much of my perspective about visual communication was shaped by the art I experienced as a teenager, including my visits to Oscar Niemeyer’s MAM and other museums and galleries in Rio de Janeiro, and it was there that I began to understand moving picture as a medium for expression.

However, it was only later in 1998 that I began to explore animation with my own hands. At the time, Adobe Flash was the tool of choice for those wishing to infuse more delight in their web experiences. I was mesmerized with the possibilities of bringing concepts to life with motion and audio. This field of perpetual learning reeled me in and took my career into a new and very exciting direction.

More than two decades later, years after dedicating energy to the animation industry and having had the opportunity to direct hundreds of animations for commercials, branding packages and music videos, I now find myself designing at Microsoft, with animation yet again as a core ingredient.

In late 2018, our team at experiences design team began the journey in playing a stronger role in the storytelling of its products. Our first step was to illustrate how the very latest components of our design language, Fluent Design, had influenced a new direction for Office products.

An animated sequence of a dimensional cursor interacting with various Microsoft Office product icons.

This first UX film was created in partnership with Toronto-based Studio Tendril. Named Power & Simplicity, it was a nod to our effort to strip our experiences of unnecessary complexities and lean towards more contextual and intelligent capabilities that save our customers time and energy. This was the initial step to an even more holistic product design culture, where we not only incessantly connect with our customers to understand their needs to meaningfully build and finesse our experiences, but also a culture in which we thoughtfully craft stories that share our thinking and establish a debate, both internally and externally.

As time passed, we began partnering with other design leaders and brand specialists across Microsoft to tell compelling stories about innovation in design and technology. This montage below, titled “Designed with Love”, is a celebration of the 24 UX films we have crafted with our own in-house animation experts, as well as in close collaboration with many independent artists and design studios from around the globe.

Across all of these films, we have tried to capture the soul of each experience we are showcasing. While the recipe for getting there isn’t foolproof, it has generally been a mixture between brand expression, where the app icons, general palette, and parts of an app are celebrated, as well as abstracted and literal representations of key interactions of each experience.

An animated sequence showing off micro interactions with the Microsoft Office mobile app.

While good design focuses on solving problems, art generally aims at establishing a debate, and this is exactly what made me fall in love with the challenge of combining the two.

It is for this reason that I prefer to think of these UX films as fusion between Art and Design, where emotive moving picture becomes the medium for showcasing human-centered experience design. After all, creating tutorials for our experiences’ latest investments isn’t that hard. Instead, we are looking to deliver something more unexpected, where both form and function can be heroes. It is this mixture of objective and subjective where we find beauty in Fluent Design storytelling.

In the spirit of an open debate, I hope you share your thoughts about this approach in the comments below. Ultimately, we create these for you, so your opinions will go a long way in shaping what comes next.

Read the full article here

Leave a Reply

Your email address will not be published.

Typography Study Guide for UX designers

Typography Study Guide for UX designers

Table of Contents Hide LEARN TYPOGRAPHYSupercharge Design’s Typography

10Clouds | From stunning design to flawless code on Land-book

10Clouds | From stunning design to flawless code on Land-book


You May Also Like