How to Design an Irresistible Prototype for a Website

A prototype seems like such a small step in the overall grand scheme of the website development world. In reality, it may very well be the most important step in your journey. The reason for this is multifold:

• It establishes the feasibility of early design templates;

• It shows potential investors that you are serious;

• It leads to a better final product; and

• Marketing is easier when you have an early product.

Now, we’re going to cover each of the above points in some detail, but first, let’s go over some definitions.

Protoyping, Wireframining, and Storyboarding.

These 3 words get thrown out a lot in in the app and web development world and you will see them mentioned 800 times any time someone talks about web and app design. The reason for this is that they are important design steps that many entrepreneurs miss.

While the 3 terms are frequently used interchangeably, they are, in fact, slightly different.

1. Storyboards: Storyboarding is the process of sketching out the individual elements and screens that your website (or app!) will go through. This helps determine what each individual element will (roughly) look like and to see if the overall layout is logical. This step is done entirely on paper or posters and there no actual programming or coding.

2. Wireframes: This is very similar to a storyboard, but generally refers to a sketch of a single screen, as opposed to storyboarding, which is multiple screenshots laid out. Also sketched out with no real programming done.

3. Prototypes: You will often hear storyboard and wireframing referred to as part of the prototyping process. While this is strictly true, it can be confusing because it can also refer to a rough version of your actual site. This is the first step in design where you have an MVP that is actually coded and not a sketch.

So now that we have the basic definitions squared away, why don’t we return to the how and why you should build a prototype website.

1. Feasibility and Layout

A storyboard is a fantastic way of creating a physical representation of your desired layout, but sometimes things do not translate well from paper to website. A prototype is the best way to see if everything you have sketched out works as well digitally as it did in the physical world.

A proper prototype needs to have at least the basic functioning of your website working. The entire point of this is to see if your layout and features will work from a coding standpoint. Make sure your design team is really putting some effort into this. It doesn’t need to function flawlessly (it actually shouldn’t – that comes later). This is how amazing sites like Apple’s gets created – don’t skimp!

2. Investors

We’ve all seen Field of Dreams – if you build it, they will come. Look, investors only care to some extent about your idea. Sure, they want to know it works and that it has potential. But no VC or Angel investor will get behind a project when they don’t know if the CEO can cut it.

Building a working prototype demonstrates that your idea does work. More importantly, it also demonstrates that you, as CEO, have what it takes to make it. A prototype is a vital part of any pitch you make to an investor, as important as your growth projections and executive summary!

3. Feedback

User feedback is an essential part of development in the tech world. Before the internet, feedback took months: you had to set up a way to collect data, then you had to figure out how to incorporate said information into your product, and then you had to complete reproduce your product – and the people who originally talked to you about your product wouldn’t receive the new version very easily.

In the digital era, this all takes place very quickly and much more simply. Information is collected from users, from actual comments and ratings. This can be instantly applied to your product – and rolled out to all clients, not just new ones.

It’s important that you do this as a prototype because it will help you create a better end product. So your prototype should be robust enough to handle a limited test group; make sure you have spent some time working on the features and the layout so your beta users can really get a feel for the app. Remember, it’s pretty easy to quickly build a limited product; it doesn’t have to be perfect, just functional.

4. Marketing

Releasing a prototype of your website can to a beta population can help build your brand – before you’ve even released your final product. Digital marketing relies heavily on word of mouth, so creating a buzz is a great way to sell your product without costing you an arm and a leg.

This does mean you need to create a prototype that is relatively functional – after all you want to create a positive buzz, not get people talking about how much they don’t like you! Focus on your top features, the ones that are the most important to your core business and to your target market. Less important functions can be part of you’re scaling up strategy.

It’s time to design an irresistible prototype for your website. Call Silicon Valley’s top web development company at 408.805.0495 today & speak to our Business Head, Rob LaPointe. Get in touch with the experts at SDI for a no-obligation free quote.