Website Prototype: How to Build It Easy

Developing a prototype is part of every software development today. But what are the benefits of having a prototype compared to creating a basic concept? And how do you manage the step from prototype to finished product?

In today’s article, you’ll find everything you need to know about developing a prototype for your website or app.

The Benefits of Developing a Prototype

A prototype can have many different forms and can range from barely developed to being very detailed.

Here’s Wikipedia’s definition:

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. It is a term used in a variety of contexts, including semantics, design, electronics, and software programming.

The advantage of prototypes is that they can be changed faster and modifications cost less time and money. That’s why the development of a prototype should take place at the beginning of the product development process.

A prototype can also be used to inform investors about a product or collecting first impressions from the users. It should solve a tangible, non-abstract problem.

Prototype + User Testing = Better Products?

Developing prototypes can help you to create a great product.

It’s a relatively cheap way of testing an idea and getting early feedback from users. If a prototype fails, it’s not nearly as bad as a finished product failing, because the investment was a lot smaller.

Besides that, prototypes allow you to completely overhaul them and create a new concept from the ground up. This would be rather difficult with a finished product.

Prototypes are a good opportunity to collect early feedback from users and react to it. Hopefully, it won’t be quite as bad as in the example below though 😉

High-Fidelity and Low-Fidelity Prototypes

When learning about prototypes and software development, you will frequently encounter the terms “high-fidelity” and “low-fidelity”.

A low-fidelity prototype, for example, could be a conceptualization using pen and paper or post-its. Often the low-fidelity prototype is also the point of origin for the high-fidelity prototype.

The high-fidelity prototype, on the other hand, presents the prospective product on a high-tech level. Here, designs are developed and the high-fidelity prototype is often fully functional. Naturally, this approach needs a much bigger investment of time and money. Of course, high- and low-fidelity prototypes are not to be viewed as two different entities but rather as two ends of a spectrum with a multitude of variations in between.

Assaf Cohen, fo-founder of card game platform Solitaire Bliss, suggests determining the fidelity of your prototype based on the stage of your idea. “When we started our solitaire gaming sites, we created simple mockups using PowerPoint. It took 20 minutes at most to create them. However, as we gained conviction in launching these sites, we spent more time creating high quality prototypes and getting much more detailed feedback on our vision which play a huge role in our early development”

What Should Your Prototype Look Like?

Before you start developing a prototype, you should answer the following questions:

• How far developed should my prototype be?
• What is my budget for the prototype and what resources do I want to invest?
• Who is taking part in the development?
• What will the workflow and the internal communication look like?
• How do I get the first feedback from users?
• Which tools do I have to develop the prototype?

The Right Tools

Especially when developing a high-fidelity prototype, you need the right tools for the project. Depending on whether you make an app or a browser application, the required tools might differ strongly. Which stage the development is in also influences the types of tools needed.

That’s why I can recommend this article to you where you will get a good overview of tools. You can see how the different tools fare regarding speed, high-fidelity, user testing and customer support.

User Feedback

User testing used to be the last step of software development. This resulted in the problem that user feedback could only be applied at the very end of the process and caused significant changes at times. Luckily, this has since changed and user feedback is now part of every design process.

When developing an application, it makes sense to collect feedback from the user already at the prototype stage. Everything you learn at this step saves you costly modifications down the road.

Conclusion

The advantages of developing a prototype are obvious: You can quickly present a model to interested parties and you save costs, resources and time. That’s why it makes sense to plan the development of a prototype in detail, from the required tools to the composition of the team and the necessary channels of communication.