From paper prototype to UI - the resource friendly way

The notion "lean startup" has become a buzz word by now. Yet, embracing change and being able to react quickly is for sure one of the most important characteristics of a startup. You start your day with several hypotheses regarding your target audience and their pains, needs, and expectations, and in the evening, you'll already need to sort out quite a lot of them. In the following, I will briefly give you an impression on why changes happen so often in the startup area, and show you a quick example of how to consistently handle a change of the UI with a lightweight tool.

Why does change happen?

Especially in the kind of greenfield projects startups typically operate in, little is known about what the prospective user is going to think about the product you're building. And even though there are methods like questionnaires, focus groups, and the likes, it is very difficult to foresee the necessities of all the different kinds of users - especially in the current software market. Obviously, you should know your audience well, but it so happens that you will sketch your target group too fuzzy, and you will need to rely on feedback to know what is really going to work. Naturally, I am not talking about revolutionary changes to your idea, but more about small improvements of its realization and refinements of your target audience.
There will usually also be numerous other triggers for change, including time to market, opinions of external stakeholders (e.g. business angels or VCs), competitors' products, resource shortage, better ideas, and so on and so forth...

How to handle a change to the UI of my product?

We first sketch changes to our UIs on paper - no stencils, no rulers, no color, just plain pencil and paper. This allows us to quickly show one or several new designs to the whole team and selected beta users. It literally takes only minutes to come up with something understandable, while the lack of sophisticated graphics and color helps to concentrate on the most important: the content. On Figure 1 below, you see a sketch of one of our views, proudly hand-drawn by myself.

Figure 1. Paper sketch of a new view.

We wanted to create a view that resembles the typical badge that you get on an event. It should only contain your picture, your name, your company and links to your social networks.

The next step we perform is to enrich the sketches to form a preliminary prototype. To this end, we use a tool called POP (Prototyping on paper), which allows us to visualize changes to several UIs and transitions between them in a cheap, quick, and yet very vivid way. POP is just awesome, it is really easy to use, has practically no learning curve, and no unnecessary features that distract from the main use case. We can really only recommend it. Above all, it's free.
With POP we can create a shallow prototype of an application in mere minutes. Of course, there is no functionality whatsoever - but we can investigate interactions and concentrate on a consistent interface. This allows us to find errors and wrong assumptions even before spending hours to develop the real UI.

The last step of course, is to take the sketch from the drawing board to the interface builder. This is typically the most time intensive part of the game. Not always will the pencil design work on the real screen. Sometimes the metaphor needs more work, sometimes it just doesn't seem right. In any case you should consider taking the design one step back and trying out other realizations before spending days with the interface builder - the right level of abstraction for the right task. In our case, we went back and forth for some 2-3 iterations. Figure 2 below shows the result we are working with in our current dev version.

Figure 2. Current dev version of the new view.

When to use what?

In the end, a startup is a project with few resources, so choose your weapon wisely. Drawing on paper is the fastest way to go. POP will allow you to try interactions and observe people using your app before writing a single line of code. Starting to build the real UI only with a clear picture in mind, will help you to survive longer.

Dennis Pagano
CTO of MoID

Follow me on Twitter