July 8, 2010

Wireframing is probably my favorite thing to do when I have an idea. There is no faster way to get a bunch of ideas on paper and test them out. All you need is a Sharpie, or these days even an iPad.

The customer service app idea has been simmering off and on for over a year, so I've done tons of wireframes. For us, it's the first step in the process with almost any project or idea. Even before we decide to build anything for sure, we build the basics on paper. If the wireframes lead us to believe we can do something that hasn't been done before, that we can have fun building it and that we could make money, then typically it's a go. I doubt wireframes are enough for most people to call it a "proof of concept", but it's enough for us.

For this project it took 3 really solid iterations of wireframes before I felt like we were ready to open Photoshop. Today I'm going to share version 1.

Wireframing Advice

Do your first version of wireframes, maybe get some feedback, then forget about them. Next time you feel inspired, start with a clean slate and do the wireframes again. What changed? What can you afford to remove? What can be put off until later?

Rinse and repeat, each time trying to strip down the features and layout even further, leaving only the absolute essentials. Two important elements to consider are time and feedback. Let time pass between each iteration so you come back with a fresh perspective and maybe a different take on things. Feedback is also important for obvious reasons. Put your wireframes in front of some people and walk them through the basics. Ask them what could be improved. What seems confusing?

As you can see below, we always start on paper with a Sharpie. The images below are two of many variations I was playing with. From there I move into OmniGraffle. It's easier to get more detailed and move things around there.

Tickets View v1

Individual Ticket View v1

Login Dashboard v2

Tickets View v2

Tickets View v2.5

Individual Ticket View v2

Ticket Reply v2

A lot of ideas came to fruition with these wireframes, but it's still far too busy and heavy. With version 2 we're going to start with a clean slate and see how it turns out!

This post is part of our B Combinator series. We're building a new web app with our own time and money, blogging about every detail from concept to launch along the way. Read our first post in the series to learn more about the project, or visit the B Combinator category page to see all of the articles up to this point.

Join the Discussion