“Prototyping” – you’ve heard it being thrown around in pitches and meetings and is rapidly becoming one of the most fashionable words in the design industry.  Prior to this increasingly popular concept, prototyping was initially seen as added effort, with little-to-no gain. But as technology advances, and browsing experiences change as often as the UK Prime Minister, prototyping has become an essential step in any digital product creation.

It only takes 50 milliseconds for a user to determine whether they like your website. That tiny window of judgement is all a user needs to decide whether they stick it out, or whether they sharply click the back button and return to their Google search.

We can spend hours testing internally and fixing all the bugs in the world, but all this is fruitless if your site fails to visually engage its audience.

Enter, prototyping. Like a magical gift, gifted to designers and enabling us to (at least) try and minimise this reaction.

If you’re reading this, thinking, “Woah Nelly, what the heck is a prototype?”, then stick with me as I attempt to define.

What is a prototype?

In the old days, us designers would be churning out our web designs and wireframes as flat imagery, presenting these to clients to sign-off before sending to developers to build. We’d always have a chuckle and place bets about how long it would take before that classic email arrives asking “why won’t the button work when I click it?”

Oh happy days and simple times. Those were the days when mistakes could be laughed off and put down to “oh it’s only a visual & won’t have to be like that when it’s built”.

Today however, the wonderful world of prototypes has demolished that. A prototype is an interactive mock-up of a website or an app. It displays functionality, UX and UI – in essence, it’s a demo website.

It enables us to deliver a tangible concept to the client, with a relatively quick production-time.

What are these benefits then?

Well, I could go on for pages about why I believe prototyping is so beneficial to web design, (and trust me, I do) but I’ve attempted to whittle it down to some key points.

1. Speed:Developers rejoice – there’s no need to code! Building a prototype means that we can test out a multitude of ideas, without having to commit to them being passed over to a dev team for coding. Prototypes can be built much faster than test sites and can be delivered to clients/stakeholders at the earliest stage, which increases the speed during the feedback phase.

2. Communication:Historically, you’d be providing your client with a tonne of supporting documentation, explaining the functions, click-throughs, planned animations, transitions, sitemaps etc. Not only does someone have to write those notes, the client has to read them, before fully understanding the amazing concept you’ve just designed. With prototyping, there’s little need for such documentation. All can be easily communicated through the tool itself.

3. Testing:By all accounts, your prototype is like a practice-run before sending it out into the big wide-world and giving it to those users we seem to be so scared of. It’s your baby, you’ve worked hard on it – you don’t want it to fail before it’s even begun. With prototyping you can send the tool out to clients/stakeholders, and the rest of your team. By utilising this approach, any areas that don’t work or seem complicated, can be picked up during this early stage, before any backend build has begun.

4. Happy Developers:If you’ve ever worked with developers, you’ll know that they’re a very special breed of human. Usually wired into their machines via massive headphones, with lightning speed type, and a killer hard stare. They don’t want to be fussing around with countless design changes from their crazy designer friends over here. The quicker we all reach a decision on design means that they can be left to do what they love, code and fix bugs!

5. Pitching asset:This is something that’s become a valuable tool when we go into pitches with potential new clients. Here at Ntegra, we believe that we’re good at our jobs, and we know that we can do them well. But sometimes, just talking about how good you are isn’t enough. By presenting something palpable, the room can fully engage with what you’re saying. They can visually see the thought-processes, and effort that you put into every aspect of the job.

After having a quick run about the office, (always good to get some exercise) I asked a few different team members and clients about their experiences with prototyping.

What Developers say:

“Prototyping has become an imperative step in our design & build process. It has enabled us to identify components and how they may work and be built. We can also gauge how the business would use a tool before implementing it, whilst confirming the requirements have been met. Additionally, we can ensure the business are happy with the overall UI/UX.”  Sean Bailey – Senior Developer @Ntegra

What Project Managers say:

“Since we started including prototyping in the business, we’ve noticed some huge benefits including rapid delivery of design and shared agreement with the business.

The process means we can see, feel and touch what is being built. It’s super clear with no ambiguity and it happens much faster than with traditional design processes.

It’s interactive and engaging, with real time updates – commenting, spec and documentation means there is a single version of the truth and as updates are made everyone sees it in real time.

There is a senior buy in/advocacy – when building apps there is often a lull from kick off to the point where an MVP is available. As the prototype process from a look and feel perspective is EXACTLY how the tool looks and feels, it lends itself to supporting sessions with senior teams, getting buy in, generating a buzz around the project” Mick Winters – Transformation Director @Ntegra

What Clients say:

“Wavemaker is a fast-moving creative business and our teams don’t have the time or inclination to read and digest complex technical requirement documents. They want to be able see what is going to be built for them and quickly give their feedback. Using a prototype as a part of the development process allows them to do this in an interactive and engaging way with no room for ambiguity. We have also found that it really helps get senior stakeholder buy in. Leadership is always eager to see progress and something tangible as soon as they can and a prototype lets them see this.”  David Kaganovsky – CTO @Wavemaker

My advice to starting out with prototyping:

Find a tool that fits your requirements (budget/interface etc), they all follow the basic set of functions. But if in doubt, Google it.

Then just stick with it and keep learning. I still get little thrills every time I figure out how to create a carousel or add in a bespoke animation.

For my part, I work entirely in UXPin. This was a tool that was suggested to me by a friend, and I’ve never looked back. The tool is hosted online and you can download the desktop app, so you can work anywhere at anytime. The help-centre is second-to-none, and they continually publish resources and useful updates that increase efficiency, and your output. Suffice-to-say, I love them! Which is a rare statement to make about a piece of software.

In conclusion:

So, if you’ve made it this far, I thank you. You’ll also be pleased to know that this is nearing the end of my pro-prototype manifesto!

At the end of the day, the choice to include prototyping is completely up to you, your business and personal favour. Whether you bother is up to you, but from my and Ntegra’s experience we’ve noticed an increased advantage to including this within our process. Although it adds an extra step, the quality of launching a new site that has been through many rounds of testing from early on, greatly outweighs the chances of losing users and engagement.