If you’ve been keeping up with our recent posts, you’re aware of the current LessAccounting project that I’m working on.

In previous posts we’ve talked about how to do free user research on your competitor’s websites and we’ve talked about iterating and innovating and when to do one over the other.

Both of those topics have led us to the wireframe portion of the project.

Thirty Seconds on My Wireframing Process

This post isn’t meant to go into any depth on how to design a wireframe. But I’ll briefly tell you how I did the wireframes for LessAccounting.

First, I sketched out a tree of all the pages on the site and how they connect. The purpose wasn’t to detail every possible link but to show the general flow of traffic and to get an understanding of how many pages there were going to be.

Second, I did a lot of research. Specifically I crawled over every inch of the LessAccounting website and then looked at 4 of their competitor’s homepages and tours to see what they got right and what they got wrong. I took a lot of notes.

Third, by this time I had a rough idea of how I wanted to lay out the site. Now I needed to get specific. I wrote out in bullet point fashion what headlines should go where. Then I talked to Newman about it and got his feedback.

Fourth, I started doing pen sketches of the wireframe but my sense of relative size goes to shit pretty fast. I mean, can you draw an 18 pt. headline without measuring? If you know the secret, will you share it with the class in the comments? This quickly led to step five.

Fifth, I abandoned my pen for Photoshop. I spent the next 8 hours creating, designing and redesigning the pages until I got something I liked.

And that’s it. Then it was time to share with the LessAccounting guys. To do that, I wanted to use this tool I found through an ad on Smashing Magazine that seemed like it was going to be perfect. It’s called InVision.

InVision

InVision’s big deal is that they allow you to create a pseudo-website by connecting your various wireframes together using “hotspots”. These hotspots are boxes that you draw around content that you’d like to use as a link. Once you have all of your wireframes uploaded and you’ve created your hotspot maps, you can click through your work like it’s a real website. This provides a much needed step in the whole wireframe process because it really lets the wireframes come to life.

I had been looking for a tool like this when I ran across them. When I saw the ad, I did what I almost never do: I went to their website and signed up. (Somebody give their marketing guy a cookie.)

They make it so easy to signup that I almost though they made a mistake. Just an email address and a password and I was using the tool like they gave it to me for free. No credit card or anything. And as far as I can tell, all of the features are enabled. Nothing is crippled. It’s astonishing, actually that a company would open its doors that wide but I’m not complaining. These are folks who believe in their product.

Now, my needs are pretty simple. I have 4 pages that I want to upload: a frontpage and 3 tour pages. Once those are uploaded, I want to make the places on the comps that are supposed to be links into hotspots. That way, they behave like links.

Once that’s all done, all that’s left is to send the LessAccounting guys a link and then to get on the phone and talk it out.

InVision made all of that remarkably simple and easy.

I don’t want to sound like I’m fawning or anything but just consider this: I was able to sign up super easy, for free, and got to use a fully functional product. I was able to upload my .png files and connect the hotspots intuitively. They made it easy to share a link to the files.

The Less Team saw it earlier tonight and we’re due to talk about it in the morning.

[highlight color=”eg. yellow, black”]In summary: It did everything I needed it to do, for easy and for free.[/highlight]

How Much Does It Cost?

Now, it’s true that the acid test will come when the 30 days are up.

They offer four plans:

Will I buy in?

As long as I have work that requires me to do wireframes, this seems like a great way to do it. I don’t know why they don’t offer 10 active projects at the Professional level, since their pricing sets you up for that, but whatevs. (Note to InVision: You could get 3 starter plans for $24/mo. and get access to 9 projects, a better deal than the professional plan. Why not make the pros feel good and give them 10 projects for $25?)

Is There Anything Not to Like?

Whenever somebody does a review, they feel obligated to come up with a list of the things they didn’t like about the product. I don’t feel this obligation.

I didn’t go and hunt for things I didn’t like. Instead, I have a few thoughts on how things work.

Three thoughts:

1 – I don’t think I need all of their features. The comment system, while potentially a great thing isn’t something I need. They have a cool system that lets people click anywhere on the comp and leave a note. This has obvious benefits when working in a group on a project. For my use though, I’d rather have the ability to ask questions – a la Usabilla or Loop11. That’s not a slight on InVision. The ability to leave comments is a nice tool to use in a group’s workflow.

2 – Their template system isn’t as obvious as it seems. At least not at first. As I understand it, you can take a comp and mark it up with hotspots. Then you can save that set of hotspots as a template. Then when you upload new files you can apply these template files. The idea here is to do your menu as a template and then when you upload new files, instead of drawing the boxes for the hotspots on each page, you can just apply the template and can be done with it.

I was in a bit of a weird place in that my design doesn’t have much of a traditional menu. It’s only got two items I need to link to at the moment, so using a template was too much for my needs. But if I were to do this regularly, I’d definitely use it.

3 – I found their system for building the hotspots and previewing the project to be pretty straightforward. Their control bar is located at the bottom of the page and for some reason, this wasn’t completely comfortable to me. I really think I’d rather have it at the top of the browser window. I know it sounds crazy to bring that up but I found myself hesitating enough thinking about what I needed to click that I noticed it.

Final Verdict

Should you try InVision? Yes. Absolutely. By all means. If you want your wireframes/comps to feel a lot like the finished product, and especially if you need to share those wireframes with others, take InVision for a spin. You literally can’t lose for 30 days. And after that, it only sets you back $8/mo.