A Short Guide to Prototyping

Our Top 10 Tips & Tools

8 min readMay 19, 2021

If you’re looking to launch a new product or service, but you want to test the idea first, then prototyping is the way to go.

Putting a prototype structure together for a new design or service solution, and doing proper testing to ensure maximum success and lower risks, is an absolute must for any business before you put your reputation on the line and spend zillions on a market launch.

As an award-winning digital agency, we regularly put our service and prototyping design skills to good use, making design thinking, customer context and empathy-building core to our design approach, with a healthy dose of user testing always recommended.

HERE ARE OUR TOP 10 TIPS TO THINK ABOUT WHEN PLANNING YOUR PROTOTYPE.

1. Start Earlier Rather Than Later

Tim Brown — a founding father of Design Thinking, once said…

“The faster we make our ideas tangible, the sooner we can evaluate them, refine them, and zero in on the best solution.”

This is the mantra our team swears by, and should be your big takeaway here.

2. Leave The Ego At Home

Word of warning before letting loose. That idea that you so badly want to prototype; where has it come from? What’s driving this project? If it’s a vanity thing — stop now, abort. If it’s the result of unbiased insight and ego-free collaboration, crack on.

3. Embrace The Wider Design Process

The two charts below both emphasise the importance of understanding a problem before designing an answer. Some great principles worth embracing. Here at Pancentric, we use the Learn-Create-Grow model. Learning paves the way for creativity and continues throughout the process as we validate and optimise solutions through to launch.

Dig deeper into the process and behold the revered ‘double-diamond’ model, courtesy of our friends at the Design Council. Again, this emphasises the importance of research and divergent-convergent activities to explore and synthesise the insights that emerge. Prototyping gets going when this work is done. (See the purple-ringed bit below.)

So does all this contradict Tip 1? Not as such.

You can have a first-run at the entire ‘double-diamond’ over a day or two. Treat it as a limbering-up activity. Book a room, ship in the post-its, press-gang a mix of people with experience of the customer, and off you go. We have a helpful Innovation Toolkit of exercises that can guide you on this. Diamond 1 is exploring and defining the problem or design challenge i.e. the question you need to answer. Diamond 2 is exploring ideas to solve the problem — and yes, prototyping, testing, and refining solutions.

There will be value in a 1–2 day exercise. It will feel productive. But you’ll almost certainly be missing key insights. That’s where a rewind makes sense. Make no assumptions. Do your homework. Get out into the field. Observe. Get under the skin of the customer.

And there’s also the option of more formal research. Depth interviews and focus groups backed up by quantitative research will help underpin your business case.

4. Have the End-Game In Mind

Armed with your insight, it’s important to have the ultimate end-game in mind, i.e. what must the solution deliver in order to succeed. It’s easy to get carried away with a shiny new concept and forget the harsh realities of the future marketplace.

GOOD INNOVATIONS NEED TO NAIL THREE IMPORTANT CRITERIA:

Desirable — answer a human need.
Viable — make money or satisfy a measurable business or community benefit.
Feasible — is technically possible.

5. Prototypes Can Come In All Shapes & Sizes

There are no hard and fast rules on what passes as a prototype. ‘Rough & ready’ to start with is fine and then refine as you iterate. As per Tip 1, the sooner you get something out there, however basic, the sooner it can be shared and built upon. In short, go crazy at this early stage. Don’t censor or stifle ideas. This is the moment to misfire, run up blind alleys, and explore with impunity. No serious money has been sunk yet.

At the rough & ready end of things — when you’re imagining a new service proposition — make-shift messaging on boxes works wonders. A simple 3D box has a funny knack for unlocking our creativity — far better than a blank, flat piece of paper. And always work with others if you can — don’t disappear into a dark room on your own. Collaborate.

Storyboards work well too; an accessible short narrative can help frame how a solution might meet a customer need. And don’t be intimidated — stick people are fine! You don’t need to be an artist to pull this off. At this point, you’re simply trying to articulate the idea clearly enough to be meaningful to a close circle of stakeholders. Whatever format you choose, keep iterating until you sense you have a workable proposition to test with customers.

6. Professional Design Input Is Worth Every Penny

As you start to pin down options and concepts, it’s probably a good time to get professional design input. Homemade productions are all well and good but they’re a world apart from professionally nurtured schemes. Tap into talent. You will see huge dividends by investing in proper design support. Introducing a less invested — but skilled — third party at the nascent stages of your innovation can also be healthy and helpful.

7. No-Code Prototypes — Tread With Care

If you have a digital servicing initiative in your sights and your confidence is up — you may get the urge to dabble in no-code software and build a DIY prototype.

In some situations, this can make sense — but tread with care. You may find yourself bogged down in implementation issues rather than focused on proposition development. Blagging to colleagues that you’ve mastered the latest cloud-based tech doesn’t make for a saleable service. Sweat the proposition not the technical.

8. Clickable Prototypes Don’t Have to Be Hi-Fidelity

A sketch-based clickable prototype can be a highly effective way to gain rapid, valuable customer feedback on early propositions and high-level digital interactions. The sketch format also avoids customers getting preoccupied with cosmetic details, an issue that can crop up with hi-fidelity prototypes e.g. “I’m not sure about the yellow…I don’t like the person in that photograph” etc.

Sketches are fast, low-cost, and help you and everyone else focus on the important stuff. You can make significant progress in days.

9. Invest In The Shiny Once You’ve Nailed The Core Proposition

Insight uncovered = Tick
Customer understood = Tick
Problem validated = Tick
Core solution tested = Tick

Now you can turn to your go-to-market packaging and the customer experience detail.

Make sure any new UX/UI (User Experience/User Interface) designers are fully immersed in the whys and wherefores of the enterprise — the context, the insight, etc. Share target personas so they get a strong feel for the customer. The more they understand, the more they’re motivated and empowered to add value. And they will. This isn’t a mechanical process. The job is far from done. On-boarded in the right way, good designers will transform your core solution from ‘fine’ to ‘desirable’.

YOU HAVE TWO OPTIONS ON THE SHINY PROTOTYPE FRONT.

Polished but greyscale clickable prototype, supported perhaps by mood boards showing branding concepts, photography/illustration styles, colour palettes, etc.
Fully branded high-fidelity clickable prototype. Feels like the end-product.

If there is uncertainty over branding direction, don’t waste time and money styling and finessing a branded digital scheme you may have to redo.

A greyscale desktop prototype may look something like this (one we designed in Invision):

A branded desktop prototype may look like this (below’s one we designed in Axure). Note — the prototype page index and annotations left and right of the screen can be hidden when testing:

The purpose of these higher fidelity prototypes is to build on the learnings to date, test customer understanding of the proposition, probe responses to the messaging, gauge responses to the look & feel if you’re testing this, understand ease of engagement with service features and the friction or otherwise around digital journeys and interactions.

10. CHOOSE THE RIGHT TOOL FOR THE JOB

There are many prototyping tools out there — here are our top picks.

Sketch — good for simple web/mobile app prototypes. Strong vector editing features. Avoid if you need to prototype transactional journeys with conditional questions and branching.
Axure — used by 87% of Fortune 500 companies. Comes into its own when prototyping complex applications.
InVision Studio — good for life-like mobile app prototyping
Adobe XD — a feature-rich cloud-based platform integrated with Adobe Suite. Not as smart as Axure, but blends nicely with Photoshop/Illustrator which has its advantages.
Marvel — excellent prototyping tool with macro and micro-interaction capabilities. Another cloud-based option.
WebFlow — capable of creating life-like responsive prototypes. Allows you to manually edit the CSS/HTML and then you can migrate the assets into a live web project.
Figma — shaping up as one of the top prototyping platforms thanks to an intuitive workflow, strong focus on design, interactions and support for collaboration.

Need a Digital Prototype Designing?

If your business is looking for service design support or help with digital prototyping, contact our team at Pancentric.

Below are examples of some of our design prototyping work and outcomes: