Dev Center - Design process

Design process

Design the best app you can.

In Microsoft design teams, our process consists of five distinct stages: concept, structure, interaction, visual, and prototype. These stages promote the creation of wonderful apps that consider all aspects of design. We encourage you to adopt a similar process and have fun making fresh, new experiences for the world to enjoy.

Concept

Focus your app experience.

At the core of every great app is a strong concept that provides a solid foundation. At this stage, you should determine not only what your app will do and who it's for, but also what your app will be great at. Focus on the key user scenarios that you want to enable, but be careful not to turn this into a feature list. It's about what your users will be able to do, not what your app will be able to do.

Start with a broad concept and list all of the things that you want to help users do with your app. Then, take a step back and see if a particular scenario really jumps. Challenge yourself to trim down the list to just a single user scenario. In this process, you might cross off many good ideas, but saying "no" to them is crucial to making a strong, focused experience.

Photosynth

By focusing on the core scenario of how to capture panoramas as quickly and seamlessly as possible, Photosynth creates a world-class experience that makes it easy for anyone to capture and share those precious little moments.

Structure

Organization makes everything easier.

Once you're happy with your concept, you're ready for the next stage—creating your app's blueprint. Information architecture (IA) gives your content the structural integrity it needs. It helps define your app's navigational model and, ultimately, your app's identity. By planning how your content will be organized—and how your users will discover that content—you can get a better idea of how your app will feel to users.

Good information architecture not only facilitates user scenarios, but helps you envision the key screens to start from.

Audible

The Audible app is an example of information architecture done right. The experience is focused, allowing users to obtain and enjoy audio books quickly. Audible launches directly into a Hub that provides access to the user's library, store, news, and stats. Deeper levels like the "your titles" section (as seen on the far right) focus on more specific tasks catered to user goals.

Interaction

Tell the story of your app.

If the concept stage is about defining your app's purpose, the interaction stage is all about executing that purpose. This will be accomplished in many ways, like using wireframes to sketch out your page flows (how you get from one place to the next within the app), and thinking about your app's voice and the words you need.

Start thinking on a screen-to-screen level—see your app as if you're playing around with it for the first time. When you pinpoint user scenarios for pages you create, you'll give people exactly what they want without lots of unnecessary screen touches. Interaction is also about motion—the right motion capabilities will determine fluidity and ease of use from one page to the next.

Wireframes allow you to make critical decisions about your app's user flow.

Epicurious

The Epicurious app does a great job of making the story flow for the user.

Visual

Speak without words.

Great visuals define not only how your app looks, but how it feels and comes alive through animation and motion. Your choice of color palette, icon, and artwork are just a few examples of this visual language.

All apps have their own unique identity, so explore the visual directions you can take with your app. Let the content guide the look and feel; don't let the look dictate your content.

After you establish good interaction flows, you can make your app shine with the right visual polish.

Cocktail Flow

The Cocktail Flow app pushes the boundaries of visuals and animations while maintaining a solid grid.

Prototype

Refine your masterpiece.

This is the stage that your app comes alive and all of your hard work is put to the test. When prototyping areas of your app, take the time to sculpt and refine the components that need it the most.

To new developers, we can't stress enough: Making great apps is an iterative process. We recommend that you prototype early and often. Like any creative endeavor, the best apps are the product of intensive trial and error.