You have an idea for a product. Excitement is going through the roof, you have all the ideas in your head, and you’re ready to start assembling the team.
What is a prototype after all?
A prototype is a mockup of the solution that you want to create. Metaphorically speaking - it’s your product’s facade. You can mock up every interaction and view so that it can be experienced the same way as a fully developed product without engaging a developer. You can show all the features that you want to include in your app (or any kind of solution in that case), validate your idea, and verify the overall UX strategy. A prototype’s purpose may vary depending on your needs and the stage of the project - it’s up to you how you want to use it.
The main advantages of creating a prototype are:
It will save you time and money.
You can show and test your concept on the target user group.
It’s a useful reference for your developers.
It can serve as documentation for your project.
You get a chance to work together with your team on a tangible artifact, which will lead to generating better ideas.
I guarantee that you will thank yourself that you invested a few more extra days to create a prototype. Does it sound like a good idea? Great, let’s consider the options then!
Different needs - different prototypes
When it comes to creating a prototype, you’re only limited by your imagination. In general, there are two sorts of prototypes - low fidelity (low fi) and high fidelity (hi fi) ones.
Low fidelity prototypes
These are very easy and cheap to produce. They should be created when you want to test out the general idea to know if your users understand the concept and functionalities of your product. You should not focus too much on the ‘looks’ of your prototype as the final outcome is simply not achievable.
Paper prototypes & sketches
It’s the quickest and obviously the cheapest method, but it can lead you to surprising results. You can use pen & paper to quickly visualise and even test your concept, but remember not to limit yourself to a sheet of A4 paper. You can also use post-it notes and stickers, and even make the prototype more ‘interactive’ by adding layers on paper. What’s interesting is that you can even mimic the interaction between the device and the user by adding post-its on the screen and change them while the person is clicking on certain elements. It’s a fun activity but, most importantly, you can learn a lot from showing your early ideas to other people.
Testing prototype made of a smartphone and post-it notes.
Designers often start with this method to see how the solution might work and how to organise the layout. Remember that on this stage you shouldn’t focus too much on the copy or images - a paper prototype is best at conveying the general message of your concept.
This form of prototype is a rough visual representation of your idea. It can be more complex than paper prototypes, although the main goal is to test out the flow and the general behaviour of the app. In low fi wireframes you don’t have to focus on details such as copy or ideal images - you can use patterns that are recognisable and understandable for your target users.
With a low fi wireframe, you can:
Test out a concept, flow or an interaction
Reuse it later on while creating the final UI
Example of testing an interaction with an action sheet on a low fi prototype.
High fidelity prototypes
Hi-fi prototypes are obviously more complex than low-fi ones. It’s definitely worth considering creating one, especially if you want to see your product “in real life” (sooner than it will be developed) and test out the interactions and the UI elements of your app. If a prototype is done right, your users and stakeholders won’t see a difference between your prototype and a real product, so bear in mind that testing it could be the ultimate answer if your product will serve its purpose. Also, the feedback collected on a hi-fi prototype will be more relevant, since people looking at it wouldn’t have to imagine much - everything will be right in front of their eyes.
Hi-fi prototype created to test out a particular interaction in the FitnessApp project - the UI for this feature will be developed later in the process.
You can create semi-interactive prototypes or fully interactive ones, depending on what you would like to test out and what type of behaviour it’s supposed to mimic. Some prototyping tools are easy to learn (such as InVision), but if you want to imitate e.g. typing real data into a form, you have to consider more advanced software, such as Axure or Framer X.
Example of a high fidelity prototype for Swap - depending on your needs, UI and specific functionalities can be tested out.
Fully functional page created with Principle by Toto Castiglione.
Remember that, when it comes to prototypes, you’re only limited by your imagination. Don’t be afraid of using different tools and mixing different media as long as it serves your purpose.
A very interesting solution was created by Toyota and the Copenhagen Institute of Interaction Design. To show one of the functionalities of a futuristic car, they created a video that is a simulation of the interaction between a user and the car’s window. In the video you can see how the young girl is drawing, zooming in the image, and learning a language.
By combining two very basic and accessible tools - video capture and video editing - Toyota and CIID created a prototype simulation that is much more powerful than a set of images or a sentence starting with “Imagine that…”.
You’re thinking of creating a physical product? Before thinking about mass production, you should dedicate some time to testing it out on real users. As you see in the example below, your prototype doesn’t even have to include the original materials, but the insights gathered from your users may lead you to some unexpected results. Be sure to try it out!
Selecting appropriate tool
Which tools are the best to create such a prototype? When it comes to paper prototyping the solution is obvious, but sooner or later you will have to think about the appropriate software. There are plenty of tools, but before choosing one be sure to recognise the goal of your prototype.
Ask yourself a few questions - do you want to:
Explain your concept to others?
Test your idea on real users?
Check whether an interaction would work well in a particular use case?
See whether the created UI will be suitable for your users?
Create a fully interactive and clickable prototype so you can simulate your product in a real life situation?
The general rule will be - for more advanced prototypes you have to use more advanced software to imitate a real life product.
More advanced tools
Pen & paper
Printed out templates
Freehand by InVisionApp
There is so much to choose from! Be sure to read our comparison of fast prototyping tools here, as well as this helpful comparison table from cooper.com which takes into account various software features such as sharing options, user testing or mobile & touch.
Don’t waste more time!
Ready to create your interactive prototype? Be sure to check out this extensive guide for improving UX of your product and how not to design an interface for your mobile app. As soon as you’ll be ready to show your prototype to broader audience, do not miss our tips on how to prepare and conduct user testing!
Still not convinced if you should really do it? Tom Kelley, best-selling author of Creative Confidence, The Art of Innovation and The Ten Faces of Innovation as well as a partner at the renowned design and innovation consultancy IDEO, once said:
“Fail often so you can succeed sooner”
There’s nothing more true than that - creating a prototype will expose your failures and lead you to a much brighter future and success.
More posts by this author