Attention: This is a super important step.
After you have defined the scope, fidelity, tools, and logistics (see Step 1 – Define), it’s time to start prototyping your product. This step may have a lot of variations depending on the details. In this post, I will provide a high-level overview of what to do for each phase of your product, and then, will dive deeper in each of the phases in future posts. I decided to draw analogy with a child to illustrate how the prototype grows =)
Phase 1: “Baby”
Initial phases of your product, ideation, conceptual work, brainstorming, etc.
Sketch your concept on a piece of paper. It could be anything from napkins in a coffee shop, or printed templates for a specific screen size. I try to always carry my notebook to sketch ideas, and I’ve tried all possible grid types. The best one that works for me is dotted grid, not as cluttered as squared grid, and not as messy as blank paper. A grid would help to keep the lines straight, especially if your sketch is more complex, but any piece of paper will work. That’s the beauty of paper prototyping – it’s the cheapest and fastest way to communicate ideas and validate high-level assumptions. I always start with paper.
Phase 2: “Toddler”
Figuring out new screen layout or user flow minimizes paper format constraints when testing with users (interactions are more real than with paper)
There are a lot of options that can help you create medium-fidelity prototypes fast. My favourite is Balsamiq, I will be reviewing all tools in future posts.
Working with a digital tool requires some basic skills, but anyone can figure it out within an hour. For example, Balsamiq has a built-in library of UI elements and it’s very easy and intuitive. By this time, you have likely created (and, I hope, tested) paper prototype and have a good idea of what needs to go into the digital version. Just analyze the testing results from the previous round and consider these insights when you start converting your paper prototype into digital format.
Phase 3: “Teen”
As you prototype matures, and you keep testing and iterating it, you will realize that you have the user flow and screens layout is performing quite well with your test participants. It means it’s time to increase your fidelity and switch gears. Time to test UI for more details e.g. colours, sizing, interactions, animations, etc. Usually, at this stage, the visual fidelity will be very close to the soon-to-be-released production UI.
Even more tools in this category and new ones appear on a regular basis. Some of them allow creating high-fidelity visual designs, and other also includes functionality to create clickable interactive prototypes, which can make your prototype look and function exactly like a real working app or website would. Some of the tools a very impressive, and I will be reviewing and comparing them in future posts.
This process requires the most effort, as it involves creating high-fidelity mockups and sometimes even code, depending on the chosen tool and results of your Definition step. Even though creating a high-fidelity prototype will take noticeably more time than low- and medium-fidelity, the results of testing it will likely produce more valid insights. Some people will be distracted by the low fidelity of your earlier prototypes, and their feedback may be affected by the fact that what they see is so far off from what they expect to see as the end product. Also, if you need to show your prototype to investors, they will be expecting at least a high-fidelity clickable prototype (and sometimes even a working version which requires coding).