Prototyping is a powerful way to test your ideas. It allows your users to interact with an early stage idea and gives everyone in your team more confidence when designing new product features. Prototyping, therefore, allows you to clarify hypotheses at an early stage. Low-resolution prototyping is a crucial first step when it comes to testing new ideas. The goal of low-resolution prototyping is to convey the main concept of a user flow and how value is generated. These kinds of prototypes don’t need to look shiny just yet.
In our designathon workshop format, we often ask people like product owners or salespeople to get their hands dirty and build a prototype. Especially when coming from rather “abstract” ideas, this step can feel overwhelming at first. In that case, the solution is to get the creativity going by using pen and paper when transitioning from abstract ideas to designing wireframe sketches. But how to get them into the digital realm to make the prototype testable with your target users?
In his book “Design Sprint”, Jake Knapp recommends Keynote (or Powerpoint) as powerful prototyping tools. They both certainly are, but have several limitations like the fixed slide length for instance. A more versatile tool that is frequently used by our designers is Figma. With its collaboration features, it is probably one of the best design tools out there when it comes to creating prototypes or pixel-perfect designs. However, looking at both options (Keynote and Figma) I wonder if there is a more appropriate and faster way to create low-resolution prototypes for non-designers? I believe there is!
In the prototyping process, we differentiate between the visualization of the wireframes and linking them afterward. Let’s first look at the visualization of the wireframes.
When transitioning from the idea stage to the prototype stage, the easiest way is to start with sketched wireframes on either paper or a tablet (using the app Concepts for instance). These early sketches can be done really quickly and help to make the idea concrete. They answer the “how”; how a certain feature should work and how they help users complete their tasks. Sketched wireframes provide an ideal base to easily transform them into digital experiences as a first draft of the user flow, the content and the interaction elements.
When transferring them to the digital space we use Whimsical, a tool that is super fast and super intuitive - even for non designers. The great advantage here is that new users are on-boarded really quickly and designing interfaces feels like a breeze. Users can start with an unlimited canvas waiting to be filled with content. Additionally, many of the interaction-components are readily available (buttons, input fields, tabs, etc.) to start immediately. No need to think about searching for wireframe kits, importing, styling, coloring etc.
Start by opening a blank wireframe space. Once opened you can start by dragging and dropping in your wireframe sketches for reference. After that just go over to the sidebar and choose your frame, depending on your project (web, mobile or tablet). If your project happens to be mobile, place a mobile frame in the open space. Then use a rectangle and adjust the size of the inner mobile frame. Duplicate this rectangle frame and use it for all your upcoming screens. (The mobile frame is already available in the actual prototyping tool used afterwards so there is no need to continue working with them in Whimsical).
What makes working with Whimsical even faster are keyboard shortcuts. The most important ones for low-res prototyping are "T" for text and "B" for button, “R” for rectangle and “D” for divider. By just hitting either one of those the component is instantly on your mouse pointer ready to be placed. Additionally leading lines help to place components accurately. By “snapping” the component in the right place you can feel confident that the positioning is aligned very well.
The only downside of Whimsical is that it doesn’t have a “presentation” feature so that screens can be transformed into interactive clickable ones to mimic actual “product” behavior. That’s why they have to be exported and imported to another tool. This is the second step in the prototyping process which is linking the wireframes.
One of the easiest ways to link the screens is using Marvel. Just export your screens in Whimsical by selecting them all, clicking on the paper plane on the top right (size 2x) and upload them in Marvel so they are ready to be linked. Open each screen and link them together placing hotspots on the interaction elements like buttons, etc. Check once in a while the presentation mode and see how the prototype performs in action. Once ready you can commence user testing by sending out the URL to your prototype. Alternatively “linking the screens” can be done with our own in-house tool which is called Prott.
Prototyping should be a fun process - even when creating them digitally. I believe creating them using Whimsical is a lot of fun because the progress feels super quick and the result looks just good enough to be tested with your target users. Even with the drawback of exporting and importing the screens in another tool I believe this is a more effective way rather than searching for wireframe kits, importing and using them by scrolling back and forth dragging and dropping.
Let me know your thoughts on this process? Do you prefer to use different tools for low-resolution prototyping?
Marco has a passion for health tech, sustainability and everything related to boardsports. When he is not surfing Dutch waves, he works as a design strategist at Goodpatch, where we use design to empower people and organizations. Want to get in touch? Check out our Goodpatch Product Hour to talk about the projects that inspire you.
Tips & Tricks