A little while ago, I posted my thoughts about wireframes and mentioned a number of applications that we use or have used in order to make this deliverable acceptable for client eyes.  I thought it would be a good time to go into a little more detail about each app, how we used them, and why we give it the thumbs up or stopped using them all together.

We have always wanted a light-weight app to rapidly create polished wireframes and present them, as an interactive prototype, to clients, right in the browser.  We felt that a app like this would help us close the feedback gap and also educate the client without lecturing them on the point of testing a user experience against defined objectives.   A lot of the apps and tools already on the market do just that but with some drawbacks.

At times we’ve felt like a wireframing app whore–going from one to the next, never really feeling satisfied.  The ones that we got most cozy with are Balsamiq, Omnigraffle and Invision. And, to a lesser extent, MyBalsamiq and Notable.  Each has their good points and bad.  In the end –or more appropriately–as of late, we’ve fallen in love with Invision and currently enjoying a wholesome yet open relationship.

It’s important to note that initially, we were really looking for one app to do it all; hi-fidelity wireframing and prototyping, client integration and feedback right in the browser.  Like in any good relationship, compromises need to be made.  We lessened our demands and netted out pretty well by leveraging the good points of Omnigraffle on top of Invision.

One of the major gripes about most of the wireframing apps was that you were at the mercy of its stencil library.  You had to use what their app provided.  Most of the time that was ok because who doesn’t love sketchy looking interface items and a comic sans default font?

Balsamiq

Balsamiq really did a great job early on by making a stencil library with UI elements that looked like paper/pen sketches.  The philosophy behind it was that something too neat and straight looks more rigid and less approachable from a client perspective–and we wanted something that looked warm and more human. Extensive keyboard shortcuts and a fairly easy to use object inspector made creating a single wireframe screen a breeze.  It was only when we had to generate multiple screens and create interactivity did we start to notice the shortcomings.

• Massive file size when creating big projects with  many wireframes.
• Lack of templating for repeating elements or navigation making editing and creating interactivity a pain.
• Presentation Mode only available on local machine, where balsamiq is installed.  This works fine if all your client presentations are done at your office, but most of the time, that doesn’t happen.
• Exporting to an Interactive PDF requires all .bmml files to be in the right order otherwise the ‘page’ view in the resulting PDF creates an awfully disordered  linear navigation.
• Interactive PDF export doesn’t highlight the hotspots where the PDF is clickable, which can cause frustration for us and for clients.
• Forced to use app specific stencil library.

Notable

Notable, from Zurb, looked really great. One of the things that we liked most about it was the notion of getting feedback from the client, right on the browsers, in the exact spot where the client had issues. In that sense, Notable was brilliant–get the feedback and iterate quickly to speed up the approval process.   In the end, we found it to be less of a wireframing app and we were just re-purposing it for our needs.  Even so, when we did have a single screen available for client feedback, the frustrations mounted.

• Comments disappearing for no reason
• Clients frustrated by the notion of creating yet, another online account during their relationship with us (we already use Basecamp and Freshbooks)
• Confusing interface with no way to mark comments complete
• Lots of up-sells to white label the notable app for a branded client experience
• Really costly ($49/mo for a reasonable plan for most studios)

Even though the team at Zurb was helpful, the app wasn’t exactly what we needed and the costs were really high.

Omnigraffle

Despite the, at times, baffling user experience,  omnigraffle is nothing short of amazing. Site maps, wireframes, mind maps – it can handle it all. With an incredibly rabid and evangelical community,  there’s no shortage of stencils or resources to extend the capabilities. With the help of the Konigi template, we were already delivering great looking Omnigraffle sitemaps, personas, mental models etc–so using Omnigraffle for client facing wireframes was a no brainer. The downfalls were easy to spot when it came time to present those wireframes.

Omnigraffle isn’t a cloud app so you need it compiled on all machines that wish to view the .graffle file type. Not ideal.  Sending an export of JPGs or PDFs of wireframes was a no go and Omnigraffle didn’t offer any interactivity–at least none that I could see.   Even though it solved part the puzzle–rapidly creating wireframes–we shelved it for a while. It came off the shelf when we found that gathering client feedback through the browser quickly and easily, was solved with Invision.

There are also some really unintuitive object inspector, formatting pallets, and keystrokes that you just have to get used to before they become part of your wireframing lexicon.  i.e. it took me a while to figure out how to get the hang of master objects, vs. master layer items vs. paste as PDF–which is to say nothing of trying to figure out how to increase the size of a canvas.  Eventually, it all makes a lot of sense but not without a fair share of head-shakes.

Invision

The Invision philosophy is simple. Do what you do best, however you do it and we’ll hold up our end of the bargain by providing you and your clients a simple way to create interactive prototypes and get feedback.   Unlike most wireframing or prototyping apps, Invision doesn’t force you to use any particular library.  If you love using illustrator for wireframes – keep on keepin’ on. If you dig on Omnigraffle, Vizio, Photoshop or Paint–awesome, Invision won’t hold you back.

Invision lets you decide on hi-fidelity mockups or low-fidelity wireframes, generated from whatever platform you want–heck you could even do pencil and paper sketchs, scan and dump em into a project.  The point is, you’re not limited to any one stencil library. Invision really becomes the apparatus for presenting prepared screens to clients or internal teams, with a unified user experience that bakes in the feedback loop.

The team has also been incredibly responsive–we’ve had skype calls with them and exchanged tweets, too. They are actively engaged with their user base through Olark and always seem to be improving the experience based on our feedback.

Feeling like we play a vital role in the success or adoption of an app, no matter how little an impact our suggestions may actually have is what made us love Freshbooks so much, back in ’07.

What’s more is that Invision just worked. Clients don’t have to create an account, just a simple link to the prototype build and off they go.  Once clicked, a lovely interstitial page that tells them their experience is loading–which is a really great way of putting clients, unfamiliar with wireframes,  into the right frame of mind.  Soon, they are able to click about and focus on the user experience, which is really the whole point.  And, the best part is that navigating the learning curve is so quick, the feedback starts rolling in before we even have a chance to let clients know how to engage ‘comment mode.’

Creating interaction between screens is where most apps start to breakdown in some way or form.  Invision does have some issues to sort out but it nails a few key elements.  File upload is a simple drag-and-drop.  Interactive availability isn’t dependant on which UI element you use, like in Balsamiq. Rather, when you enter build mode you can plot a hotspot anywhere on your file and choose a navigation path–either to another screen or previous screen.

Finally, templates will make your life really easy.   I’m sure a ton of UX people out there can sympathize with me or have cried in the corner at the thought of relinking global nav elements on a large balsamiq project.  Templates can be applied anywhere and you can have as many as you want.

Invision also has some other great aspects

• You can replace an existing file with another of the same name without overwriting the interactive hotspots.
• Mark comments or feedback as complete
• Create a password protected prototype staging area
• Filter through all uploaded screens for a given project to make replacing or finding a file that much quicker – handy when you’ve got a project with 72 wireframe screens!

There are also some drawbacks – though not many.

• Template objects must stay in the same coordinates. Annoying when you’re footer is lower down on the screen because a particular page has more content.
• Not being able to duplicate a hotspot (like alt+drag in most design applications)
• View all comment conversations for a given screen in context of that screen
• Better version control for replaced files.
• Better way of marking a project status

If you’re anything like us, you’re always looking for ways to improve your process and be respectful of your client’s time and inclination.  If you’ve struggled with a great way to present wireframes and get feedback, take a peek at Invision app–it’s like the friend, your friend wanted you to meet because you’d get on like a house on fire.

If you’ve got some ideas as how you’ve handled this part of the agency workflow, I’d love to hear ‘em.

The debate rages on about how wireframes fit into a studio’s overall process.  I suspect that wireframes or sketches, to some degree, have always been a personal choice for a designer.  Some designers may find it easier to get into photoshop right away and start working away at a blank canvas until something takes shape. Others prefer to approach their work a little more methodically and sketch out high level ideas and then work within photoshop to efficiently produce a fleshed out concept.  The latter, being the digital designer’s version of ‘measure twice, cut once’. Even so, not everyone needs to be methodical to produce excellent work–I’m certainly envious of those that don’t need to think through ideas with pen and paper because, quite frankly, I’m too insecure to not bounce ideas off other people before diving headlong into a concept.

But creating a uniform, one-size-fits-all process isn’t really the point, is it?  We all have different ways of working and getting things done.  Whether you work within a team environment or as a solo freelancer the issue isn’t how we work rather, the issue, as always, is how can we work more effectively.

We’ve taken a good long look at our process and how it, and our business, has evolved over the past 10 years.  Like most, when we were first starting out, we didn’t we know what we didn’t know. Nor, did we have a clue how to manage a workflow.  We just got the work done all willy-nilly and, eventually, as our clients got larger, our budgets and timelines grew too. All of a sudden we found ourselves with multiple projects at various stages of completion.  We just got to a point that we knew a responsible method for delivering client work was necessary.  That or, we’d soon be uttering words that can be so hard to say.

We introduced various stages to our workflow and all were very well received – Things which, now, seem like a no-brainer. Concept reviews, production reviews etc. All things that that made the creative process less and less nebulous.  They also provided an opportunity to include our clients early on and it really helped us get on the right track quickly. We took this same approach with wireframes. Not only were they a great tool to get the client to see how relationships between types of content created a hierarchy but, it also helped by removing a lot of decision forks that previously slowed down the design stage–making life for designers infinitely easier.

About 4 years ago we made wireframes a mandatory part of all web and app design and, internally, it was a great success. At first, we used pen and paper sketches and then quickly moved to Balsamiq as it offered us a way to present wireframes and quick site prototypes to clients.  And this is where we started running into friction.

Because we presented the wireframes as a deliverable that required client sign-off , it created a sense, rightly or wrongly, that  it should look polished.  No matter how much we tried to explain to clients that what they were seeing was a prototype and wasn’t what their site will eventually look like they couldn’t get their heads around it. For us, it was a quick way to determine if we’ve captured all the technical requirements, user goals and content interactions for each page.  For them, it was the first glimpse of their website that they are paying good money for.

After asking some trusted clients how they felt about our process and about wireframes in particular, they all said that everything was fantastic but when they saw the wireframes of their website, their hearts sank.  This lead us to the conclusion that wireframes shouldn’t be a client deliverable.  At least not for us. But, I just can’t escape how powerful and helpful they are.

The truth is, wireframes, when a client gets it, can be a god-send.  Not only do they involve the client early but also gives them a sense that the website or application is approached from a logical and methodical perspective rather than a nebulous ‘creative process’ – which for most clients, gives them the warm and fuzzies.   Just as important as the client warm and fuzzies, our team gained a greater sense of what each of us needed to do in order to bring a project to completion.  So, we decided to pull an about-face and keep wireframes in as a client deliverable but, client education was going to be key.  We were going to really have to explain the ‘why’ behind using them. We did this by showing clients past examples of wireframe prototypes and finished projects side by side.

Ultimately, we’re glad we’ve stuck with it because the ‘wireframe’ has become the quintessential planning tool. What good is creating interesting layouts and beautiful concepts if you can’t do so without the proper content? It’s like asking a builder to construct a house with out a set of plans from the architect. If the content doesn’t exist, neither does the design. Let me say that again – if the content doesn’t exist, neither does the design.  Getting the proper content at the wireframing stage or prior is the best way to get through design and development, with minimal scope creep and headaches. In the end,  clients can see how their content actually works and if it is in line with the overall objectives of the site–providing we’ve done our job and they understand the purpose of wireframes in the first place.

After some time, clients have really come around to the idea and purpose behind wireframes.  It also helps that, from a presentation perspective , there are now so many options to get wireframe sketches or interactive prototypes in the hands of clients and solicit feedback. We’ve recently run the gambit of these tools (which deserves its own post)–some of our favourites being myBalsamiq, Notable App and Invision.  We’ve landed on the amazing Invision because it’s so flexible and feature rich.

We’ve had success and failure with wireframes. We’ve won our clients’ hearts and lost substantial pitches because of them.  While I wouldn’t say we live and die by them, but if done right  they can be compelling, a huge time-saver, and a great way to get early client buy-in.  We’re still evolving our process and getting it perfect is a nice thought but its more of an endless pursuit than anything else and that, at the very least, is something that experience teaches.