What is a prototype? Getting started with UX prototypes

Website prototype

In an effort to make a website or app functional and attractive, developers will often use prototyping as part of the construction process. But what is a prototype and what are the advantages of using one?

In the design process, one of the most important steps is to create a prototype, but when it comes to website development or app development, it is often the most confused and misunderstood process. 

App prototype

No wonder many developers and designers struggle with the concept. A prototype can be almost anything including a series of sketches to a prelaunch interface.

With such a wide scope, what variations are there and which do you need to take notice of?

What is a prototype?

The most common definition is a simulation or sampler version of a final product. Prototypes are a way of testing everything from design to finish, colour, mechanics and more. they are not just common to the web design industry but across all kinds of fields from car manufacturing to the packaging industry.

It is a fully working version of the final product, and in many cases, gives the company or users a chance to truly test a product and its capabilities. Without a prototype, many brands would be launching products cold, without any real understanding of whether a product is acting in the way that it should. 

In some ways, it is a safeguard. By sinking time and money into a prototype, a brand can save a lot of time and cash in the future, more so if a product were to fail.

Using this broad definition, it makes sense to think of using prototypes within web design, especially with the growing emphasis on user experience (UX).

In terms of UX, a prototype is the ideal means of testing usability issues before launch. Just as it will show what is working, it will also highlight what isn’t and what could be improved. In other words, it stops launching a supposedly user-friendly web design on guesswork.

What is a prototype in UX design?

Prototyping is essential in UX design because it gives the ability to dissolve all those niggling and annoying usability issues before launch.

There are several examples of when big name website launches didn’t perform as well as they should. Back in 2014, high street favourite M&S relaunched their eCommerce website. It resulted in 8.1% dip in sales and there were many issues identified as the cause, from critical performance issues to usability issues with filters. 

Whilst some of these were design failures, some were ‘background’ functionality issues and the majority of these mistakes could have been avoided if the website had been thoroughly tested beforehand. A prototype, with full functions etc., could have saved the embarrassment of what many considered to be fundamental UX design mistakes.

What different kinds of the prototype are there?

There are many different types of prototypes in UX design. Aside from avoiding mistakes, a prototype brings four main qualities:

Website prototype example

• Representation which is the actual medium or form of the prototype. It could be paper, for example.
• Precision refers to the detail and realism of the prototype. Many developers advocate testing early and often.
• Interactivity is the level of functionality open to the user.
• Evolution refers to the lifecycle of the prototype. For example, some are built quickly and when the project has moved on, are discarded. Others are built and improved on as the project in question goes through its lifecycle. 

The advantages of a prototyping approach to UX design

Creating a simplified model of the final product may sound like an expensive waste of time. Surely a detailed brief and a skilled team of designers and developers will be enough to get the project to its endpoint?

It isn’t always possible to use prototyping especially when time is short and there’s a strict launch date that’s moving ever closer, but there are many benefits to a prototyping approach to UX web design:

• Identify issues and problems early on in the process – this approach allows the logic and usability to be tested early on in the process, way before the fanfare of launch.
• Get the feedback to inform the project – learning from users is a sure-fire way of creating a usable and functional website that converts people into customers. Suggestions, ideas and feedback on every aspect of the design can be quickly acted upon. This test, test, test approach produces exceptional results (IF feedback is listened to and acted on).
• A trust building expertise – for many web design projects, the end product is the result of a successful collaboration between different teams and skillsets. This testing notion of developing a prototype can be the trust building exercise that leads to a successful collaboration.
• Stakeholder and/ or client satisfaction – web design isn’t the only industry that uses prototypes and they are common in projects where there is significant input from clients and/or stakeholders, especially finance. Your clients want to know that their project (and money) is in safe hands and by building a prototype, it gives your client the option of being to see and fully appreciate what the new website will look like, how it will work and so on.
• Streamline the design and functions – testing your design ideas and how well the user experience also allows for ideas and concepts to be modified but also to be streamlined. There are many websites that would have benefited from this process, such as eCommerce sites with 4 or 5 steps from checkout to payment. 
• It’s a bespoke testing facility – wireframes are all well and good, but they don’t test animation. 

A website prototype is a testing process that can amaze, just as it can bring many hard lessons about how well the proposed design is or isn’t working.

How can you make a prototype?

Prototypes can be made in several ways, including paper, digital, and HTML.

1. Make a paper prototype

It may seem the most basic – and in some ways, it is – but long before the advent of the internet, we have used paper as a medium for everything from communication to design. 

In the early stages of website design, using a paper prototype can help you develop the very early stages of design. Drawn a screen on the sheet of paper and mimic the interaction users would have with that page. Do they need to scroll, for example, to find the ‘add to basket’ or ‘checkout now’ button? Are there other design elements in their way? Carefully consider your calls to action.

Use different pages to represent different screens and you’ll soon discover some basic design lessons when it comes to function and usability. 

Paper prototypes are great for:

• Speed – drawn up in a few minutes, when you want to test something quickly, a paper prototype could be the answer. If the idea falls flat, you haven’t wasted time nor money.
• Cheap – a paper prototype is a very cheap tool to use. Most offices have some kind of paper hanging around or even cardboard. 
• Creative – a paper mockup of a website can be a fun and creative team building exercise! And in the process, the discussion between different departments and people can also be advantageous too, contributing to the project.
• Documented – a paper prototype can also last the lifecycle of the project and can be referred back too as it gathers pace. 

That said, a paper prototype is not so good…

• … at being realistic. They are, in effect, limited as to the true functionality and user experience of a website.
• … for testing what you had in mind. People might give feedback such as ‘boxes are not uniform’, masking the need for them to comment on the idea or concept in itself (i.e. does information need to be in boxes, uniform or not?)
• … for getting gut reactions. In essence, you are relying on people’s imagination and this ‘gut’ reaction when they initially see something might be lost with a paper prototype.

Paper prototypes are great for the early stages of design, giving weight to abstract concepts. 

2. Move on to a digital prototype

At some point in a project, you may feel that you need a more realistic prototype to really see and understanding ideas, usability and function. 

To this end, digital prototyping is the most common form because it is realistic. It allows users to test and interact with interface elements. This style is also much easier to produce than HTML prototypes.

App developers and software developers will often use digital prototypes to test specific areas of their project. For example, you can use PowerPoint to produce a digital prototype. 

In essence, a digital prototype is great for:

• Realistic interactions – unlike a paper version, this form of prototyping allows users to interact in a comparable environment, depending on how detailed your mock up is.
• Scalable – as the project grows, so too can your digital prototype. Essentially, as ideas expand, your digital mock up can too, with the design team adding more detail and functions etc. The ability to keep testing throughout the project is key to an excellent product at the end of the process.
• Speed – granted, a paper mock up can be achieved in minutes but a digital one is just as accessible when it comes to speed too. 

That said, not everything about a digital prototype makes it the ideal form for every project…

• … it’s a learning curve and for many projects, depending on which app or software you are using to create your digital prototype, learning how to use it can take time and input.
• … translating from this interface into code can be a bit hit and miss. Incompatible elements could be lost in transition meaning you’ll have to start again from scratch.

Great for developing an idea with a little more finesse and detail, different developers have their own favoured design tool. As with the paper format, its not necessarily which software you use but the mock-up it produces and how well the concept is understood. 

3. Confident with coding? Try HTML prototyping

Code is a language all of its own. When learning any new language, the way to embed it is to use it. If you are confident with code, developing an HTML prototype will appeal. 

They may have numerous benefits, but this style of prototype also comes with some cost. That said, this style if favoured because it brings:

•  A technical foundation for the final product – unless you are building a disposable mock up, this HTML version is the groundwork to the final product. Essentially, this saves time and money in the long run.
• Platform agnostic – this is a specific design attribute which means that it is free from any ties specific to a platform or system. In other words, the mock up can become the final product and is independent of the software being used to build the prototype.
• Low cost – no prototype in UX web design should costs hundreds but there are advantages to spending a little of your project budget on this type of mock up. If you are confident with coding, you can skip buying the software.

But this style of mock up is not perfect because it…

• … depends on the design skill level. In other words, the HTML prototype is only as good as the user’s ability to code it. Opting to use a prototyping software would be a better move.
• … means doing two things at once: designing and coding. And for some designers, this feels inhibitive. It can create a tunnel vision, where the end user is forgotten and UX falls by the wayside. Using a software program allows you more vision and a chance to explore different design options.

Will you build a prototype for your next project?

It is easy to assume that prototyping is only for the large, expensive projects where there are people to amaze and collaborations to develop. But building a test site or app, whether that’s on paper on via a digital format, and testing functionality and user experience before launch will make a huge difference, no matter how large or small the website or app.