What’s the best way to go about designing and prototyping a web-based product?

QUESTION:

What’s the best way to go about designing and prototyping a web-based product?

ANSWER:

Naomi Kokubo

by Naomi Kokubo, Cofounder of Founders Space

Let me start by saying it’s almost impossible to get funding on a prototype today.  In the heady days of the dot com bubble and again in 2006 and 2007, it was possible to walk into a VC firm and line up millions on a PowerPoint and a demo.  But, alas, today you’ll probably need to have real traction in order to make this happen.

That said, building a prototype is still essential.  First, it helps you clarify your vision and communicate it to your teammates, employees and potential partners.   Our strategy has always been to visualize the product as completely as possible, leaving nothing to the imagination.  We design every screen of the project first using flow charting software, like Visio or OmniGraffle.  If you haven’t used Visio or OmniGraffle, they are not hard to learn, and they make a world of difference in prototyping a web-based product.

Of course, you can substitute flow charting software for practically any graphics package.  The only advantage of flow charting software is that it saves you time because it has a lot of useful symbols and graphics built in.

1. Wireframe your project with flow charting software (or a graphics package).  Wireframes are designs of your project with no graphics — just black and white lines plus text.  Imagine it as an outline of your user interface.  The entire user interface can be done in simple wireframes.
2. Test the wireframes on your target users.  Get their feedback and incorporate it into the designs.  Once users seem to really understand your UI, move to the next step.
3. Now add graphics so that it comes alive.  You can continue to use flow charting software or any graphics package, like Illustrator, Photoshop, Flash, etc.   I tend to like to add graphics directly to my flow charting software, but you can do whatever works best for you.  Also, it’s good to add color and other visual cues.
4. Test the visual UI on your target users.  Get their feedback and incorporate it into the designs.  Once users seem to really understand your product, move to the next step.
5. Now get a basic version of your site live with whatever open source package matches best with your feature set.  I’m a huge fan of open source packages like WordPress, Joomla, and Ruby on Rails.  I also like packages like Flash/Flex, Groovy on Grails, or JavaScript.  If you can use one of these to get your site up and running, then you can actually start having people use your site and tell you if it works or not.
6. Don’t try to add every feature.  Just put in the core mechanics.  Remember, this is a prototype.  You don’t need everything.  In fact, less is more.  What you want to do is to test your premise, and if it doesn’t work, you’ll need to iterate and change your designs, so adding all the extra features only gets in the way.
7. Once again, test the prototype on your target users.  Get their feedback and incorporate it into the prototype.  Now you’re up and running!  Don’t add features until you get the core mechanics working perfectly.

To sum it up, the key to designing & prototying is user feedback.  Make as simple a design as possible, and get feedback early and often throughout the entire process.  I hope this helps!