Anatomy of a WP8 app. Part 2: Design

17 October 2013 (updated 12 January 2014)

In this post I describe how a design review with Nokia and Microsoft transformed the roundup Windows Phone 8 app.

Background

On 25th September, thanks to Nokia's Riaz Ahmed ‏(@TheRealRiaz) I was invited to take part in a design review and promotional session at Nokia HQ in London. The goal was to get feedback and practical advice on how to improve the user's experience of roundup.

As part of the day's activities, a film crew documented pretty much the entire process, including the actual design review with Microsoft's Dave Crawford (@thatUXguy, lead designer in the Windows Phone and Windows 8 Centre of Excellence).

A video from the day is now available on the Nokia Developer site, as the intention was to capture lots of useful, inspirational and generally applicable advice on the app design process.

As a developer, I certainly found working one-to-one with a top-notch designer a real eye-opener!

Summary of the Design Review

The main points raised in the design review can be summarized as follows:

  • Panorama-based design in a mapping app isn't a good experience
  • Maximize map surface area (minimize the menu bar, etc.)
  • Split-out settings, about and help panorama items to separate pages
  • Refactor walking/driving directions and invitee list panorama items, as flyout panels at the bottom of the main page
  • Combine discrete stages required to create a new roundup session (and then invite friends, etc.), into a single share panel that makes the process easy and obvious
  • Remove barriers to app adoption. Find a simple way to share your location with friends that don't have roundup installed
  • Make appropriate use of animation to draw the attention of the user to important, interesting or new items
  • Make it easy for the user to rate the app, and provide a reminder
  • Make better use of app branding

Panorama-based design in a mapping app is a poor experience

The first thing that Dave Crawford pointed out is that map-based apps don't work particularly well with panorama controls. As can be seen from the "before/after" image above, the main thing you want to do with a mapping app is use your thumb/finger to scroll/zoom around. When a map is used inside a panorama control, the gestures used to manipulate the map can conflict with gestures that move between panorama items.

For example, if you use your right thumb to scroll the map, it's very easy to actually swipe the panorama to the next item. In my app, this would result in the map being hidden - not what users want or expect.

In the new design, the panorama control is gone and the main page has the map full-screen and firmly center-stage!

Split-out panorama items to separate pages

Previously, roundup had six panorama items. This was too many (if I remember rightly, I think Dave recommended around four as a maximum), and I completely agreed with Dave that items like settings, help and about should be moved to separate pages.

Dave also commented on how difficult it was for users to work with a panorama control in combination with the toggle switches I extensively used in the settings panorama item. Just like with the map mentioned previously, Dave pointed out how trying to slide the toggle was often actually moving the panorama. Not good design on my part!

As you can see, splitting-out settings, about and help to their own pages makes for a cleaner, less cluttered design. And now there's no problem manipulating toggle switch controls on the settings page.

Refactor some panorama items into flyout panels

Dave commented that there was a major disconnect between the map and the list of directions. In order to view directions the user had to swipe through several panorama items. When the directions were displayed, there was no way to see how a direction item related to a location on the map.

In the new design, the user can display directions by tapping the 'directions' app bar button. This displays a flyout panel at the bottom of the screen. Tapping a direction item now centers that location on the map. The directions panel can be hidden by tapping the map.

In a similar way, the list of friends (the 'invitee list') taking part in a roundup session has been moved into a flyout panel. Tapping any friend on the list centers them on the map. A short animated "sonar" is created around the selected friend to make sure the user notices the location of the selected friend:

Combine discrete stages into a single share panel

During the design review, Dave and I discussed the process the user had to go through when sharing their location with one or more friends.

  1. The first step is to create a "session", which results in quite a lot of activity behind the scenes as a call is made to Windows Azure Mobile Services to create a new row in a database, and to generate the unique "invite code" that's subsequently sent to friends. This code takes the form of a clickable link using a custom "rndup" URI association.
  2. The second step is where the user selects to send the invite code to a friend or friends by SMS, email, etc.

To paraphrase Dave, this is typical of the way developers design user interfaces! In this case, there's a clearly discernable relationship between the UI flow and what happens at the code level. We quickly agreed that this area of the app could be radically re-designed, rolling all the steps into a single action using a flyout "share" panel.

This represented the biggest design change from the first version of roundup, although it was surprisingly straightforward to implement in code, requiring only very minor changes. Because I'd used a MVVM approach from day-one when coding roundup, there were no changes in the repository (Azure) or View Model layer. All the changes were in the View (mostly in XAML) and I was able to use Blend to create a nice share panel, complete with animated entrance/exit and "sonar blip" (I'll soon be posting an article on how I used Blend to create these animations).

Remove barriers to app adoption

The other area needing some attention was that, as designed in version 1.0, roundup was only useful if you and all your friends had the app installed. Clearly, this was unreasonable, and Dave suggested I find some mechanism that would allow at least some degree of location sharing for users without roundup.

By using the new share panel, the re-designed version of roundup now allows the user to send a Bing maps link that shows their location on a map. All that's required is to un-check "the person I'm sharing with has roundup", and the user can share their current location with friends who don't have roundup, or even a Windows phone. This has effectively removed some of the barriers to the adoption of roundup.

Make appropriate use of animation

The first version of roundup contained no animation at all. This was mostly (no, entirely!) because I didn't know how to do it, and was somewhat intimidated by Blend! However, Dave convinced me that I should invest a bit of time getting to grips with Blend. He pointed out that an appropriate use of animation could make a big difference to a user's perception of the quality of an app.

The re-designed version of roundup now features quite a few animations, including animations between pages, animated "my location" and "invitee" markers, and the animated share panel. Having become more comfortable with Blend, I find myself having to firmly resist the gratuitous use animation!

Make it easy to rate the app

It was Nokia's Riaz Ahmed that strongly encouraged me to include a simple way for the user to rate the app. Riaz discussed how important it is to have lots of users rate your app, as it's a major factor that influences new users to install it.

Although the first version of roundup did include a "rate this app" link, it was hidden away in the "about" panorama item. The re-designed version, now includes a reminder that can take the user directly to the store to rate and review the app. The code I added to my own StoreService class was based on the 'Rate My App' code that Riaz gave me a link to.

Make better use of app branding

Dave liked the branding I've created for roundup. However, he was critical about the fact that the main page title did not use the correct branding font style or colors. He also commented that the app's tiles contained the "roundup" logo, and that the tile title was also set to "roundup".

In the re-designed version, the correct roundup branding is used on all pages. On the main map page, the logo is hidden (to maximize the map's surface area) until the menu is displayed. The "roundup" title has also been removed the tile.

What I haven't (yet) refactored

One of the other things Dave discussed with me was the user experience when a friend that you're tracking arrives at your location. Currently, the user gets a (rather bland) notification saying the friend has arrived, and the friend also gets a similar notification. By the way, I use the Coding4Fun toolkit's ToastPrompt control, so the user gets the notification when the app's active or in the background.

Dave suggested I might like to "gameify" the entire experience, perhaps introducing rewards, leaderboards, and a dramatic "Game Over!" type of conclusion when your friend arrives. I really like this concept, but haven't yet implemented as I'll need to re-think the whole way the app works, but I'm actively working on the idea for the next version!

Summary

I had a fantastic time during the design review day at Nokia's HQ, and was really impressed by both Riaz's and Dave's insights into the design and promotion of Windows Phone apps.

Having spent a couple of weeks re-designing roundup based on their suggestions, I'm truly delighted with the results.

Thank you Microsoft and Nokia for the opportunity to meet and work with Dave Crawford and Riaz Ahmed and his team! The re-designed version of roundup is now available from the Windows Phone store