Design Sketching: The Easiest Prototype Method Ever

When it comes to Web and software design, the pen(cil) is often mightier than the Design Suite. What I mean is: Tech is cool, but don’t fall under its spell. It’s often when you remove the technological layers between you and your thoughts that the best ideas sprout.

You’ve heard of great ideas that started on bar napkins, right? One way that low-tech beats high-tech is when it comes to conceptualizing early-stage design ideas. Smart designers create a “low-fidelity” prototype of your product—a rough approximation of what it’s going to look like so people can actually interact with it. This is not a foreign concept to federal agencies, the Department of Labor used paper prototypes for their DOL Timesheet app.

We talked about creating paper prototypes in an earlier article—how you can use scissors and pens to create no-cost user tests with an interactive product. That last part is important—interactive. Below is a wireframe for a kids site. When you look at it, you get an general idea of what content goes where. But you can’t USE it. You can’t see if it meets your needs. You can’t tell if it’s any good or not. You just kind of look at it and think, “Hmmm. OK.”

Creating wireframes in a design program takes time and expertise. Maybe you know how to use wireframing programs, and maybe you don’t. But can you create this below?

This is a sample design I made for an idea for federal mobile app. It took exactly five seconds to create. When I was done I took a picture of it with my phone. Like the wireframe above, its also giving people some information about a product in process. But on it’s own it is still limited. But what if you sketch a second screen, say one that you would show to your test volunteer if they “clicked” the federal “button.”

All of a sudden, you’ve gone from a piece of paper to an experience you can lead someone through. Now, by creating multiple sheets for your customer to move through, you can conduct a quick but valuable usability test. Your customer (and you) start to understand the product better. They can see the layers and understand where they “are” in the whole thing. That’s very powerful. Once you know where you are, you know where you can do. Options start to come to mind. And people can form opinions about this new experience that they are having.

The Federal User Experience Program and the MobileGov Community of Practice recently held a Mobile Prototyping workshop where we taught people to list as many ideas as they could for a mobile app, and then start sketching some design ideas with markers. They started off rough, and quickly progressed into a series of images they gave to users to try. Very quickly, the design strengths and weaknesses revealed themselves.

Sketches are not intended as a finished work, and people can easily recognize a “work in progress.” Therefore, your test participants can easily analyze and critique the core functionality and not get distracted by unimportant design details.

Sketching is faster and more efficient than using a computer. Really! Technology is powerful, but often exclusive. Not everyone can use InDesign, but, as the saying goes, if you can draw a square and a circle, you can sketch.

Your ability to create fast design ideas means you can create LOTS and move away from the bad ideas early. Each generation of designs will get better and stronger as they are tested in reality, and improved via conversations with your colleagues.

So get out your 16th-century writing implements and start using them to create fantastic 21st century experiences. Those seemingly lame doodles can result in some very beautiful results.