If you're starting a new project, you need something to demonstrate your end vision for the product before it's fully built. Some users may need a fully functional product to be convinced of its usefulness, but many users will be sold on a prototype alone. With a prototype, you can get your initial user validation before you've sunk precious development hours into the project.
When lookin specifically at software, a prototype is a fundamental building block of the design process. A software developer will first look to a prototype to test users and gather feedback before investing too much effort. In most cases, your prototype will fail, but that isn't a bad thing! Since prototypes are low effort, they are low risk environments. It is a time for you to test ideas, processes, designs, etc. without sacrificing a large investment. In other words: "fail fast, fail often."
The more we can fail, the quicker we can figure out what doesn't work. Now, with each failure, we have to be strategic. If you are investing a ton of time and effort into building a full functioning app for each failure, that is a bad. However, if you are strategic and only build a prototype for each round of iteration, then failures can very much be used in your best interest.
Low, Medium, & High Fidelity Prototypes
Let's dive into the difference between a low, medium, and high fidelity prototype. The most former, a low fidelity, is low in effort. You can think of this as just lines and notes. Some may look to sticky notes or whiteboards, while others may look to actually drawing with hand or using an online tool. The important take away here is that you are focusing on collaboration and brainstorming — there is low effort put into the prototype itself and if you are to fail, you will be failing very quickly with minimal effort.
A medium fidelity prototype is like a wireframe. For more about wireframes, check out our other blog!
Last, but definitely not least (in effort), is a high fidelity prototype. A high fidelity prototype is going to look a lot like your final product. In most cases, with software, a high fidelity prototype essentially serves as a final product that just isn't functional. So, if we were referring to a high fidelity prototype of Facebook, a user of the prototype could go through all of the features and see what everything would look like, but you can't personally interact with the prototype, nor interact with others. You are limited by the "clickable" boundaries, otherwise referred to as clickable prototypes. When you interact with the prototype, you can click through different screens, but you can only do so because those screens have been fixed and prepared, it isn't truly dynamic.
Aloa's Top 3 Prototyping Tools of 2021
InVision
InVision is probably the most popular prototyping tool out there. With the ability to support tons of file types (PDF, JPG, PSD, GIF) as well as integrations with common tools (DropBox, Trello, Slack, JIRA, etc.), InVision is fit for scalability and ease of use. Used by big name brands all around, you can't go wrong with InVision.
How Much Does InVision Cost?
Free Tier
- Free...forever!
- Up to 3 active users
- Up to 3 prototypes
Pro Tier
- $7.95 per user/month
- Up to 15 active users
- Unlimited prototypes
Enterprise Tier
- You have to contact InVision to get a quote!
Their Free plan is quite generous, and the Pro plan is affordable at just under $8 per user/month with unlimited prototypes. For most startups and small businesses, this should be sufficient. We're not sure what their enterprise version costs, but it looks like they're willing to be flexible based on the level of support and features you need.
Marvel
Marvel is a startups dream app when it comes to whipping up prototypes super quickly, but also inexpensively. With interactivity, dynamic transitions, and tons of unique gestures, a prototype with Marvel really makes you feel like you're in the actual application. Iterate as much as you need, with whoever you need!
How Much Does Marvel Cost?
Free Plan
- Free...forever!
- 1 user
- 1 project
Pro Plan
- $12/month
- 1 user
- Unlimited projects
Team Plan
- $42/month
- 3 users
- 5 prototypes per user
Enterprise Plan
- You have to contact Marvel to get a quote!
Marvel's Free plan is a little more limited compared to InVision's, but the beautiful transitions makes up for it. We think their Pro and Team plans are totally worth it.
Figma
Figma is not only powerful, but also super collaborative. Think Google Docs, but for designing beautiful mockups, prototypes, and even clickable wireframes. You can design some nice screens as well as build a prototype flow. I would say that Figma takes a little bit more of a skillset to use, but once you figure it out, there is no turning back. We at Aloa use Figma for all of our prototyping!
How Much Does Figma Cost?
Starter Plan
- Free...forever!
- Unlimited drafts
- Up to 3 files with other editors
- 1 project
- Up to 3 pages per file
- 30-day version history
Professional Plan
- $12 per editor/month
- Unlimited projects
- Unlimited version history
Organization Plan
- $45 per editor/month
- Everything in Professional, plus...
- Private plugins
- Org-wide design system
- Shared fonts
- SSO + advanced security
Figma recently changed their Starter plan details to be a little bit more restrictive, and our chart is up to date. We still think Figma's free Starter plan is more than enough to show you just how powerful it can be. We will likely make the choice soon to upgrade to their Professional plan, and it will be worth every cent.
There you have it. Prototyping is a critical part of any development experience. Make sure you are taking the right steps and using the right tools! If you have any questions, you know where to find us: [email protected].
