When getting started with prototyping, you’ll face a large variety of tools. Therefore it is crucial to know which tool is the best for you. This blog post will provide you with tips on what you have to consider when picking the right tool for your project. But let’s start at a more generic level, or – as Simon Sinek taught us – let’s start with why?
Why do we prototype?
Nowadays most of us are familiar with the Lean Startup Theory by Eric Ries. His circular, iterative approach strongly influences today’s (digital) product development. Through his three concise steps – Build, Measure and Learn – we aim to incrementally develop, assess and refine our products: The definition of Prototyping per se.
Prototyping helps us to validate our ideas and concepts. It allows us to run experiments through which we can learn and evolve. Just talking with users about your concept will easily exceed their imagination. To get good feedback, you have to make things tangible. If you use it right, prototyping will, therefore, save you a lot of time and money, which you may have invested in the wrong features.
If you are not embarrassed by the first version of your product, you’ve launched too late. – Reid Hoffman –
A good rule of thumb for prototyping. Do not hesitate to test your early stage product and ask potential users for feedback. Go out and be embarrassed! It won’t feel as bad as you imagine.
What tool can I use?
The list of digital prototyping tools is impressively long. You’ll find a solid overview for example at prototypr.io. The question of what tool you should use is more complex. The answer depends on various factors. More on this later. The fact is: one tool for everyone and everything does not exist. Each tool out there is unique in its capabilities and constraints. Each is superior in certain areas compared to its competitors.
Consequently, depending on your project or the project phase, various tools might be beneficial for you. As Designers of today, you have to be flexible and adapt to these conditions. This often even includes working with different tools within one project. If you’re only able to work with what you are used to, you will soon reach your limits and be outpaced by others.
So, get out of your comfort zone! Challenge yourself and get going with multiple tools. Interoperability will be your advantage.
Even though the density of tools is significantly high, there are still large gaps when it comes to their ease of use. It definitely depends on yourself, if you prefer a techie/complex or a minimalistic/faster surface. Either way, you will find what you are looking for.
While a profound work process requires us Designers to use several tools throughout a project, most of the tools still lack on inter-compatibility. Instead of leveraging the benefits of each tool and combining those into our processes, we end up being forced into one system. To escape them, you need to leave behind what you already have achieved. These barriers to change create a significant loss of efficiency.
Looking into the future, it is not only about us as Designers becoming more flexible but also about the tools enabling us to profit from their individual benefits as a collective. Instead of fighting about being the tool for everyone, the tools we use should set their focus on what they are good at and let other tools do what they can’t themselves.
Back to the here and now, and finding the right tool for you. The core to this is knowing the answer to the following question:
What do I want to test?
As prototyping should be utilised to validate ideas and concepts, you have to know what exactly you want to verify. Align with your team what the goal of this experiment is before you start working on a prototype. Be precise and try to formulate a concrete hypothesis.
If you don’t know what you are testing for, it’s not worth prototyping it.
From my experience as a UX Designer, prototypes vary in the dimensions of their fidelity as well as their interactivity. Most commonly you will, therefore, test one of the following four aspects of your product: Architecture, Look & Feel, Friction or Experience.
The transition between these four areas (marked in grey) is fluent. Nevertheless creating a prototype which aims to test between the extremes will be inefficient. Focus on what this test is really about. Once you’re happy with the feedback, move on and prepare for another test – in another area.
Developing a product from scratch most likely starts with a very basic prototype to validate your product’s Architecture. Depending on the characteristics of your product and its scope of application, either testing the Look & Feel or Friction is the logical next step. More about the differences between these sections in the following chapter. Last but not least, you test the Experience of your product. As this needs a big investment, you should be certain about the other areas before developing such a prototype. For sure there are also exceptions, where a project might require totally different approaches. But in the end, exceptions prove the rule.
What should I use?
Let’s dig deeper into the four quadrants shown above and talk about their characteristics. Each tries to address different questions about your product, requires different tools for prototyping and leads to different benefits or constraints.
Case 1: Architecture
While starting the development of a new product, you will face questions which sound alike:
- Does the product cover areas of users’ interests?
- Are these areas structured in a ’for the users’ logical way and with a useful hierarchy?
- Can users get their job done or complete certain tasks?
As these are the basics of your product, you shouldn’t hesitate to prototype them at an early stage. Keep the fidelity and interactivity low to prove your ideas without a big investment. Tools like Balsamiq Mockup are a good choice for testing your architecture.
It allows you to visualise rough concepts in a fast and easy way. Simple interactions like clicking through pages or scrolling can be built without exporting any of your work. At the same time, you have to be aware that your prototype might seem very abstract for testers, as you can only control the visual appearance minimally. Make sure this is not distracting them from talking about the questions you’re focusing on.
Case 2: Look & Feel
Once you have roughly defined what your Architecture should look like, you will most probably run into such questions as:
- How do the users perceive your product?
- Is the visualisation of elements logical and usable for users?
- How can the architecture be refined? (see questions of Case 1: Architecture)
To figure out the answers, your prototype doesn’t have to be fully functional, nor does it need the ability to represent micro-interactions. Try to focus on the sizing and usability of crucial interaction elements like buttons, as well as the mood and image that is created through your colour palette, images and themes.
Tools like Adobe Xd and Sketch (in combination with Craft & Invision) allow a higher aesthetic control. The creation of simple interaction possibilities, such as clicking or scrolling, is straightforward. You end up with a more realistic experience for your testers. Consider that you need a consistent style guide upfront to build your prototype accordingly. Consequently, this leads to a higher effort for your design team. Showcasing a high-fidelity prototype often implies a greater functionality to your testers. Make sure they understand that this is only a prototype, which might not be fully functional.
Case 3: Friction
If your product relies on interactions and their clarity for the users, it is more important to test these than to think about the Look & Feel in the first place. You might find yourself thinking about:
- How easy is for users to use the product?
- How do users perceive interactions patterns used in the product?
- How can the architecture be refined? (See Case 1: Architecture)
With tools like Axure, HotGloo or JustinMind, you can create low-fidelity but highly interactive prototypes. You will be offered a broad variety of interaction patterns, which can be combined and interlinked even within a single screen if required. This helps you test several use cases at once as well as letting your testers behave in a more realistic way. Keep in mind, that these tools offer you low visual control, making it harder to adapt elements like checkboxes to your own styles. Setting up complex interaction patterns can be very time-consuming and, depending on the tool you use, sometimes even frustrating.
Case 4: Experience
A high fidelity and highly interactive prototype is the closest you will get to a real product. By testing such a prototype, you also validate all the previous cases. Be careful: if your product is still lacking on its architecture, creating a test for the overall experience will, for sure, fail. Make sure you tested the other areas before you go into prototyping for an experience test. Your open questions here should be similar to the following:
- How do users perceive the overall experience of interacting with the product?
- How do users perceive the look & feel of the product?
- Where are last friction points for our users?
Currently, the most suitable tool for testing an experience is the combination of Principle and Sketch. Alternatively, you should also consider using Proto.io or Framer.
Besides high-quality visual outcomes and aesthetic control, you’re able to mimic complex interactions. Different screen states, can easily be managed and combined to offer the most realistic experience for your testers. The set-up is therefore highly time-consuming and takes a lot of effort for your design team. Technical knowledge is often beneficial when creating complex transitions. The gap to coding your product (html, css, js) is rather small.
Summary
To sum up: The one and only prototyping tool does not exist. It is more about finding the right tool or even a combination of tools for your purposes. As every tool comes with certain benefits and constraints, you need to know which ones are most suitable for your needs. Therefore try to focus on the reason why you are testing and define what you really want to find out.
Consider that a prototype is a simplified version of your product. It doesn’t have to be fully functional nor high-fidelity. Don’t be afraid of showing it to potential users! In the end, prototyping has been, and will always be, a little exposure of yourself. Little by little you’ll feel more comfortable. Even more important, step by step you will evolve your prototype towards a user-centred and successful product.
FURTHER READING FROM THE GOFORE BLOG
Agile Transformation in Action – Part 1
Agile Transformation in Action – Part 2
What’s the point scaling Agile
