I recently watched a WWDC 2014 session called “fake it till you make it” which gives insights in Apples process of interface development for iOS apps. In a nutshell the talk was about time saving and fast response ways to develop the right interface for an app from the start.

As I began on developing Stepr I’ve had a certain idea of the general look of the app but wasn’t sure about certain details. This led to decisions which weren’t the best. I didn’t know how and did not make many thoughts on how to use the given screen space so I tried to fit my “idea” of the interface into the screen of the iPhone. In the result the progress bar of the steps the user did on the day was way too big and the text which tells the exact number of steps filled a enormous amount of space too. The result was a user interface which was far away from looking gorgeous.

So where did I fail? The answer is relatively simple: Just in developing the interface in different iterations! I’ve tried to fix certain mistakes like color choice in previously releases but the interface is still not where I want it to be. For the upcoming release the UI will be completely updated. In the WWDC talk it is recommended to start on paper and try to get a rough idea on how it should look. Drawing on a piece of paper is fast and will give an immediate idea of the general look of the app. So I tried slightly different variations of the interface on paper first and voilá – while drawing I found things that would not make it look right.

After completing the sketches I moved on to Keynote. Keynote??? Yeah exactly, that was what I thought when I watched the talk. The guys recommended Keynote for UI prototyping for a good reason – it is fast and easy to design a interface from from a combination of screenshots of existing apps, shapes and text. And the killer feature is definitely the animation toolset. It is very fast to try different UI animations by using the magic move feature for transitioning between frames.

I’ve tried it today and have to say that I feel faster than working with photoshop, maybe because of the limited toolset (which isn’t a bad thing). After completing a design I exported it as an image and sent it to my iPhone. To see a design directly on the targeted device is priceless because you get an instant response on how it “feels” on the device itself…something very different as only evaluate it on a computer screen as I find. This method gave me the ability to quickly recognize flaws in the design because I could see which elements didn’t work well instantly. Another plus is to send the screenshots to other people and ask them several questions like “how do you like the interface and what do you do not like?”, “do you know how to use the app?” and so on. This step is still ahead of me but I will give it a try since the response of [potential] users is very important.

In conclusion I have to say that I really enjoyed to try out the tips from the WWDC talk and I think that these steps will help to design way better interfaces from the start up! Maybe it looks like wasted time at first but you will definitely find stuff that does not work so well in your design before writing any line of code which saves much more time in the end. If you do not already use this or a similar way to design your interfaces you should give it a try as soon as you can!