When starting developing a new mobile app it is always tempting to jump directly to your favourite IDE and start developing, but do yourself a favour and spend a few minutes planing what you are going to develop. This will most likely save you a lot of time later on.

I’m creating a very simple Windows Phone 7 app called PinCodeKeeper and as the name states this application will keep your pin codes.

Sketching

It’s always a good idea to start sketching the wire frames for your application. I like to just make some easy and not very detailed wire frames covering the most important parts of the application. The most important at this phase is to identify the functionality you want the app to contain. These sketches are also very good to use when discussing the app with potential users/customers.

For sketching I use Balsamiq Mockups and since this application is for Windows Phone 7 I have downloaded and imported Windows Phone 7 templates and controls to Balsamiq Mockups.

While sketching I identified 4 main functionality areas and I created a sketch for each of them as you see below.

First screen displaying stored pin codes

Screen displaying selected pin code

Add a new pin code

About screen

Analysing

When the sketching is done I use to analyse the app I am about to make just to get an idea of what challenges I might meet and to define the most suitable architecture for the application. If this was a more complex application I would also create a navigation map together with the sketches so I could see the screen flow and avoid deep linking if possible.

The analyses of PinCodeKeeper tells me that I need to use the local storage to save pin codes and that I most likely need to create a custom control for the pin code image card.

For the local storage part I will use Isolated Storage and store pin codes as xml files. I need a PinCode object that will contain the name and a double int array representing the numbers to be drawn in the pin code image card.

The PinCodeCard custom control will draw red, blue , green and yellow squares in a given pattern for the pin code image. The user must be able to select any square and enter a number between 0-9. There must be a scramble function that adds random numbers in the empty squares.

I also want the app to be available in different languages and support both portrait and landscape mode.

Architecture

I now know enough to decide how the application architecture will be. I will use the Model-View-Presenter (MVP) pattern and I will have a utilization class for storing and retrieving data from the isolated storage.

For a quite simple application like the PinCodeKeeper I will not spend more time on sketching or analysing, I’m no ready to start developing the application. The hour I have now spent planning the application will probably save me several hours when I start developing.

From http://breathingtech.com/2011/do-yourself-a-favour-stop-and-think-before-you-start-developing-your-mobile-app/