Office 365 & Apps

In my first role at Microsoft I worked as a motion designer across the Outlook, Do More Experiences, News/Weather/Sports/Health Apps and Office Personality teams helping define motion language and implementation standards across the ecosystem. I also worked as a Producer on the Digital Media Production team leading video projects, both motion graphic and live action, for social media and other digital consumption.

  • Role Motion Designer II
  • For Microsoft
For the “Redstone One” Windows 10 release I developed some new, hopefully engaging and delightful transitions for the new Weather app. In a rare occurance, the press had some nice things to say about motion specifically. Thanks, The Verge!

theverge.com May 15, 2015.

For the News app, instead of a spinner for 4 long seconds, I developed an app launch experience to make use of the async time and lightly educate the user on how the interface works, visual hierarchy, what the headlines are, and then, hopefully before they've even realized they're waiting, we load the images to complete.

I additionally developed interaction and motion designs around maximizing the interface, scroll/parallax, onHover, onPress, onPressAndHold, page transitions and exposing additional content on scroll.

Simple page transitions for the Health & Fitness app.

New tab and shy header on scroll animations for the Edge presentation at MGX 2015.

One of my very first projects for Microsoft was a vision video for what a "modern mail client" could look and feel like. This explorations looks at a bunch of different interactions including threaded conversations models before they were standard and a rich, touch driven feature set.

In the “battle for real estate” pixels are at a premium. Digital authenticity, however, provides any interface the ability to “crack open” in a way that isn’t possible in analog. This is an explore of myriad places you could potentially expose features within.

“Storytelling” with motion. Here the simple transition of “draft” to “just now” confirms the action and hopefully delights the user.

Can we hydrate and dehydrate presence indicators to provide rich information, only when needed? (interaction Nathan Auer)

Long before we shipped threaded conversations, we were experimenting with how to transition users from the traditional address information at the top of the message to the newer model on compose.

For the Office Personality team I was responsible for helping define the motion language and implementation guidelines for what went on to be named the "Fabric" design language. Additionally, I was responsible for designing specific patterns and animations for the Ribbon and working with devs to implement that work across all platforms and endpoints. Here are a few examples:

A “pop-over” ribbon that obscures the content on canvas.

A “sticky” header that pushes the canvas out of the way.

Tab switching with contextual tabs.

Do More eXperiences For the DMX team, I worked to extend and polish the motion language work from the Office Personality team for a series of apps. Among them, Bloom, a company directory app that was contextual in awareness with content driven profiles to drive collaboration.

A first run animation to establish the identity and invite the user in.

A spinner based on the identity work.

Office - Media Production Because of my background in production (Longer story, please see my LinkedIn profile for a deeper understanding of my first career. ;) https://www.linkedin.com/in/gino-scarpino/ ) I was put on the Media Production team inside Office as a Producer.

One of my projects was a social media campaign explaining Office 365 in the early days of adoption. The initial ask was for a 60 second, live action spot that featured three small business owners collaborating and featured essentially every app and service in the suite. Additionally, they didn’t want any dialogue or voice over. They wanted “compelling music and awesome visuals.”

So, I hired a writer and illustrator and went to town on the v1 script and storyboards.

Illustrations by Jorge Almeda

Illustrations by Jorge Almeda

After shooting and assembling the rough cut, it was immediately apparent that live action, split screen, tons to read, without dialogue and attempting to cover too many products just wasn’t going to work. So, with the money saved on post production, and to turn the project around, I wrote a one page voice over and pitched a motion graphic spot that abstracted a lot of the app detail and focused on the power and ease of collaboration in the cloud.

VO Script

2 col script.

2 col. script.

Final product. “Get it done with Office 365”

Produced/Directed/Written by: Gino Scarpino Animated by: Adam Lubanski

I was also tasked with building out a podcasting studio that could quickly and comfortably capture up to five people at a time, sound “as close to studio quality as possible” and require zero permanent construction. The following sketches, along with a gear list and budget was enough to convince leadership to move ahead.

Small office, in scale sketch to describe gear and people space.

Large office option.

A simple flow to describe what we already owned and what would be needed.