Recently I developed an iPhone application for Yahoo! Cricket. It was an amazing experience, at the same time exciting as I was working on mobile again after two years. Design went through several iterations. Early concepts were outburst of excitement. After the hand-off to the developers, I released that the design is lacking iPhone application character. Thought it was solving all the use-cases and looking better than other available applications in the market.

BOOM!!! Back to square one.

Again started from scratch. Paper, pencil and a cup of coffee, that’s it. Started with writing down the same things again and again. Product features, what I want my design to deliver and what it should not do etc.

Next was the big learning was when I read the Mobile HIG, a document about guidelines for designers.

I thing I must tell you that Apple is really good at documentation. I have seen Android documentation as well but find Apple documents more structured and organized.

The most exciting and fast phase was sketching the screens. Adding the data in to the sketches. It was so easy as I could always cross check with product definition statement.

Here I would want you to go through the document and find out yourself what the Product Definition Statement is. At the end of this post I have added links for reference.

Things started looking easy and design was much in control. The next step was to colour the sketches. I found this template which has almost all iPhone related mocks in Photoshop document format (psd). But before this, I did one wise thing to check if everything is according to the UX guidelines. I copied existing UI elements from iPhone such as tables, contorls buttons etc... and added the data relevant to the application. This I did to focus more on Information layout and flow. To avoid VD tarp, I found this trick quite useful.

I was home as far as information design was concerned.

Next step was just to focus on look and feel. The colours, typography, iconography, Thats all!!! As I had the PDS (Product Definition Statement) ready I could cross check the visual design as well. It helped in mood-board as well.

I some how do not like creating visual specifications, but there was no escape. I found one, I thought may be I can learn Interface Builder and help building the front-end. This helped in two ways, first, it assured the team that development would be pixel perfect and second, I learned something new. On top of it I could easily escape creating visual specifications.

The app looked pixel perfect and got developed as per the design. You can find the iPhone App here. It is available in India and US app stores.

Here are the few things I would suggest.

1. Know where and how the data is coming from. So that if required you can suggest changes in back-end.
2. Keep in mind you are designing with-in the system and not for web.
3. Read through the document before you start. Hold on the excitement. I have learned this hard way. 🙂
4. Create your Product Definition Statement before you get into detailed design.
5. Sketch, Sketch and Sketch
6. Mock up all possible scenarios for the features you are planning. It helps, as it is not web where you can modify the design later on. Everything has to go as one release.
7. Use colours which support functionality and not just to add in to the look and feel.
8. Use one font face to get the right contrast between different types of information.
9. Be part of development team, understand developers mental model. How to do this? Learn Interface Builder and help developers with front-end. It reduces their headache of pixel perfection also builds confidence in you as designer.

Here are few documents, which I referred while working on the application.

1. User Experience Guidelines
2. Interface Builder
3. Stanford University School Of Engineering Videos
4. iTunesU Subscribe to iPhone Development Foundation Videos