Prototyping and testing: Tools, techniques and best practices

A vital part of any product development process, prototyping and testing needs to be an efficient and effective practice within all businesses.


man working on tablet 

Central to any product development process; prototyping and testing form a critical element for many significant reasons. From identifying design flaws and ease of use, to playing a role in pitching ideas to investors, the value of prototyping can never be underestimated.

 

The prototyping and testing stage is more common than you might initially think; consider the number of times you’ve tried out a recipe before serving it to your friends. Everything was fine-tuned, refined, done over and perfected in much the same way a product or service is before it’s brought to market.

 

That said, in a work environment, prototyping is a little more involved than just trying something out. Utilising a structured series of steps, prototyping allows you to continually improve your work, stay focused amidst the feedback and deliver a project from early development to full implementation.

 

Here, we’ll go into the prototype lifecycle, and provide some excellent tools, techniques and best-practice methods you can use to help you through your next project.

 

The prototyping lifecycle

 

Understanding the individual steps of the prototyping lifecycle is important in managing your own project, both in terms of timescales and work required. Here, we take you through the five stages of the process, beginning with material sourcing and ending with the product launch.

 

Stage 1: Create a bill of materials

 

Much like the recipe analogy above, a bill of materials is a shopping list for preparing your product. Through your bill of materials, you’ll have a decent idea of the funding you’ll need to manufacture your product.

 

man in factory

Usually, it consists of a detailed list of parts and items you’ll need to put together a product, as well as where to find said parts and how to put them together.

 

Stage 2: Technical development

 

Also known as “works like a prototype”, this next stage is the creation of a piece of technology that serves to fulfil your vision. It’s purely functional, so it probably won’t look like the finished thing, but it serves to prove that your idea works.

 

At this point, you can even test the prototype out with a target market, gain feedback, and use that to your benefit.

 

engineer at computer

 

Stage 3: “Looks like a prototype”

 

Whereas the previous stage was about the function, this next step involves turning the product into something that resembles the finished design. In order to keep things functional, certain things might need to be altered in order for mass production.

 

Further market testing may be necessary to further refine your product for the mass market.

 

Stage 4: Design for manufacture

 

The next stage in your prototype takes into account working with a supply chain in the real world, the costs of components and the speed of production. Consequently, it may look different to stage three’s prototype and might use cheaper materials than those originally envisioned.

 

Check that things haven’t been compromised without you being made aware; engineers might have cut corners to make things look a certain way, for example. This stage is crucial as once things have been signed off, this will be the product that goes into mass production.

 

Stage 5: Going to market

 

Fully implemented, with a funding campaign and marketing behind it, you’ll be in a position to reach your target market. Here is where your hard work and planning should really pay off, and things are ready to sell to your market.

 

Tools of the trade

 

There are many dedicated tools out there designed to aid in the prototyping process. Here, we list a selection of our favourites, including the advantages and disadvantages they offer.

 

image of artist working

InVision

 

If you need to design something and present it to team members or clients, then InVision lets you create high-fidelity interactive prototypes and demonstrate to others on their preferred viewing device.

 

Pros:

 

  • True-to-form visualisation
  • Developer friendly
  • Easily exportable prototypes

 

Cons:

 

  • Still in early stages of development
  • Has some issues with bugs

 

Balsamiq

 

Designed to be a digital whiteboard, Balsamiq allows for fast, simple wireframing built for brainstorming and spur-of-the-moment thoughts. The on-the-fly design makes things supremely user-friendly, while the clean interface puts the focus on your designs and nothing else.

 

Pros:

 

  • Simple, pick-up-and-go usability
  • PDF-building capabilities
  • Easily integrated on browsers

 

Cons:

 

  • Lacks interaction
  • Clunky text input function

 

Axure RP

 

Axure RP has some quality credentials – 87 of the Fortune 100 swear by it – but the steep learning curve might be off-putting for some. Master it, however, and you’ll find it hugely rewarding.

 

Pros:

 

  • Superb functionality
  • Drag-and-drop feature for quick design
  • Good training courses

 

Cons:

 

  • Complicated for new users
  • Costly for individuals
  • Preview function on mobile needs improvement

 

businessman working on laptop 

Sketch

 

If you’re designing layouts and other visuals, Sketch is an excellent go-to. As powerful as Photoshop, but without the unnecessary stuff, it’s optimised for web and mobile design too, which makes it an intuitive, adaptable essential for your visual design.

 

Pros:

 

  • Affordable
  • Autosave function
  • Community support

 

Cons:

 

  • Only available for Mac users
  • Not great for logo design

 

Proto.io

 

If you lack coding knowledge, then Proto.io is a great browser-based prototyping tool that’s great for animations and interactions. Remarkably easy to pick up, it allows for interactive high-quality prototypes across mobile devices and desktops.

 

Pros:

 

  • Drag and drop interactions
  • Easily customisable

 

Cons:

 

  • No live preview
  • No cloud storage capabilities

 

Techniques, methods and approaches

 

Unsure of how to turn your bright idea into reality? It all starts with the right method and approach. Let’s take a look at some of the practical techniques you can use to get your prototype off the ground.

 

graphic designer 

Sketches and diagrams

 

Even the simplest of sketches can illustrate a big idea. If you have something in your head, sketch it on paper regardless of your art skills.

 

Storyboards

 

If you’re trying to improve user experience, then telling stories is a highly effective approach. It helps to visualise a journey from start to finish, and provides information on users, tasks and goals too.

 

Lego prototypes

 

Looking to stimulate creativity and imaginations? Lego can help to realise simple ideas and make them physical, while at the same time, allowing for a massive amount of tinkering and customisation.

 

Role-playing

 

Also known as experiential prototyping, role-playing allows your design team to explore scenarios and gain a more empathetic understanding of your users. The recreation of situations helps you to focus on what needs improving as a result.

 

Best practices

 

While idea-generation often requires a fluid and flexible approach, the subsequent prototyping and testing phase should incorporate some element of coordination and control. Here are some best-practice tips to ensure the best chance of success when prototyping new products.

 

image of designers talking

Test early and often

 

It’s almost a no-brainer, but you can never do too much testing. It’s important to know what’s working, what isn’t and what needs improvement. It’s usually easy to carry out too, so there’s no excuse not to be testing during the early stages of a project.

 

Collaboration is key

 

Prototyping in a way that allows mock-ups to be shared means stakeholders can provide feedback on what they’ve seen, so small suggestions can be easily implemented and any mistakes amended there and then.

 

Use real content

 

It might be tempting to save content for last, but text and images are still part of your design at the end of the day. They help to provide meaning where placeholder copy and images don’t. If you’re looking to properly emulate the real thing, then actual content – or a fair approximation – serves to go a long way during the prototyping process.

 

Click here for the latest news and features from Gazprom Marketing & Trading or visit our homepage to find out about our latest career opportunities.

 

The views, opinions and positions expressed within this article are those of our third-party content providers alone and do not represent those of Gazprom Marketing & Trading. The accuracy, completeness and validity of any statements made within this article are not guaranteed. Gazprom Marketing & Trading accepts no liability for any errors, omissions or representations.

FURTHER READING


VIEW ALL BLOG POSTS