Why you should user test your prototype before writing a single line of code

A question we're often asked by our customers here at UserTesting is when should prototypes be tested with users: before or after the code has been written? Our answer is always the same. Whether you’re building an app or a website, always test your prototypes before you write a single line of code. Why? Because it reduces wasted development time. It’s way more expensive, time-consuming, and frustrating for your engineers to go back and make changes in the code than it is for your designer to go back and make changes on their end.

Developers’ time is extremely valuable

In a perfect world, developers would spend 100% of their time building awesome new products and features. In reality, an estimated 50% of engineering time is spent on doing rework that could have been avoided. What’s more, fixing an error after development is up to 100 times as expensive as it would have been before. Let’s say your developers spend a few weeks writing code for your site or app. Then when you run a user test, you discover all kinds of problems. For example:

• Users can’t figure out where to click or tap to find what they’re looking for
• Confusing navigation causes users to get stuck or lost
• Users run into trouble during the checkout process
• Users don’t know which icon to click or tap
• Users can’t find your search function

Stuff like that happens all the time. And it’s completely avoidable.

Avoid re-work by getting feedback early

Getting early feedback from your target market (and making research-backed, user-centered design decisions) can help you avoid those expensive errors, saving hundreds of engineering hours and thousands of dollars. A much better use of your time would be to mock up a prototype, drop it into Invision (or another prototyping tool), and then run a user test to validate your assumptions and figure out whether or not you’re heading in the right direction. Using this method, you’ll be able to:

• Get insights into how real people respond to what you’re building
• Find out all the places they get stuck and give up
• Iterate quickly on your design and avoid re-work by your developers

That way if your users can’t find what they’re looking for, if they don’t understand the value proposition, or if they’re completely put off by the design, then you can make rapid changes without wasting resources.

How to user test your prototypes

So how does this process work exactly? If you want to get insights on a prototype, here’s a quick and simple process you can follow:

• Mock up your prototype in Illustrator, Photoshop, or your program of choice
• Drop it into Invision (or another prototyping tool)
• Run some user tests and get rapid insights
• Make design changes based on feedback
• Run another user test to find out if your design changes solved the problem
• Once you’re confident your design is on the right track, code it
• Do one more round of user testing to make sure everything actually works with no usability issues before you let it go live

What prototyping tools can I use?

We use Invision because they make it easy to create interactive prototypes. You can simply upload static screenshots and create clickable prototypes your users can interact with and understand. But there are plenty of other great prototyping tools you can use. Here are a few that we recommend (in no particular order):

• Marvel Quickly turns your sketches, images, and mockups into prototypes that look and feel like the finished product

• Flinto Lets you quickly prototype your iOS and Android apps by using screens or sketches you’ve already designed, allowing you to update as you iterate

• Justinmind An interactive wireframe creator that enables you to create realistic, interactive prototypes without any coding

• Axure Allows you to generate realistic wireframes by generating HTML prototypes

• Proto.io Helps you create fully interactive, high-fidelity prototypes that function just like your finished app should (without any coding required)

• Balsamiq Helps you quickly design mockups and easily share them with your teams and clients

Early prototyping = less rework and guesswork

If you’re building a site or an app, you should definitely user test your prototype before writing any code. You’ll reduce wasted development time (and dollars) by making changes to the product while it’s still in design. If you’re interested in learning more about how user testing fits into the prototyping cycle, and how you can utilize user feedback to quickly iterate and improve your app—before you've written a single line of code—then I recommend you check out our eBook: Getting out of the office: Testing mobile app prototypes with users. You’ll learn how getting user feedback on your prototypes can lead to valuable improvements to your app's functionality, usability, and overall consumer appeal. You’ll also get an in-depth look into the stages of prototype testing with users. Ultimately, your users will make or break your app's success, so why not get their feedback before you've coded or built something that might not work for them?