Prototyping : the definitive process and advantages to your product or business.

80

 

Prototyping. What is it?

Think about the last time you tried to describe a complex or an abstract concept using words. You may have been talking about an idea you dreamt up, an innovative device you’ve never seen before, or even a meme. Whether it was a professional or trivial subject matter, and regardless of how eloquent you are, you’d probably find it easier (and quicker) to get your point across with an image rather than a couple (or more likely a dozen) of sentences.

Believe us or not, the “a picture is worth a thousand words” rule applies to business and software development as well. How come? Think of building a digital product. With your concept defined, you could take a risk and proceed straight to the development phase. But you could also turn the idea into an interactive prototype before actually getting down to code. This way, you’d test some hypotheses, get early feedback, and make changes without putting a significant amount of resources at risk.

 

What is a prototype?

According to the Cambridge Dictionary definition, a prototype is “the first example of something, such as a machine or other industrial product, from which all later forms are developed”. This explanation holds true also for software development, whereby prototyping is a common method of testing the waters before committing to building a full-blown digital product.

 

Since it processes no real data and involves no code, a prototype is not yet the functional version of your application. It’s more of a clickable or an interactive model of the product that focuses on the look and feel. As such, it serves validation of the assumptions underpinning your general business idea as well as initiating the feedback loop early on.

 

How is a prototype different from a PoC and an MVP?

Now you’re probably thinking to yourself Wait a minute, isn’t a Minimum Viable Product all about validating your business idea? And what about a Proof of Concept? And you’re absolutely right: broadly speaking, all three serve some form of testing or verification. In practice, however, each of them has its own place in the software development process.

Let’s begin with the one that tends to be more confusing, a Proof of Concept. Much like a prototype, it’s not yet even a version of the product. It’s rather an exercise in an idea’s feasibility that focuses on the workability of certain solutions – especially if they’re highly disruptive. Another similarity to a prototype lies in the PoC’s potential to raise seed money and obtain the approval of the project stakeholders.

The difference between the Proof of Concept and a prototype, however, is that the former doesn’t take design into consideration and can’t be shown to the users. Furthermore, conducted at the very beginning of the software development process, a PoC tells us nothing about the prospective user interaction.📚 Where’s much more to a Proof of Concept. Read our guide to PoC and find out for yourself!

The contrast between a Minimum Viable Product and a prototype is more striking. If the former is the first part of the successful movie series, the latter is a trailer which – although not revealing – tests the audience’s reactions. As the name suggests, an MVP is the minimum version of the finished product that can be released to the market. It’s functional, based on code, and although it may be limited, it must be polished enough to attract real customers.

 

How can a prototype benefit your business?

Is prototyping an essential part of the software development process? Let’s be honest here: not always. If your goal is to build an application that’s just like a dozen others on the market, let’s say another simple e-commerce, there’s no point in reinventing the wheel. But there’s a number of scenarios in which prototyping will make sense. Think of a brand new idea for an application or a disruptive new feature that can be added to an already existing solution. If that’s the case, creating a prototype will let you enjoy some (if not all) of the following benefits:

  • Focusing on users and their needs

In 2019,  25% of users abandoned an application after one use and only 32% liked the product enough to keep it installed longer and launch it over 11 times.

app abandonment
  • Getting stakeholders and investors on your side

There’s no denying that humans are visual creatures – so if you’re about to pitch an angel investor, it’s usually better to do this using not only words but also pictures. Sometimes a mockup will be enough, sometimes it’ll make more sense to prototype a single functionality. Either way, an interactive trailer of your product will show your knowledge and dedication.

  • Saving time and money

Have you heard about the “fail fast, fail cheap” rule? Of course, everybody wants to be successful but that’s not always possible – and usually, failure is the best lesson one can get on the road to success. Starting with a prototype gives you a chance to validate some assumptions and steer the project in the right direction.

 

Types of prototypes

So far, we’ve made it clear that a prototype is a draft of your product with no engineering behind it and that it can be highly advantageous to your venture. At this point, however, we need to stress one more thing: when it comes to the form and the complexity of a prototype, the only thing that limits you is your imagination (and budget). In this part of the article, we’re going to discuss the most frequently used types of prototypes.

Wireframes and mockup

Let’s begin with static elements that can be linked together to make up interactive prototypes of different fidelity: wireframes and mockups.

A wireframe is a low-fidelity representation of a product structure. As a simple pen and paper or digital sketch using no more colors than black, white, and some shades of grey, it informs us about the general layout of the app, the elements of the interface, and the connection between them. It can’t go into too much detail but it has to be comprehensive enough to represent the idea behind the application well. In this regard, a wireframe is like a map: it has to show the streets and the landmarks, but not necessarily all the trees in a park.

 

Wireframes can serve to document the project. After all, they organize content in a clear way and lend themselves to notes about designed interactions. Moreover, they are a great tool for teamwork, especially when it comes to facilitating cooperation between designers and developers in the early stages of the software development process.

 

A mockup, on the other hand, is a high fidelity representation of the product’s design, including colors, typography, icons, etc. In other words, it’s the epitome of the application’s visual identity. With all its complexity, a mockup gives a deep insight into what the product will look like and may constitute a significant part of the pitch deck.

Think of the early version of your digital product as a human being. A wireframe is the skeleton and muscles which, when stimulated, have the potential to move. A mockup is a skin, the hair, the eyes – everything that gives the body a distinct look. Both, however, make up nothing more than an inanimate dummy. What we need now is the spark of life that will cause it to move. And that’s where a prototype steps in.

Pen and paper prototype

It’s the most basic solution one can think of, isn’t it? All it calls for is a piece of paper, some pens or pencils, and a touch of creativity that lies dormant in every one of us.

Although it may seem trivial for some, pen and paper prototyping comes with a wide range of advantages:

  • It’s fun. Nothing breaks the ice during the first meetings with clients like drawing together. It’s engaging and calls for no advanced skills.
  • It’s fast. Remember how we said that a picture is worth a thousand words? So is the simple drawing of what we mean by a given functionality or interaction. As it doesn’t take much time to create, a pen and paper prototype is also easy to improve or even throw away and replace with a different drawing.
  • It’s cheap. All because you don’t need any special equipment or software for early-stage conceptualizing with this method. And if anything goes wrong, there are no regrets – you haven’t invested much into a sketch, have you?
  • It works. In spite of being relatively simple, a paper prototype does indeed show the core elements of the interface and makes moving them possible. As such, it elicits feedback and allows to implement changes to the product idea at the very early stage of conceptualization.

Of course, the pen and paper prototyping has its flaws: it’s often inaccurate, needs clarification, and requires a great dose of imagination. At the same time, however, it can work miracles during brainstorming sessions and product design workshops.

 

Low-fidelity prototypes

The pen and paper prototype discussed above is the subtype of low-fidelity prototyping, so we’ll be brief in this paragraph. Lo-fi prototypes convey the key information about the product. Rather than colorful designs and meaningful content, they display shapes, hierarchy, and basic interactions. Just like wireframes and paper prototypes, they are invaluable in stimulating group work as well as clarifying and documenting ideas.

 

low fidelity prototype

The simplicity of the low-fidelity prototypes, however, might be problematic at times. The participants of usability tests are usually attentive to details and inquisitive: even when advised to focus on certain elements only, they tend to pay attention to all parts of the prototype. As a result, they may end up fixating on the copy that doesn’t make much sense or the buttons that are not clickable yet. Thus, if we wish to conduct usability tests, the lo-fi prototypes might not be the most accurate way to do so.

 

High-fidelity prototypes

On the other side of the spectrum lie the high-fidelity prototypes that not only feel but also look almost like the finished product. Their design is realistic and the content within is meaningful – sometimes to the point when a user doesn’t notice it’s just a prototype until they try to interact with it in the more complex ways.

 

The advantages of the hi-fi prototyping are as follows:

  • Clarity. Being aesthetically pleasing, high-fidelity prototypes showcase design expertise and engagement. As such, they can be presented to all stakeholders, including potential investors, in an attempt to get them excited about the project and raise more capital for development.
  • Conclusive results. A hi-fi prototype is as realistic as a prototype can get.  In practice, it means that participants of the usability tests will treat it as an ordinary application and behave naturally. This, in turn, will give us honest feedback and point to the major pain points.

The major cons of hi-fi prototyping, however, is the investment you have to make. On the one hand, high fidelity calls for pixel perfect design created with branding or even an entire marketing strategy in mind. On the other hand, if it’s supposed to mimic the behavior of a fully-fledged product, it may require the involvement of developers. And if that’s the case, the failure may turn out quite pricey.

 

To prototype, or not to prototype

That is the question… that has no universal answer. As we stated above, simple solutions rarely call for checking usability before getting down to development. In other cases, however, prototyping can be a source of invaluable insights on user behavior and a means to support your venture. To make the most of it, we recommend bearing in mind the following best practices:

 

Steps for prototyping

  1. Gathering requirements and brainstorming solutions.
  2. Focusing on prospective users and their needs.
  3. Matching your needs with the best prototype.
  4. Choosing suitable tools
  5. Creating a cohesive environment between developers and designers.
  6. Testing and implementing feedback.

You don’t need to walk the prototyping path alone. Get in touch with our product design team for some expert advice.

More Articles for You

8 Social Media Tools to Improve your digital media strategy (free and paid).

73 A digital media strategy is key for the success of any brand online. As all marketers know by now, …

— Featured —

How to build a digital presence for your business in Kenya.

75 Let’s face it, Covid-19 has only been a catalyst to the inevitable digital transformation. Hey, if you missed the …

— Featured —

Truecaller and Madavi Partnership in Kenya || What it means and its benefits

81 Truecaller and Madavi Partnership in Kenya || What it means and its benefits Madavi uses a narrow human-centric technology …

— Featured —

8 Proven Website Marketing Strategies for growing your business

83 In this article, we take a look at eight of the best website marketing strategies and how you can …

— Featured —

Influence of design on usability of applications || Best mobile design practices

97 Should you create an app with a good experience or a better design? An app’s look and feel on …

— Featured —

GraphQL vs REST : Which is your best option?

81Nowadays, one of the most frequently used approaches to creating an API is the REST philosophy. Over time, nearly everybody …

— Featured —