Prototyping UI with proto.io

Building the Bipsync notes app

Welcome to the Bipsync tech blog. We thought it’d be fitting to start things off with an overview of our work in progress with the Bipsync iOS app, provisionally titled “Bipsync Notes”.

Before I write any code I like to have a good set of requirements to work toward. I’ve been around the software industry long enough to know that requirements will always change during development, but as it’s been shown time and time again, it’s cheaper to identify issues earlier in the process. For that reason we’re beginning the project by making interactive wireframes using proto.io. It’s already proved valuable in illustrating flaws in our design that we may not have picked up until we we way down the line of implementation.

For me, the most impressive aspect of the service is the ability to use common iOS interaction paradigms, like navigation controller pushing and automatic keyboard display, which help bring the designs to life. I was able to give the team a realistic walk-through of the app, end to end, without having to write a single line of code — all achieved within a few hours.

If I have any criticism of the tool it’s that it doesn’t have support for some key iOS UI patterns, like the Split View Controller, which we plan to make use of. UISplitView has become a much more important component with the latest release of iOS as it’s now able to be used on iPhones as well as iPads; prior to iOS 8 it was an iPad only feature. It’s possible to mock the equivalent in proto.io manually, by combining their supported UI elements with ad hoc components comprised of geometric shapes and custom images, but that would require a considerable investment of time that I’m not convinced would be justifiable.

Nevertheless, that minor complaint aside I’m very impressed with the service and am sure it’s going to improve the pace of development of our new app.