I’m turning a website for traveling surfers, www.surftourist.com, into an iOS app. It’s the first time I’ve designed for iOS, and I’m building my workflow – setting up shop – for future projects. This post follows on from iOS App Design Workflow: Part 1.

Keeping in touch with the team online

I’d recommend using Campfire with Propane for online team communication, although on this project we’ve been using Skype — out of laziness perhaps — but as we’re building it for ourselves it’s a bit more of a casual arrangement. If you are using Skype with multiple users be careful – it doesn’t save the contents of a chat between more that two people. Yes, I did find that out the hard way.

Remembering everything

Ideas and key points from conversations get pasted into Evernote. I’ve tried Yojimbo and Together – digital scrapbooks – but settled on Evernote because it’s development cycle seems to be the most active. If you’d like to try an alternative check out Together. I also recommend Yojimbo vs Together vs Evernote: a review.

Information Architecture: Sketches

The features and direction weren’t defined well enough to jump straight into wireframing, so I sought feedback from sketches first. The sketches were rough enough not to waste time but clear enough to get the ideas across.

For the novelty of it, and a little added convenience, I sketched on an iPhone App Sketchbook from appsketchbook.com. On standard delivery it arrived in two weeks – far too long. If you’re not in the States get it sent express.

Also check out UI Stencils’ stencils and notepads. UI Stencils iPhone Sketch Pad doesn’t provide enough room for adding comments and notes to screens for me, but they have got great products including a dry erase board with browser chrome, a really great idea.

Information Architecture: Wireframes

The sketches triggered discussion. Once there was general agreement I produced a new round of rough sketches for my own use that covered every screen of the revised app.

The approach I’m taking to the user experience on this project is more casual than what you’d find at a UX studio, which would be defining personas, scenarios and user testing in a more scientific, methodical way. If you’re interested in those processes there’s plenty of fantastic resources online waiting to appear in a results listing. See No excuses – budget usability testing for a start.

Until this project I’ve used Indesign for creating IA documentation — very much a designer’s approach. Professionals advocate Axure, but I was hoping to find something that was more mobile app aware. See The search for the perfect IA application if you want to read a little about Balsamiq, Omnigraffle and some of the other available options. The tool that best suited what I was looking for was FlairBuilder.

The most attractive feature of Flairbuilder is the ability to push a working prototype online with the click of a button. This was a major plus not least of all because our team is spread across Australia, Scotland and Japan. Another great feature is a component library that includes mock iPhone UI elements and device artwork.

Flairbuilder runs on Adobe AIR. Despite some fiddly bugs, which were noted and sent to the developer (who has promised they’ll be ironed out in the next release – thanks Christian!), the app was intuitive enough that I had a 40 screen iPhone IA/prototype with site map built in two days.

Not only could I create a working (clickable if you like) prototype, the ability to add interactivity meant that I was able to create user scenario paths that the other team members could click through. The team could forget about navigating the IA and focus on experiencing how users would complete specific tasks.

I love crafting user experiences, and writing front-end code too for that matter, but what people know me for is interface design. Looking ahead to commercial projects I’d like to partner with a UX team. If you have any recommendations leave a comment or dm me.

Thanks for reading. The next article will focus on interface design. Do you build apps and have suggestions for a mobile workflow? What’s your advice?

About these ads