WinRT app guide: Step 2: The Plan

To read the other steps in the step by step guide for creating a Metr/ WInRT application go here

Great! So we have talked about the idea now, and it is time to sketch out a plan. Here is the plan:

1. Decide what your app is great at

MIH!SP is great at planning and registering studying activities in an efficient and motivating way and letting the user evaluate his/her efficiency and prioritizing through statistics with the goal of making it (studying) happen!

2. Decide what user activities to support

View/ Add study items:

• Add study items

• View and sort study items

• Edit/delete study items

• Add categories

• View and sort categories (by name and date)

• Edit/delete categories

• Clear all lists

• Clear all categories

View statistics:

• Compare added to completed (bar series)

• Compare Worth score to Importance, Interest and Urgency score if completed (bar series) for certain category or item

• Estimated time left for certain category (gauge) or item

• Estimated time compared to Time spent if completed (line chart) for selected category or item

• Importance, Interest and Urgency score (pie chart) total

• Time spent studying per month (filled line chart)

Other

• View App Help and information

3. Decide what features to include

• Roaming ? (maybe)

• Settings ? (maybe)

• App help

• English only

Designed for accessibility:

• Support touch only, keyboard only

• Screen reading ‘friendly’ (Items added)

• Scaling

4. Decide how to monetize your app

• The app will be free in 1.0

• Premium content in v 2.0 ?(maybe)

5. Design the UI for your app

Basic sketch of the UI

This is just a first idea. Due to the simplicity of the app it won’t be split into different pages, and as you can see in the sketch the navigation pattern drawn so far is quite simple.

We will further build on this sketch later and discuss commanding surface and navigation flow, but for now this will suffice.

6.Make a good first impression

• Tile & notifications – we will decide on this later

• Splash screen Just the logo as a png on a colored background (fast, simple and flexible)

• First launch No login required, all functions available from start

• Home page Home page will be the only page, at the moment anyway.

7.Prototype and validate your design

We will get to this soon, but not yet. Basically we will need to validate the design and the idea, and do some testing.

Comments

Nothing wrong with the app being one page. If that's what makes the most sense go for it. Don't forget to plan a design for the snap view. Since every Metro app can be snapped, it pays to take the time to make it look great in that state too. 

I'm having a hard time figuring out the layout of the application from the sketch above. Have any others? I wanna help :) 

Sorry, I might have been unclear in the question on Twitter - hard to formulate questions in 140 characters. I didn't mention the snapped view or orientation views,- the question was just this one view if it should be split into two pages or not. 

The application will of course have snapped view etc. The full design plan will be presented at a later point, I try to keep the post somewhat short- and a full designplan would easy translate to about 8 A4 pages (my last app did at least). But the idea is, of course, to follow the guidelines, unfortunately I wont be able to discuss my plan for each and one of them, since there are 150 guidelines +.

Thank you for the feedback, I'll go for the one-page UI :) 

Iris, you can get some great design tools from UI Stencils, www.uistencils.com, thus being a Win8 Stencil Kit and Win8 Sketch Pads :) 

The video might be interesting if you decide to go for the tiles & notifications:
http://channel9.msdn.com/Events/Windows-Camp/Windows-8-Developer-Camp-Redmond/WIN8-CAMP-06 

These are very cool! At the moment I don't think Sketch Flow is available to Windows 8 Apps, so I will check these out. Thanks for sharing :) 

Last modified on 2012-08-22