Microsoft Band UX

During the Microsoft Band’s third phase of development I was brought onto the team to provide a fresh take on the UX from a motion perspective. Band had previously never done animations other than simple flipbook style sprite animations, and I wanted to change that. The interface was an interesting challenge in scale, the screen is only 320×128 pixels, but being an AMOLED meant graphics rendered extremely crisp and accurate. Working alongside two developers, we developed a series of prototypes and a final animation for an EKG sensor application on the device.

It was clear from the early stages of design and development that sprite animations wouldn’t suffice given the real-time nature of an EKG reading, so I worked with the developers to try different styles of real-time animation to explore possible options. The Band’s sensor would output 100s of points of data per second during the reading which could be graphed in real-time, but it was unreadable. After landing on an animation style that was clear and effective, we developed a smoothing algorithm that took the raw data from the sensor and mapped it to the designed animation.

ClientMicrosoft BandServicesMotion, Experience DesignYear2016Linkwww.theverge.com

Designing the app experience

While the Band collects data and outputs a few metrics on the device itself, its real computing power comes from the Microsoft cloud with metrics and inferences being output on the mobile experience. I designed the EKG and Stress metrics to fit inside our app framework on both iOS and Android.

Variations on a theme

Early in the design phase of the EKG experience I prototyped animations for the sensor reading. I worked alongside the development team early in the process to keep an open dialogue about what was and was not possible on the device, and we went through a few rounds of low fidelity proofs of concept on the device itself to make sure we were designing experiences that could ultimately ship.

Icon development

Designing icons for EKG, blood pressure, and respiration rate on a 320x128 was a challenge given such a small scale, but I was benefitted by the quality of the AMOLED screen; icons render pixel perfect and crisp at their final size.

Improving existing experiences

In addition to designing new features for the Band, I also updated and improved existing experiences. I created new flows for a consolidated timer/stop watch feature and also the reworked Cortana pairing, as seen here.