If you are interested in the information technology world, you definitely wouldn’t have missed the movie The Social Network the story of the biggest social phenomenon of the century - Facebook.
You followed how a shapeless idea rapidly grew into a successful business despite all the obstacles. If you were inspired by the example of a young Mark Zuckerberg, and you are just about to turn your idea into reality - slow down. Being in a hurry hurry won’t guarantee your success, but smart planning will.
The first step to realizing a business idea should be a website or mobile app prototype, which is critical to prove the concept.
According to Wikipedia, “A prototype is an early sample, model, or release of a product built to test a concept or process, or to act as a thing to be replicated or learned from.”
We can apply this definition to the information technology sphere as well. Compared to the minimum viable product (MVP), which is a minimum usable version of the product and includes the core functionality, the prototype doesn’t perform anything. It is just an image of your future app.
But the importance of a prototype is much greater than you can imagine.
"If a picture is worth 1000 words,
A website or app prototype is a powerful tool for developing a successful product. It can save you hundreds of development hours and thousands of dollars.
The website or app prototype is a critical stage in developing a product. But, unfortunately, many entrepreneurs skip this and move straight to the development stage. As a result, mistakes in design and weaknesses of the product are discovered only after the release. As a result, too much time and money is spent solving problems that could have been prevented by proper prototyping.
You may think that a prototype requires hiring a professional, but actually, you can do all the work yourself in a few hours. All you need is a pencil and a notepad, a laptop, and this step-by-step guide.
So, it’s time to start!
The very first step is to sketch your idea on a sheet of paper. If you consider yourself to be a bad artist - don’t let that stop you. A paper prototype isn’t about art, it’s about presenting the idea in a simplified way.
Take a sketchbook and a pen and try to put your idea on paper. To make it more visual, you can use a sketchbooks with phones templates on every page, or download and print such templates. This allows you to get a clear view of how the app will look on the device screen.
It is important to sketch all the screens of the app to get a clear structure. If your product includes many screens - present them on a single page, and add the connections.
A pen-and-paper sketch is just a draft for an interactive prototype. So, at this stage, you should pay more attention to key items and their placement and not to the detailed design. The UI of the future app or website is born right now.
Besides the pictures, you can sketch additional information that will be helpful for the project. Describe your buyer personas - the potential clients who will pay to use your product. Describe the possible user journey through the application, their steps and their impressions. And remember, you aren’t writing a novel, so don’t aim for perfection in your writing. A paper prototype is just a raw visualization of your thoughts.
Why are paper prototypes good?
Firstly, you can make them anytime, anywhere. Traveling on a train, walking the dog, watching the morning show - an idea can hit you unexpectedly. If you have a notepad and a pen, you are fully equipped for your first prototype. If not, check for other available material. Maybe you can grab several napkins from the nearest KFC.
Secondly, you don’t need any background in programming or design to know how to make a paper prototype. An understanding of your future product is enough.
Thirdly, prototypes cost you almost nothing. You don’t need expensive devices and prototyping tools to sketch the first model of your app. You won’t have to pay anyone for making the prototype for you. Yes, it will take you some time, but believe me, you would spend much more time explaining what you actually to a developer.
With a bit of creativity, your paper prototype can become interactive.
After the first paper prototype is ready, you can start showing it to other people. The visual presentation of your idea might be quite helpful for finding like-minded people, who will potentially join your team.
After the structure of the app is more or less clear, it’s time to create a digital wireframe, which is a blueprint that represents the skeleton of the future app.
The term digital wireframe speaks for itself - it is created with the help of digital prototyping tools.
If you really like your paper prototype and think it includes all the necessary UI elements - you can save time with POP (the abbreviation for Prototyping on Paper) by Marvel. It will help you transform a pen-and-paper prototype into a digital one. You just take photos of your sketches, and the tool will upload them as screens of your future app. It’s even possible to add different types of interactions.
There are also dozens of apps for professional prototyping as well. But don’t let the word “professional” scare you. They are all easy to learn, and most of them have trials or free plans.
One of our favorites is InVision - a prototyping tool for creating digital wireframes and interactive prototypes. Using a rich library of ready UI elements you can build the layout of literally any type of app or website.
InVision is the right tool if you are wondering how to make a prototype interactive. This means that you can add different transitions like swipe, tap, dissolve, etc. The interactive digital prototype looks like the ready application.
InVision also enables project sharing via email, SMS, and URLs. Authorized users can also leave comments. Such applications are great when working with a remote team since you are not limited to one location.
The advantage of the digital wireframe is the ability to share it with anyone in any corner of the planet, which is impossible to do with the paper prototype. Digital prototyping tools enable you to share prototypes with whoever you want. InVision, for example, makes it possible to leave comments and discuss the website prototype online. So how to make a prototype work for you?
Share with friends. Ask for their opinion. Ideas from another perspective might be unexpected but quite valuable.
Share with the designer. Having a skeleton of the product you can then involve a professional to create an attractive and friendly UI/UX design.
Share with potential users. Contact your potential clients to get their feedback concerning the product and its logic. No one can understand the product better than people who are meant to use it.
Share with investors. If you want to raise money, you have to show your potential investors something convincing, an interactive prototype, for example. The wireframe is a detailed and visual presentation of the idea, proving that you are serious about implementing it. Of course, you won’t get millions of dollars straight away, but you may attract seed capital that will help you develop your product and start moving it forward.
Share with developers. An app prototype is essential when placing your future product in the hands of the development team. It is a clear roadmap for them to know how the app should look, what functionality it should include, and how it should solve the users’ problems. With a prototype, you can ask for an accurate estimation of the development time and costs.
By using HTML and CSS you can create a digital prototype, however, you’ll have to involve another professional, unless you can code yourself. HTML and CSS are the most widely-used technologies, and it won’t be an issue to find a developer who can create an interactive prototype for you.
The HTML prototype has one huge advantage - the code behind it is reusable. This means that you can use the same code (with slight improvements) to build the MVP (minimum viable product).
It is also important to mention that HTML prototyping is optional. It depends on how your business is currently going. If you have enough money to start the MVP development - do this. If you were able to test the idea with potential users and know exactly what features you should build for them - do this. If you have already gathered the team to run the business - do this. In all the other cases, move on to HTML prototyping.
An HTML prototype has the highest fidelity grade. Since it is built with the same technologies as the end product, it shows exactly how the final product will look. Moreover, it allows testing whether or not the idea can be implemented with existing technologies.
The website or app prototype is a safe and reliable tool to test an idea. It enables you to present the model of your future product to the potential users, receive their feedback and to improve it. The biggest advantage of prototyping is that you risk very little, but receive a lot of value: you test your idea, receive feedback and improve it, until it exactly matches the needs of the target market.
Visualizing the idea in a prototype is the very beginning of product development, which is usually followed by creating the MVP. Compared to the prototype, the MVP isn’t a model, but a real working product with minimal but useful functionality.
The prototype is the first and highly-important step towards a successful product that people use, love and are willing to pay for.
Liked this article? Sign up to be notified of new blog posts.