Surface Duo UX

I had the privilege of working on shell-level interactions and motion design for the Surface Duo, a dual-screen Android phone made by Microsoft. It was an interesting challenge to optimize interactions for two screens while also balancing what it means to be both Android and Microsoft.

And Then There Were Two

Smartphones have been around for a while, and our interactions with them have become second nature. How much could those interactions change when there’s a second screen added on? More than you might think.

I started by animating some of the proposed interaction patterns with wireframes, so that leadership and the whole team could align on some of the most fundamental behavior such as orientation transitions, in relation to the “minus one feed” that lives off-screen to the left.

After reaching a consensus on the basic behavior, we would iterate on designs and eventually handoff more detailed motion redlines to the engineering team. These redlines would always be delivered with a 0.1x speed reference video such as the one below.

Below is the announcement video for Surface Duo, which shows some of the UI motion behavior. I animated a short section of this UI flow for the video.