What are “high-fidelity digital prototypes”?

We mention high-fidelity digital prototypes a lot, and they’re one of the most common things we’re asked to build. So what are they? In short, when we talk about a high-fidelity digital prototype, we’re talking about:

An online prototype that is designed to be as close to a final user experience as possible.

We’ve developed a system to build digital prototypes at a very high level of detail because we care deeply about design, and we have a strong technical coding foundation. We have the ability to quickly generate something that feels real. We can use code to speed up the generation of basic screens, handle a large amount of data and let us really focus on the custom design problems. So why wouldn’t we?

The advantages of our high-fidelity digital prototypes

In contemporary design practice, there are many ways to prototype, or present an idea. We believe we’ve come up with a unique and practical process that works well for a number of reasons:

• Prototypes are bespoke – we build to the unique requirements of each project/idea
• Flexible build process – when we’re developing the digital prototype, we’re not constrained by the tool we’re using, only by what is practical within the project. Make your prototype do exactly what you need it to do.
• Share your prototype, securely – like any website each digital prototype has a link, and we can easily add a username/password.
• Test the prototype properly – the real website nature of the digital prototype makes it easy to test with anyone familiar with websites. Use tracking tools to map user behaviour on larger scale testing.
• Use real data – want to visualise 5,000 rows of data in your digital prototype? We can do this as the prototype is custom-built and because we have the technical know-how.
• Quickly make updates – the beauty of a coded solution… want to change the colour of a component of the design? Do it quickly and easily, and the prototype link updates itself.
• Version control – track changes and revert to previous versions.
• Investors love them – they can see your idea in action, and it gives them an excellent sense of progress.
• Fast and cost-efficient – digital prototypes are designed to be quick to develop, and often save time on the full technical build by resolving problems earlier in the process.

How do we create our high-fidelity digital prototypes?

Key to the success of an effective digital prototype is a robust project foundation. Project discovery gives us a solid understanding of what the strategic plan is, and who the key users are. A clear strategic plan gives us the principles required to create a practical scope. This strategic plan also gives us a path that your digital project needs to travel, which gives us a purpose for the prototype.

A digital prototype is a way to test or demonstrate key aspects of your overall digital project. This might include demonstrating the project’s key differentiating factor to your users for validation and testing, or demonstrating the idea to potential investors so they’re excited and ready to fund the next step. We prototype at this stage because it is a much faster and cheaper process than a full technical build, as you’re only mocking up the experience.

When we build a high fidelity prototype, we provide our clients:

1. A link to the prototype so you can view and interact with it on your own computer or device.
2. The ability to click/tap around the prototype, and it feels like you’re using an actual website or app. Depending on the project, this might include popups, tables, animations and very intricate interactions.
3. Your real content and data will be incorporated into the prototype, where appropriate.

We build our digital prototypes “properly”

Blitzm designs and builds web applications, so we have the in-house capability to build small, custom websites very quickly. Whilst our production-ready code will have gone through a rigorous series of tests, we’ve got a different goal during prototyping. We leverage the efficiency of using code to speed up the process of generating designed screens. It is a lot faster for a computer to create a table from a spreadsheet than a human. Combine that with efficiently built front-end design (thank you, Tailwind CSS), and you can show a lot in not long at all.

The prototype deliverable is a website made up of HTML, CSS and JS, the same technologies that power every other website.

When you open your prototype it feels like the real thing, because it very much is.

A high-fidelity prototype comes from a low-fidelity prototype

Designing what the prototype contains and how it will work is done using first principles design processes. Discussions, sketching and more discussions leads to basic wireframes that are used to plan out the high-fidelity screens that are unique to project and user requirements.

This vital planning stage also considers branding and any accessibility requirements. Before the prototype is developed we engage traditional methods such as moodboards, and contemporary methods such as UI design mock-ups in order to best frame the project and its requirements.

This early phase is flexible, and the choice about what to do is determined by what is the most efficient path forward. We’re not discarding the standard digital design process, we’re building on it and focusing on a more thorough final deliverable.

How has this practically helped?

To provide some more concrete examples, these scenarios are what led us to the high-fidelity prototyping solution we have now.

• A client had a spreadsheet of 10,000 rows of data that needed to be displayed in a custom visualisation. This data was the key differentiator for their product, so showing it was a non-negotiable. Being able to run a custom-built loop to generate an HTML page and CSS styles helped to show it off (successfully) to their investors.
• We built a high-fidelity prototype for an enterprise-level management system as the main UI design deliverable. The system has a lot of repetitive tables and forms that would’ve been a nightmare to mock up manually. The prototype meant we could generate many screens quickly, ensuring the system was accurately documented. We could make sweeping visual changes with a line of code. And the developers had ultra-detailed documentation to build from.
• We created a responsive prototype for testing a learning platform. We wanted to send a link and see what device the tester would naturally use to open it, and the responsive prototype ensured we could carry on testing on their chosen device.

Everything we do is user-centric, and the custom nature of these prototypes means we never have to compromise on designing for the end user. But we’ve also developed these prototypes as they work best for other key “user” groups: investors, software developers and anyone else who benefits from understanding your idea.