As a product is being developed, it’s critical to get feedback on the various features as quickly as possible. Be it a physical or digital product, like a website or mobile application, the faster a product team can test their designs the better. In my last post in this series on testing a product’s user experience, I discussed the use of generating ideas and testing them using basic sketching and paper prototyping techniques. In this post, we’re looking at taking these concepts to a digital space.

Going Digital

After exploring and testing your ideas via your sketches, it’s time to increase the fidelity of sketches by making them digital. By going digital, better precision can be applied to the proportions of the various elements within the design, as well as the ability to add interactions that were not existent or very limited at the paper level. By transposing your sketches to a digital tool, you also have a better medium for sharing and updating your ideas.

Starting Simple with Wireframes

Balsamiq WireframeBalsamiq

When you begin to transpose your sketches to a digital form, I find it works best to keep things simple. For me, this means using a tool to create simple wireframes, such as Balsamiq, InDesign, or OmniGraffle. Wireframes are meant to be simple, digital sketches that allow us to get our ideas and intent across. This technique is perfect for our process because they are very quick to create and allow us to adjust the elements as needed at this stage. When showed to users and stakeholders, the drawings generated by these applications are straightforward and do not require us to get into a tangent of colors or imagery. Keeping things simple with wireframes allow us to streamline the conversations.

Applying the Concept at a Higher Fidelity

Animations within KeynoteKeynotopia

Wireframing is great due to its simplicity; however, as we continue to refine our designs, we’ll want to introduce the user to more details of the product. Brand elements such as fonts, color, and images should be introduced at this stage, as well as more representational copy. As we add these items, we may find ourselves moving to different tools as well. Graphics applications like Photoshop or Sketch are commonly used by designers at this stage. However, it is not the only one. Other tools, like Keynotopia, provide templates that augment other applications like Keynote or PowerPoint to be used as a prototyping and design tool. Using these alternative tools has the added benefit of applying more direct interactions within the prototype that is generated. Animations, page transitions, and more are available in such tools that allow us to test a smoother experience than simply flipping between static images.


By making the jump to digital tools after sketching out our ideas on paper, a wider array of possibilities become available to use with regards to distribution and general interactivity. The ability to easily link between images allows us to obtain a greater sense of how a user will respond to the feature. This also allows us to change things at a more detailed level. In the next article on this series, we’ll look at different strategies on how to get these prototypes in front of a wider assortment of users, and how the data collected from such can be used to identify themes in your designs.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>