How prototyping helps with proof of concept

Making any website or front end application requires careful planning, great team-work and excellent production processes. 

Scoping is crucial, but:

• How do you scope out layouts and user journey scenarios no-one has seen yet? 
• How do you accurately allocate resources for development through to the final platform based on a lengthy written project document? 

This is where User Experience design prototyping becomes essential. Designed to help you save time and money in the long run, prototyping is a cost effective way of ensuring problems are solved at the beginning of your design journey, rather than finding major challenges at the end of your project.

The main benefits of UX design prototyping are that you can test design and interaction before a project goes into development, helping stakeholders to experiment with what is possible in terms of layout and interaction. You can also present essentially ‘built’ designs to developers to scope out front end components.

To show the significant impact of using prototyping, I’ve included statements from highly experienced seniors and digital collaborators within the industry.

“When starting new development work, prototypes are essential for our team's clarity and understanding. They provide the vision and roadmap we need to navigate the projects effectively, while also empowering the clients to visualise and actively participate in shaping their ideas.” 

Milen Nedev - MTR Design

A prototype lets you analyse the “behaviour” of your design and evaluate and implement changes required to make it even better. usabilitygeek

Prototyping and proof of concept (PoC). What's the difference?

The proof of concept (PoC) aims to convince stakeholders about a new idea by showing its possible look and function, while a prototype is a more user-test ready version of a PoC, closely reflecting the final product, enabling a user to complete the intended task, demonstrating practical usage of the product or feature.

What does a UX prototype look like?

A UX prototype will contain most, if not all, of the features of the actual website or application -  though not worked up to the level of detail or design of the final version. It will be an interactive, clickable model that shows the site’s most important elements and allows users to test functionality and features in a real environment. Any issues can be taken as pertinent to the finished product.

A UX design prototype project helps to de-risk and make better decisions about the direction in which your idea will go next. Prototyping can be a quick and effective way of bringing your idea to life, giving you something that can be tested further.

More advanced than PoC, a prototype will be a basic working model that might also involve elements of system testing and debugging. It may not look pretty, but it’s an excellent way of testing usability and functionality, and spotting and fixing errors.

Everyone gets a design wrong - sometimes

If you’ve made enough websites or apps in your career you’ll know what it’s like to reach the part of the project where scope creep turns into an over the line scramble, without too much change!

Scope creep can cause all sorts of problems, from hacking new ideas into previously completed layouts, to clients getting nervous about project direction and designers and developers losing the plot. Sometimes, you may find the project veers off course and the initial objective changed so much, it's hard to know what the agreed strategy was in the first place!

"We used to write massive documents, which more often than not, no-one would read, after a while we started using a UX team to help us product the layout vision, which always helped with budget sign off" 

Emma Rush - CEO, Thinkando

We’ve worked on loads of projects over the years. Something we’ve learnt to avoid is development scope creep or change. We always invite developers to collaborate with our Figma boards. It helps everyone understand not only how something will be built, but also if a platform can't do something, or if there’s something we may have missed. 

The pen-and-paper designs of the past are still extremely useful in many respects, but they lack the ability to be easily manipulated. A digital prototype can be tweaked endlessly, and multiple versions of it can sit in storage, to be worked on using a range of different devices.

Also, It’s likely that an entire project team will be working together on a single prototype. Being able to all work on the same data simultaneously is therefore invaluable – and a digital prototyping expert will be able to steer this efficiently and effectively.

“We always invite developers to collaborate with our Figma boards. It helps everyone understand not only how something will be built, but also if a platform cant do something, or if there’s something we may have missed.”

Alastair Driver, Higher Ground

What are the main benefits of a prototype?

• Consider UX flow before going into development
• Create proof of concepts to demonstrate ideas
• Discover user scenarios before it's too late 
• Share with stakeholders and users to gather feedback
• Review the sales narrative and how the user journey works
• Save project costs by identifying areas of complexity
• Solve navigation scenarios
• Find the optimal version of your website or app
• Demonstrate layouts to development teams easily to scope out resources
• See what’s lacking from a layout - you might have all the content ordered well, but is it fun to use?

“Without prototypes my teams can't really understand what the application does - complex areas such as overlays and modals can’t really be fully grasped without seeing a prototype"

Matt McClurg - former Worldwide Marketing Director, JCB Global 

Get a feel for UX before development

After many years making digital products, testing a layout on a device - whether it be a phone, tablet or laptop - is arguably one of the most fundamentally necessary tasks in making a website or app. 

We’ve all been there… Client / Boss asks for something. You explain it and sketch out the idea. They say “No, I don't understand that, I need to see it in reality.” Only then can you gather feedback and re-present it to sign off. 

Save time and resources with UX prototyping

PSD (project specification documents) are a challenge for all teams. Medium to large sized digital projects usually require project specification documents before any work starts. But they can often be very long winded and hard for teams to understand what they are planning for. 

Heads of development are very time precious, their daily tasks usually don't allow the freedom to consume and communicate complex layouts to their team. proof of concept prototypes are massive time savers for these people. ‍

“For our clients, UX prototypes serve as a window into the future of their product. By involving users early in the design process, we gather valuable insights before investing resources in the full design and development cycle.” 

Simon Fuller - Founder & Managing Director, Elegant Digital

Benefits of using prototyping experts

If you’re developing any sort of product, you may have found building a prototype used to be among the most expensive and time consuming parts of the process – after all, you’re building a unique item from scratch – particularly if you’ve missed something along the way. Fortunately, technology has handed us a means of sidestepping these problems – digital prototyping.

As a UX design agency we use FIgma as it’s perfect for team collaboration and building entire design systems for both websites and apps. With Figma we can:

• Design ideas quickly and test interactions with no development
• Simplify the communication of ideas and design concepts
• Quickly act on essential feedback from clients and users
• Find the optimal version of your website or app

UX design prototyping is cost effective

The main advantage of building a design prototype is that it helps you keep cost low while saving you time and effort.

Prototyping makes sure that the end product successfully addresses particular needs. The UX designer is most closely in tune with what users are thinking and feeling, and how they’ll interact with the end product.

Without dedicated UX designer input, designers or developers may be expected to address UX feedback iteratively, in addition to completing their own planned work. The detailed, technical nature of this work means that extra revisions tend to be costlier and may take longer than planned for. 

Not only is it more cost-efficient to address UX feedback through prototyping, it also enhances the value delivered during later project phases by allowing other team members to fully focus on their respective areas of expertise.

Let’s have a quick look at the numbers provided by Experience Dynamics:

UX design saves 50% of development rework time by defining all the requirements upfront. Also, it reduces overall development time by 33–50% by improving decision-making processes and task prioritisation. 

‘’Usability activities (like prototyping) help you to save making changes later on when its too expensive or too late’’ 

Frank Spillers, Experience Dynamics

We all know that time is money: UX design prototyping costs significantly less than making changes in your product after it’s been built. 

In conclusion

In conclusion, there are multiple benefits to using UX design prototyping including:

Money

Prototyping helps to minimise the actual building of products and apps – which in turn reduces the outlay on resources.

Time

Prototyping helps to keep the product development cycle short, which allows developers to be more agile when it comes to getting products and apps to market. 

Compatibility

A digital prototype can be tweaked endlessly, and multiple versions of it can be worked on using a range of different devices. Without using precious web developer resources.

Efficiency

Prototyping is quick, allowing time to be more thorough. The result is products that are superior to those developed via traditional project methods.

Accuracy

A prototype can be created to extremely fine tolerances – allows us to accurately model how a real production version might function – without going to the trouble of actually building it.

Collaboration

Being able to all work on the same data simultaneously is invaluable – and a good ux design prototyping package will provide this.

Testing

 Since digital prototyping is quicker, it follows that we can get more tests in to iron out any initial flaws before the development phase.

Attainable

Digital prototyping technology is now accessible and affordable – at both the larger and smaller ends of the business spectrum.

This article was written by Robert Hufton - UX consultant and owner of Higher Ground UX agency.