Surface Dial

prototyping, front-end development

surfacedial_hand.jpeg
 

The Surface Dial was a brand new input modality developed with the Surface Studio. It can be used both on and off screen to switch between tools, cycle through values, zoom in and out, and more.

Goals

Polish the UI for a high-quality user experience. Advocate for design in conversations with engineering and advocate for engineering in conversations with design. Help the two disciplines meet the sweet spot where implementation matches design intent and design intent accounts for implementation limitations.

Strategy

Working closely with both the design and engineering teams, I polished the UI in XAML code to achieve pixel perfection and implemented the animations for transitioning between modes, activating, and dismissing the menu. The animations were reviewed with motion designers and small changes were made to fine tune the transitions in real time.

 On-screen Dial UI

On-screen Dial UI

Off-screen Dial UI

Off-screen Dial confirmation state

In addition to polishing the shipping experience, I created a Framer prototype to experiment with applying Acrylic material to the UI. Working with design, we tested various color combinations to ensure adequate contrast between the Dial UI and the content below.

https://framer.cloud/LTmqj/

Screen Shot 2018-08-30 at 7.45.44 PM.png