Instead of Wireframing, Try Prototyping

Sketching

Wireframing is a technique of web application design. It consists in producing skeleton version of user interfaces. I have used wireframing for a long time. I wanted to explain why I've decided to switch to prototyping and why I think it's a better way to communicate with both your team and your customers.

Wireframing

That is a widely used technique to discuss with your team during the creation or evolution of a web application. I have used it a lot and have always wanted to use efficient tools to build my sketches. I've made an extensive use of Google Drive Drawing tool with a predesigned UI extension kit. The collaboration features of Google Drive makes it efficient to share your work and to use it for remote meetings.

Also, when interviewing customer for customer developement, there is a phase called solution interview. It's important that this phase starts before coding anything. You don't want to work on features if no customer wants it. You could use wireframes to show a given customer an example of what your solution would look like. Yet, he cannot interact with you solution. You have no idea if what you are proposing is the best user experience possible. Also, it may not represent your solution accurately since your customer can't interact with it.

Prototyping: an Answer for Efficient Customer Development

When I worked on the latest version of BunchCast, I wanted to use a more professional way to handle the front-end of the app. I studied frameworks like Twitter Bootstrap and Zurb Foundation to change the UI and use their responsiveness and productivity to build a modern UI quicker. One of the key benefits of the solution was the ability to create a prototype in a few hours.

When we decided to pivot and restart customer development interviews, I didn't want to use wireframing. When I had a solution in mind, I challenged myself to create a live prototype of the solution in one afternoon. I took me only 3 hours to create that live prototype using the Foundation framework by Zurb!

Now, we can show our customers a live application with real buttons they can click on, and many screens they can navigate to. The prototype looks like the finished product and the experience is similar. The benefits of that technique are greater. Moreover, when you start coding your product, you just have to duplicate the code from your prototype and start building from there. It reduces the time needed to create your front-end.

At the end of the day, prototyping with the framework you may use is a good idea because it's the first step of your Minimum Viable Product. You can produce a prototype in no time and what you created can be reused when building your application.

What about you? Do you prefer wireframing or prototyping? Do you have tools you would recommend? I'm curious to here about this. Don't hesitate to share by leaving a comment.