Discovering Basic Principles of UX Design for Windows Phone Codenamed "Mango"

Define the purpose of your app

• What are the goals of the app?
• What are the user’s goals and how can you keep them aligned?
• Define your application definition statement.

A successful application typically starts off with an application definition statement. This statement is a concise definition of an app’s main purpose and its intended audience. A statement can be as simple as one line of text. An example could be as follows:

If you create an application definition statement early in the development cycle you will be more likely to remain focused on important features, and stay away from adding unnecessary features that take you away from your original goal.

Define who the user will be. What is their story?

Once you understand the purpose of the application, you need to try your best to put yourself in the place of the user, and create their story. Creating a story might be unfamiliar to you unless you have been involved in UX development. The best way to create a story is to start with a simple matrix of who is going to use your application, where they will be when using their application, what activity they are doing, and what is their motivation to use your application. It is amazing how much functionality you can create by putting thought into these factors.

Define users and their motivations

• People - That might be interested in using your application
• Places - Places that someone might use your application
• Activities - What might someone be doing when using your application
• Motivations - Motivators a person might have to use your application

For this tutorial, you will focus on the app development of a recipe application, created for an unskilled cook who wants recipes that can be cooked in a short time. As was mentioned in the application definition statement:

Example of Matrix

In this matrix, there are ten examples, but you should push this amount to be 15-20 in a live project. It is much better if you get others involved in creating these factors.

People	Places	Activities	Motivations
College Student	In a classroom	Bored in class	Impressing a date
Young single professional	In the elevator	Using spare time	Enjoys cooking
Newly married person	At the bus stop	Waiting for the bus	Wants to improve cooking skills
New mother	On the couch	Relaxing for a few minutes	Needs meals that can be cooked quickly
Nurse	At the doctor’s office	Taking a break	Wants to try new spices and flavors
Busy Parent	On the bus/train	Cooking for a crowd	Looking for recipes for food already in the house
Fireperson	At work	Refreshing memory on favorite recipe	Needs to find fast recipes to feed co-workers
Cook	In the kitchen	Researching other people’s favorite recipes	Create more diversity in meals
Writer	In the car	Looking for good food in own home	Likes to try new foods
Teacher	In the break room	Shopping	Trying to save time/money

Combine users and motivations

Once you have added the factors for your matrix you can start creating a story about the user. In this example one factor is selected from each column to create the first story. Many interactive designers work with multiple stories.

People	Places	Activities	Motivations
College Student	In a classroom	Bored in class	Impressing a date/spouse
Young single professional	In the elevator	Using spare time	Enjoys cooking
Newly married person	At the bus stop	Waiting for the bus	Wants to improve cooking skills
New mother	On the couch	Relaxing for a few minutes	Needs meals that can be cooked quickly
Nurse	At the doctor’s office	Taking a break	Wants to try new spices and flavors
Busy Parent	bus/train	Cooking for a crowd	Looking for recipes for food already in the house
Fireperson	At work	Refreshing memory on favorite recipe	Needs to find fast recipes to feed co-workers
Cook	In the kitchen	Researching other people’s favorite recipes	Create more diversity in meals
Writer	In the car	Commuting	Likes to try new foods
Teacher	In the break room	Shopping	Trying to save time/money

Build a Story

Kara and Steve are recently married. Even though they have been living together for several years they have found themselves in the habit of eating the same meals day-in and day-out. Kara learned how to make a mean meatloaf when she was in college, and Steve can simmer incredible chili. Throw in a couple varied meals of spaghetti and hamburgers and you pretty much have their "not-so-daring" menu.

As Steve and Kara increase the size of their social acquaintances and want to entertain more, they realize that they should start being more diverse in their own menu. Steve has taken the lead as he has some commuting time on the train, when he can spend some time investigating recipes.

In addition to working all day, Steve also has regular evening plans, whether it be playing ball or working out. Depending upon the night, he has a different amount of time available to prepare a meal. Steve has tried online recipes and apps before, but finds it difficult to tie together the two major factors that allow him to make a good decision about what to cook: prep time, and what kind of food Kara and he are in the mood for. He would love to find an app that would allow him to indicate that he wants Chinese, and that it has to be on the table in 30 minutes. It is also important to him that the recipe provides a clearly defined shopping list that he can send to his wife, who drives by a grocery store on her way home from work.

Being that Kara and Steve are social, they would like an easy way to post their favorite recipes, or Tweet what they are having for dinner that night. They would also like to see what their friends are cooking and recommend by following their posts as well.

Sketch! Sketch! Sketch!

Use post-its, pencil and paper to go through navigation iterations over and over again. This is where you brainstorm with others on your team and come up with as many variations as you can.

Sketch basic functionality based upon user needs and features you wish to include.

You can go as far as you want with the design of your wireframe. Most wireframes (also called the information architecture) are created in black and white and include text about user interactivity, such as steps the user might need to take to navigate the application.

Overview of prototyping using SketchFlow

• SketchFlow prototypes are entirely non-linear. The application flow can be modeled as a complex graph rather than as a linear sequence of slides.
• SketchFlow has interactive User Interface (UI) elements, such as buttons and menus that you can add to any screen in the prototype.
• User interface elements use a hand-drawn sketch style to help distinguish your project as a prototype.
• You can animate your prototype, creating a visual representation of the interaction between the user and the application.
• You can create interactivity by using built-in behaviors.
• Reviewers can annotate SketchFlow prototypes while they are running. The review feedback can be passed back to the designers working on the prototype.