Windows Phone Design Process


Started my first blog post with the design principles, I moved forward to the process of applying the principles and design aspects to bringing the app to life. This process consists of five main stages: concept, structure, interaction, visual, and prototype.

Let’s starts with the first stage. Concept  is where you highlight what’s so great about your app. To do so, you need to BRAINSTORM creatively. If you’re not in a team ask people around you and get more questions to trigger a greater inspiration. Remember.. nothing is not worth writing because brainstorming is all about generating as many ideas as possible. Whether your app is accomplishing a specific task, entertaining users or even only informing customers with what they request, you’re narrating a story. To tell the story right you have to include some pillars, which are:

What will the app do?

What is it for?

How does it fit into the market place?

Where and when will your application be used?

What kind of content should be displayed?

How can the app leverage the hardware?

After spotting down the great list of ideas as the outcome of brainstorming, you need to FILTER them to categories or constraint list to help in narrowing down something that could actually be created. Filtering could be based on some questions like ‘can I develop this app in a reasonable time frame?’ or ‘can I develop this app with a team to make this app even better?’ Brainstorming should help a lot if done correctly and you should considering getting the great list down to two or three ideas that are good and affordable enough to implement. This is a transition phase between the concept phase and the structure one.

You’re now left with the greatest ideas as the outcome of the previous phases. SKETCH these remaining best ideas in blueprint form. Information architecture (IA) provides your content the structural integrity it needs by facilitating user scenarios and envisioning the key screens to start from. The outcome will be the structure of the app.

Interaction phase is about executing the app’s purpose. Interaction can be produced in many ways, like using WIREFRAME to sketch out your page flow and scenario that should be there. Wireframes inspires you with ideas for making your app easier to use. The purpose and navigation of your app should be obvious; keep refining until it is.

*To move quickly, use a white board and sticky notes with a similar size of the phone screen.

Let your content speak without words. Adding great visuals will imply the characteristics explicitly. Every app has its own unique identity, so let the content guide the look and feel; don’t let the look direct your content.

Create a prototype and start getting some feedback from users. You don’t have to make them a perfectly working application, you can even use papers. Paper prototypes are excellent tools for quickly creating the look and feel of your apps to present to users for visibility testing.

Try to answer the following questions about the functional elements of your app:

  • Is it clear what your application does?
  • Is it clear how to operate it?
  • Are tasks intuitive in both purpose and operation?

*To new developers, I recommend that you prototype early and often. Like any creative endeavor, the best apps are the product of intensive trial and error.

The minute you’re done with the design process, you’re ready to start coding. Finalizing the design work up front helps you to freely concentrate on the logic needed to implement the functionality you’ve already decided after testing usability. And because you’ve actually got feedback from actual users, you’ll be more likely to end up with good reviews in the marketplace. I hope I’ve got to your interest and helped you consider how this process can higher the quality of your next Windows Phone app.


One thought on “Windows Phone Design Process

  1. Pingback: Yasmine Abdelhady | “Discover Windows Phone” development series for Absolute Beginners

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s