What I learned designing my first Windows Phone 7 app (guest article)

This is a posting by a guest author, Daniela Panfili. The same post is available on her blog TsoDa Place.

P1000415 Daniela Panfili is a user experience designer living and working in Brussels for Ordina. She is specialized in RIA and mobile experience design and lately approached the WP7 platform, building a news feed reader named FeedTso. In addition to blogging her thoughts about UX and UI design on tsoda.eu she also publishes her video and interactive art experiments online.

This is a journey into the design of the UI/UX of my first Windows Phone 7 application, from the moment I decided to try experimenting it, till the day I published my application and got my first feedback.

How it all began

I try to look for sources of inspiration for my UX job in every new gadget that comes out, regardless of the system and last summer I was very curious to discover the new Microsoft smartphone. From the first screens they showed last year I saw it was not the usual minified desktop Microsoft always proposed in its previous versions of mobile systems. They changed their approach and made completely new UI inspired to the one used in the Zune.

I went to a presentation (it was REMIX10 in Belgium last September) and I listened to Kat Holmes and Karen Davis, from Windows Phone 7 Design Team, talking about the principles that guided the design of the new WP7 UI. And it was true, they really did it. Great work, I thought.

My curiosity for the new paradigm turned into a new challenge for me: designing an application that matched the new principles of WP7 and the Metro design.

Together with my husband, Simone Chiaretta, we decided to develop a Google FeedReader, with all the features we wanted in a feedreader for a smartphone.

In the next sections I’ll show you the steps we followed for building FeedTso.

Market Analysis and find the right Persona

The first step is finding the requirements and deciding what our target will be. This is usually something done by the marketing department, but if you do the application by yourself, you have to switch hat and apply the same methodology used by them: benchmarking, making polls, asking to the people that you know.

fguidelinesAlso, it is very useful to read through the WP7 Design and Interaction Guide (PDF) to understand the personas for whom Windows Phone 7 has been thought: 30-something active people that want to simplify their busy personal and professional life using a powerful but intuitive and easy to use phone. It has not been designed with the teenager as primary target group.

After this analysis, I put on paper all the information collected and I tried to understand what to put into the application and to which element focus on.

The feeds are the main elements, but the WP7 user experience naturally put a strong accent on social features. So why not focus on it as well?
This is another element that I have to add to my app.

The Information Architecture (IA)

Working for mobile devices always puts me in the mental condition to think about how we use them. And I start to watch the persons around me, spying their “mobile” behaviors.

Stop to think that someone will use an application with all his/her attention. Usually we use the smartphone while we’re doing something else, going somewhere by train/metro, driving (even if we shouldn’t), walking. But there are also a few moments where we can give the application our complete attention (example, you are in queue for the doctor). It means that the contents have to be structured by hierarchy of importance and based on the favorite information.
Windows Phone 7 puts a strong accent on content, so this is the most important phase in developing a WP7 app.

Understand the Metro Design

The information architecture cannot be abstract from the device chosen as it is the skeleton of the user experience.

The Metro UX is different from any other mobile devices and the IA needs a specific approach: the goal of the Metro UI is to give a lot of emphasis on contents that are important to understand whether to dive into details or keep doing what we were doing. To achieve this, they introduced the concept of hub, whose role is to concentrate all information into one screen, like a dashboard or, probably with a better analogy, the cover of a magazine.

fTsoDaNews_panorama_3The concept of hub is materialized into two new paradigm of navigation, each with its own meaning and function: Panorama and Pivot. The difference between the two is subtle if you see them just in a short presentation.
I read and read again the documentation, but it took a while and some tests to really understand how I could use the new elements.

Choosing one or the other depends on the application’s purpose and on how we want to introduce the user to the contents:

  • Pivot orders the elements in a perfect and logical way, splits the information in categories and gives the list of the elements available for each categories.
  • Panorama gives a quick overview and pulls into the same screen information from different areas of the application.

I designed the content organization as a navigation through different services. How did I need to present them?
My answer was: an overview.

The Pivot is more analytical and used to show various aspects of the same content, while Panorama gives a “bird’s-eye view” over the various information available.
I like the idea of having an overview, a place where the user lands when entering the application. So I chose Panorama: it allows user to explore what’s new and find what is more relevant for him.
Furthermore, Panorama allows the usage of visual communication and images, for creating a path through blocks of content which draws a sensual and immediate link among information using the user’s perceptions.

fnavigationOnce decided the entry screen of the application, the next step was to organize the contents in groups and levels, to design how the user interacts with them, to built a navigation map and an outlines’ document.

Once created the content structure, I began to think how to highlight some content in order to create a path for the user.
First I prepared each screenshot (already in wireframes) trying to harmonize the content using minimal graphic to highlight the IA paths. The wayfinding’s example is a good paradigm to explain the metro graphic’s style.

For example I used accent color to separate title and others header’s information. I used little boxes to give a reading support and to highlight the number of the feeds.
fFavoritesDespite believing in design based on the IA and ergonomy, it so sad to view a Panorama with only text and a black background
So I chose two photos that matched with the Panorama’s content and with the app’s purpose, one for the white theme, one for the black.

And what about the other pages of the app?
After having taken the decision of using a Panorama as app’s first screen, the impulse was to find a place for a Pivot on the second screen.
No way! For the amount of the content that I had, putting a Pivot would have meant adding one more layer and I didn’t have so many complex information to categorize and to show in such a structured view.

Looking at the content and thinking about the possible user’s actions I decided to put a simple list, horizontally scrollable, to let the user go directly to the list of posts, one step closer to the content.


Gathering “beta” Feedback

fFirefoxScreenSnapz001How to make questions and have feedback to build a better app? This is was my problem, because I didn’t have the budget to realize a real usability test.
I chose to make polls using Twitter. The followers that answered didn’t represent all the users’ categories, I known that it was a imperfect solution, anyway I decided to go through this and I learned a lot from them.

After having asked to some users to test the app, to report bugs I sent them a form I prepared with a short survey.

The last mile

We fixed bugs, we did the list of features to add in the next release and we released the application.

What is still missing?

The animations are part of the Metro UX, but I was very careful to use them. Why? Because in the past there was an excessive use of animations without meaning, and now I usually look at them very suspiciously. But I understand that animations have a great importance on metro UX, because they are the way to communicate a status to the user, to say that something is on going. So, for me, next actions is, use them more!

The last words

Finding guidelines about WP7 and Metro design it’s easy, finding the way to apply it, not so much.
I wrote my experience with the new Metro design concept, trying to give a personal prospective on my problems and on the solutions that I found. This experience left me with a lot of new ideas to test, maybe in the future I’ll come back on this topic. Also I will talk about how I designed FeedTso during the next MS WebCafé in Mons, on the 26th of May.

And if you have a Windows Phone7, you can try out the application (and buy if you like it):