Getting the Most from Your UX Prototype

Designers in all kinds of industries have long used prototypes to find out if their concept is viable. Prototypes serve as the first step in the process of turning something theoretical into something real.

At Crux Collaborative, we build user experience (UX) prototypes that enable us to conduct user research for our clients. Our prototypes can range in how realistic they seem – from low fidelity to high fidelity – but most are the high fidelity variety.

In this article, we’ll explain how we build high fidelity UX prototypes so you know what to expect when starting a project with us. We’ll also discuss how our prototypes provide both immediate value to our clients as well as long-term return on investment after the user research study has been completed.

About UX Prototypes

Though our prototypes look and behave like a real site, there are key differences to note. Prototypes are almost always created for the purpose of being replicated – they are not the “real thing” but rather serve as a model for the real thing.

Sometimes when we are describing our process to new client, they balk at the idea of developing a prototype to simulate the experience of their future website. Why, they wonder would we spend time and budget on a prototype, rather than to use those resources to begin building the real thing.

UX Prototype: Immediate Value

We build transactional, data-driven experiences for regulated industries. The data systems that drive the sites we design are complex and secure.

Developing a prototype with “dummy” data and canned scenarios separates us from the complexity of these systems and enables us to focus solely on the quality of the user experience.

We can research, adjust and refine the prototype quickly and without risk. By contrast, making these kind of significant changes after the full system has been developed can be cumbersome, contentious and costly.

When we set out to build a UX prototype, the central purpose is to validate the overall user experience design and key processes within the system.

We determine early where on the fidelity spectrum the prototype will be. A low fidelity prototype might be a series of static image with just a few clickable zones – with none of the interactivity you’d expect on a real site. By contrast, a high fidelity prototype works and looks like a real website – complete with mouse-over states, clicks, swipes, animations, state changes, and usually responsive design.

We can glean useful research findings from any fidelity, but the high fidelity option has many advantages even though it costs more to build. We believe high fidelity prototypes provide exceptional value for our clients.

Some advantages of high fidelity prototypes include:

• More closely simulates the actual experience and relies less on assumptions
• Allows us to validate interactivity and micro-interactions of key site components as well as the overall user experience
• Eliminates reliance on test subjects’ previous experience and imagination
• Can be repurposed after the research has concluded

UX Prototype: Options for Extra Value

At the conclusion of user research testing, we incorporate recommendations for improvement into the prototype. Often, we will conduct another round of user research to validate changes.

Once the user research is wrapped up, there are several options available for our clients to repurpose the high fidelity prototype. These options provide exceptional value since much of the up-front work is already complete. Typically, we will determine which options our client wants in the beginning of the project, allowing us to be even more efficient.

Options to repurpose high fidelity prototypes:

These are the most common ways we can repurpose our high fidelity prototypes to provide added value.

Value Option: Internal Demo

For clients who wish to share the work in progress with internal stakeholders, we can make adjustments to the prototype to help put the site in the proper context. This is usually a quick process – it can involve slimming down the scope, adjusting some content, and adding components or screen shots.

Value Option: Sales Demo

Many clients wish to parlay the UX prototype into a demo for their sales team to show prospective customers. This is a way to maximize the value since most of the setup is already complete. We work with clients to create storylines for the sales demo, and then adjust the prototype by adding content and adjusting functionality to result in a fantastic sales presentation.

Value Option: Functional Design System

Wireframes are an important UX tool, but they have limits when it comes to communicating interactivity and motion. Our prototype can be modified to serve essentially as a moving wireframe – which we call a functional design system. Your developers will appreciate it because they can focus on other things and refer to the design system to find out how pages are laid out and how elements should behave or animate. The less of these kind of subjective decisions your developers need to make, the happier and more efficient they will be.

Value Option: Implementation Code

Adding another step beyond the Functional Design System, we can use the UX prototype as a starting point for implementation code. This process includes stripping out all prototype content and conducting several rounds of additional testing (browser/device/platform/performance/accessibility). The end result is HTML components your development team can copy and paste, along with production ready components like images, icon libraries, CSS/SASS/LESS, and JavaScript. We collaborate closely with your technical team to ensure we are in sync and provide as much value as possible.

If you’ve got questions about our process, contact us. We’d be happy to walk you through it in further detail and discuss how we can help you achieve your business goals and provide an excellent experience for your users.