Park It finds the mark with bands, branding and alignment

Never fear, developers, Dave is here! Welcome to Season Two of Design Consultations with Microsoft’s design lead Dave Crawford.

Season One brought a group of top fight UK app developers to London for a series of one-on-one design consultations with Dave. This time we crossed the pond to San Francisco for another series of consults captured on video for your inspiration and learning.

A utility app answers, “Dude, Where’s My Car?”

First up is Park It by independent developer Andrew Long. Spoiler alert: the design review was a success, as you will see in this new video:

Park It is a great example of an app that does one thing, and does that one thing very well. The app remembers where you parked your car and leverages GPS to guide you back to your spot. Andrew began work on Park It back in 2011, and while he counts more than 40 apps to his name, he’s a self-described “non designer.” Park It was one of Andrew’s first apps, and he didn’t spend a lot of time on visual design when building the first version.

As such, the American developer jumped at the chance to get Dave’s expert eye on his work. “I had seen the previous design consultation that Dave had done and was very impressed,” Andrew explained. “It seemed like a golden opportunity to get that kind of input for one of my own apps.”

The issues: A complex experience lacking in design refinement

Dave likes the universal appeal of an app that solves a problem so many of us have encountered more than once. But Andrew’s reliance on Windows Phone’s built-in system controls led to an overly complex user experience.

“He fell into the trap that a lot of developers fall into with these utility apps,” Dave explains in the video. “They think of what they want to do and then look for controls to make the apps look slick.” Specifically, the first version of Park It relied on the stock pivot and panorama controls for its primary user interactions.

The challenge was to refine Park It’s design in order to bring both a cleaner look and feel and a simpler set of user controls to the app. At the same time, Dave also wanted to move away from stock interactivity controls in favor of a unique experience that would help to establish the Park It brand.

Andrew took Dave’s suggestions to heart and completely re-designed and re-coded Park It from the ground up. “The response has definitely been positive,” Andrew said of the new version. “Park It is definitely now simpler to use and a lot easier on the eyes.” You can see the fruits of Andrew’s labor – and ensure you never again forget where you parked your car – with the latest version of Park It in the Windows Phone store.

The takeaways: Bands, brand, and the grid

  • Consider designs built around horizontal bands of information to add order and structure. Stacking the steps the user progresses through when using the app creates an implicit flow: Start with the map at the top, then tap to add a photo, then enter a description, then commands at the bottom.
  • Consolidate your app’s information onto a single screen. An unobtrusive logo or icon on this main screen can then provide persistent branding throughout the user experience.
  • Think about alignment and spacing of onscreen elements. Windows Phone uses a grid to achieve constant alignment throughout the OS.
  • Use colors to both brand your app and enhance readability. In this case, Dave kept Andrew’s original green colors and set them off with a small range of greys.

Resources to enhance your Windows Phone apps

Additional guidance for designing great apps is available in the Windows Phone Dev Center within their Design Library. Specific to this consultation, be sure to check out Screen Design Templates for Windows 8 (Note: 35MB Zip Archive), and Icon Templates for Windows 8 (Note: 5.8MB Zip Archive).

Also be sure to consult the App conceptualization section of the Design Guidelines for Windows Phone. This section contains useful information regarding clarity of the user flow and the editing of default UI components.

Design.windows.com is another great design resource, and you can also find sources of inspiration in our Design Gallery. Map-based gallery apps to check out include Waze and Hungry Now Fast Food Locator.

Ready to improve the design and UX of your own Windows Phone app? Design consultations are available as rewards from Nokia’s DVLUP program, including an introductory one-hour consultation with the experts from Toledo Design. Also be sure to check out the new reward for Live Tile and Splash Screen redesign on DVLUP.