Workplace Safety Coaching App

UX Case Study

Claudia Love
Feb 5, 2016 · 3 min read

“Learning never exhausts the mind.” — Leonardo Da Vinci

The Goal

To build a mobile app optimized for Microsoft Surface 2 based on the client’s existing iPad application.

Workplace safety coaches at industrial establishments like food processing plants. Most of these users have been using a clipboard, paper, and pen for years, and are not particularly tech-savvy.

Our client originally released their coaching app for iPad only but was now having conversations with potential new customers that use the Microsoft Surface 2 as their device of choice. They hired Headspring to build this version of the app for them using the Microsoft interaction patterns while keeping their identity consistent across platforms.

  1. I had never designed for Microsoft mobile devices before
  2. The iPad and Surface patterns don’t have much in common

While the devs were working on setting everything up to start working, I dove into an intense self-training on the Surface design and interaction patterns. I studied the existing Microsoft documentation along with videos and tutorials. Since I did not have access to a Surface tablet at the office, I drove to a Microsoft store and spent a couple of hours playing with it. I researched how companies like Twitter or Facebook had designed their native Surface apps while preserving their identity and visual consistency with their iOS and Android tablet apps. I also looked up dozens of apps on the Windows Store to find common patterns and ideas.

iPad on the left, Surface on the right (source)

The original iPad app was portrait only. I recommended against this approach since I observed most Surface users hold the tablet in landscape orientation (I attribute this to the proportions and the position of the Windows button). For this reason, we decided to support both portrait and landscape orientations for the Windows app.

Once I felt I had a good command of the guidelines, I created wireframes and high fidelity comps that I shared with the client. After two iterations we agreed on a design that was consistent with the Surface patterns while still being faithful enough to the look and feel of the iOS app. I also took the opportunity to point out some UX problems with the original app to make sure we did not repeat them in this new version. Finally, I built all the main screens in WPF using Microsoft Blend for efficiency purposes.

Every time a new feature was ready, the developers ran a quick demo for me to make sure the design was still on track, then we shared with the client.

The project was completed quickly and smoothly despite the fact that we all had to step out of our comfort zone and learn new patterns and technologies in a short period of time.

  • Microsoft’s reference materials for designing Windows Store apps are very helpful
  • Microsoft Blend might have been created for designers, but that doesn’t mean designers are going to find it easy to use (or like it)
  • Sidebars are virtually universal in Surface apps (gotta make the most out of that wide screen)
  • The KISS (Keep It Simple Stupid) approach is always the safest when dealing with users who are not tech-savvy (even if it’s not always sexy)
  • Big constraints make a problem way more interesting to solve

Headspring UX Team

On a mission to design beautiful and intuitive enterprise…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store