“Design adds value faster than it adds costs.” – Joel Spolsky, Creator of Trello
“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.
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.
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.
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.
“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
“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
“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
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.
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.