Skip to main content
Back to blog

For designers

Prototypes: the unsung hero behind successful mobile and web applications

Marie Desnos
Oct 19, 2021 ∙ 5 mins
A professional in technology reviewing code and its result on an app

You’ve heard it or you’ve experienced it: building a mobile or web application can be challenging. It takes time, a lot of work, a healthy budget and an amazing digital partner. Even with all of these elements in place, moving an idea forward can feel daunting.

Maybe you’ve asked yourself, “how can I test my idea for a digital solution before going all-in?” or “how can I convince potential investors that my business idea is viable?” This is where a prototype comes into play.

While our team is qualified (and motivated!) to build a full product for your web or mobile app, we understand that in some cases a prototype might be a necessary stepping stone towards meeting your business objectives.

This article will provide you with key information about what prototypes are, types of prototypes, how they can benefit your business and the tools we use to deliver high quality prototypes.

Gif of a prototype

What is a prototype?

In Design Thinking, a prototype involves bringing an idea to life in a tangible and concrete way so that you can learn lessons from it, before building the solution in full and investing a lot of time and money in an uncertain product. It’s a key component of the digital solution creation process that allows you to validate choices and features with a technical team.

A solid prototype is the best way to share, communicate and gather feedback quickly on your initial ideas. It also allows you to validate the feasibility and quality of a product before launching the production phase and incurring development costs.

Not all prototypes are created equal. They come in various types, each with their own characteristics and adapted to test different elements. That is why the first goal of our prototyping process with our clients is to identify their objectives, in order to propose the best prototype to test.

From conception to creation, every prototype evolves to become more concise and detailed. Typical characteristics include:

  • Representation: this refers to the form of the prototype (e.g. shape or kind, such as paper or HTML; mobile or web)
  • Precision: this refers to the fidelity of the prototype (e.g. its level of detail, finishing touches, and how realistic it is)
  • Interactivity: this refers to the user-responsiveness of features (e.g. whether it’s fully responsive, partially or read-only)

Wireframes of a project

What are the different types of prototypes?

We split prototypes into two groups: user prototypes and technical prototypes.

User prototypes

A user prototype is essentially a simulation of how the application will look and feel for the end user (without any coding behind-the-scenes).

  1. Low fidelity: If you’ve seen a pen-and-paper sketch with simple screens, this is typically a low fidelity prototype. It’s quite useful at the beginning of conception, in the ideation phase. We use it a lot to gather early feedback before moving forward. A major benefit of the low fidelity prototype is that it’s available quickly, at low cost, and allows us to focus on workflow information. We can highlight usability issues early on in the process and correct them. It also helps integration and communication with the team, and contributes to strong project documentation (i.e. sketches and diagrams help in understanding and writing specifications for future development).
  2. Medium fidelity: This prototype includes wireframes and placeholder content, but has limited digital interaction. It’s highly useful as we build the user experience and its main advantage is that the interactions are more realistic than its low fidelity counterpart. This type of prototype allows us to identify issues with usability early on. At this stage we can test with real users, and avoid jumping into finalizing a feature that might not work in terms of usability or does not get the desired traction with users. It’s still relatively quick to produce and can be edited and iterated on easily and frequently.
  3. High fidelity: This prototype is the closest to a finished product, including real data, UI wireframes and interactivity. For us, it’s the deliverable at the end of a Discovery Phase. We usually structure high fidelity prototypes into one of two formats, each with a different goal:

    a. Test-oriented prototype: With either an unbranded or temporary aesthetic, its main goal is to test the interest of the user for a solution, the global usability of the product or certain flows. We aim to present as many user flows of the minimum viable product (MVP), even if the look and feel isn’t final.

    b. Sales-oriented prototype: This prototype is delivered on-brand to seduce investors or potential clients. It isn’t fully representative of the MVP, but shows the key flows that will help with the selling side. Ideally, we want that "wow” effect, even if we want to present aspirational elements that might only be built in the application later in the process.

Prototype example

Technical prototypes

A technical prototype is all about what’s behind the scenes and (roughly) testing out the core functionality.

  1. Feasibility prototype: The biggest advantage of this prototype is that it allows us to evaluate technical risks and feasibility, and test new technologies. The developers will output just enough code to validate feasibility.
  2. Data-live prototype: Limited implementation by the technical team for a proof of concept and validate that the solution can function properly, with real data.
  3. Proof of Concept (POC): The objective of the POC is to clarify all the gray areas by ratifying the functional orientation of the project or by removing possible technical risks.The POC also allows the authentication of a technical complexity (the risk or difficulty required to solve for the issue) which can condition the orientation of the future project.

What are the key benefits of a prototype?

If you were to ask our design team why you should work with us to create a prototype, our answer would be to reduce risk. If you discover an error in a flow or feature during the prototype phase, the cost is quite low (almost none). But an error or irrelevant feature that brings no value will be very costly to your project and could put it at risk.

Our prototype approach at Osedea enables you to think ahead in your project, test it with your users without spending a dime on a single line of code. This in turn reduces your risks, allows you to have a better roadmap of your product and an estimate that makes sense so that you don’t jump too quickly into something that might not work.

Image showcasing the benefits of prototypes

How do we build prototypes?

The tools and techniques that we have to build prototypes are evolving quickly. There are many tools at our disposal for different devices - Balsamiq, Adobe XD, Axure, Sketch, InVision, Marvel, to name a few. Our tool of choice is Figma, as we find it to be powerful, straightforward and intuitive for all stakeholders.

Final words

Digital projects and ideas can be overwhelming. It’s tempting to push forward to the development phase quickly, but we hope that after reading this article, you’ll consider prototypes as a gateway to building your digital products or services. Need our help or want more information, do not hesitate to contact us.