Agile Prototype

Why agile prototyping will save you money in the long run

Solid UX design starts with a pencil.

Wireframing and prototyping make it easier to spot usability issues early in the project. Low-fidelity wireframes make it easier to translate and visualise key deliverables uncovered in previous UX research. The cheapest and quickest way to map this out is simply to jot it down. Put pencil to paper and work out your first prototype.

This iterative, agile approach will help identify any problems, saves time and budget. So what if you get it wrong, or alter the user experience at this stage. You simply rub it out or bin it and start again. No developer sprint meetings, no digging around for extra budget, and no late delivery of the project due to unforeseen UX issues.

So, what’s a prototype?

Prototypes are inexpensive design drafts for clients and developers to work with - this iterative approach to development is what brings the project to life.

Methods of prototyping.

A combination of some, or all of the UX prototyping methods can be used in a project – this decision depends on the extent of the problems you’re looking to resolve, as well as time and budget restrictions. The methods are:

  • Pencil and paper prototypes
  • Low-fidelity digital wireframes
  • Low-fidelity interactive wireframes
  • High-fidelity digital wireframes
  • High-fidelity interactive wireframes

Let’s take a look at these five methods in more detail.

Pencil and paper prototypes.

Pencil and paper prototypes can be as simple as loose sheets of A4 paper to define the basic structure of each page. The beauty of this cheap and flexible approach is the ability to easily switch, move or try alternative UI elements in different positions, or on alternative pages.

Additionally, the card shuffling method can be used at this early stage of the project to help focus on key UI elements. Again, a low-tech version of this is simply to write all the required UI elements on post-its and stick them to the paper to ensure the user flow is as desired.

This minimal prototype solution should be conducted with all other stakeholders as early as possible to ensure maximum constructive feedback.

Paper prototype

Low-fidelity digital wireframes.

Low-fidelity digital wireframes are a great option to move the project quickly and effectively to the next level. These visuals are usually monotone and don’t get bogged down with UI finesse like colours, or images.

Their main purpose is purely to cement the relationships UI elements have with each other on-page – as well as helping stakeholders focus on the key user objectives, i.e. the CTA, or prominent links.

Low-fidelity interactive wireframes.

Low-fidelity interactive wireframes often come next – the page functionality and user flows are more defined and are a great way to validate UX ideas and a perfect place to conduct user testing.

Aesthetically these wireframes are still basic but realistic from a functional point of view – which is a great reference for coders and should reduce development and deployment time at the end of the project.

Digital prototype

High-fidelity digital wireframes.

If the project is UX focused based on existing UI styles there may be no need for high-fidelity wireframes. However, if the project requires UI sign-off then low-fidelity wireframes will not be up to the standard required by all stakeholders.

These stylised wireframes are an opportunity to explain functionality coupled with the proposed interface design. This UI design could be the first opportunity for the designer to show the new style, or it may be governed by very strict brand guidelines – either way, this is the first time the project really begins to come to life visually.

High-fidelity interactive wireframes.

So to the high-fidelity interactive prototypes – these are exciting dress rehearsals for developers and stakeholders to check all UX and UI elements before passing the project onto the next stage, the HTML build. Even though the project is fairly well advanced at this stage, it’s still easier and cheaper to iterate, pivot and change direction now, rather than when a team of developers are knee-deep in complex code during the build phase.

The user journey on a mobile device is very different than when browsing a website on a desktop. Producing high-fidelity interactive prototypes for various media screen sizes will massively aid the developers when producing quality, responsive code the satisfies the project brief.

Use a combination of prototyping methods to find the workflow that’s right for your users.