“Learning never exhausts the mind.” — Leonardo Da Vinci
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.
The Business Need
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.
- I had never designed for Microsoft mobile devices before
- 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.
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