Last week I hosted the “UX Panel” at Echelon 2011 and after the event quite a few people asked me about my workflow for wire-framing and prototyping. I’ve been meaning to talk about my this at the next IXD Session meetup, so I thought I’ll write some about it here as well.
Below is a summary of my pre-production design methodology specifically for iPhone apps. It’s relatively cheap, allows for quick iterations and has been working well for me so far.
1. Sketching (pencil/paper or whiteboard)
Lately I’ve become very obsessed about sketching every Idea we discuss in the stage where we are brainstorming to define the product. This always makes me convey my thoughts better and helps me remember more.
2. Wireframing using Keynote
I know a lot of people who swear by Omnigraffle. Especially folks who’ve been wireframing since early OSX days, for instance my good friend Wolf. I’ve personally never been able to warm up to it. Instead I’ve been using Keynote & Mockapp. I start with a base template (outline of the iPhone) which you can download from the link below:
Download: iPhone4 base template for Keynote wireframing
I’ve found keynote simple enough and quite versatile to do quick wireframing. With Mockapp it’s just a matter of dragging and dropping the iPhone controls (and they are made as shapes so you can edit them within keynote all you want).
3. Prototyping & User testing
My keynote wireframes turn into my paper-prototypes. I export the wireframes as images, put them on a USB stick and print at the nearest Kodak Picture kiosk I can find. It’s cheap and I can iterate very quickly as well. I use these for testing – which ofcourse, is the most important part of the entire design process.
4. Final wireframes and design comps
After the testing I aim to have exhaustive wireframes with as many screens as possible – including error scenarios and detailed settings. From here, the mockups are designed in Photoshop/Illustrator.
This is a rough workflow and ofcourse gets tweaked depending on the project. Hope this can be of help to someone!
PS – I was totally excited and extremely nervous about moderating the panel at Echelon 2011, but a big thanks to my panelists who absolutely rocked! – Richard White, Ian McFarland and Dustin Curtis.
