A prototype is a tool that allows designers to bring product ideas to life. Product teams build prototypes to maximize the chances of creating products that meet market standards and user expectations. This article will explore the importance of prototype development and list the stages the team needs to go through to create a decent prototype.
What is prototype development?
Prototype development is the process of creating a preliminary version of a product to test and evaluate its design and functionality. Think of a prototype as a working replica of the future product.
What is the purpose of prototype development?
Prototype development is an essential step in the design process because it validates the design and identifies a product's potential problems or issues before the product is released to the market. Depending on the nature of the project, a prototype can vary from a simple drawing on paper (paper prototype) to a fully functional model that looks and works like a finished product (high-fidelity coded prototype).
It is possible to identify a few particular cases for prototype development, such as:
Appearance model
Such prototypes are used to evaluate the visual appearance of the future product. They are created using nice colors, typography, and ample whitespace and are used primarily to communicate the visual language of the future product to the audience. In other words, appearance models demonstrate how the product will look.
Proof of concept
Proof of concept is a type of prototype that is primarily focused on testing the functionality. When a team creates proof of concepts, they focus less on the visual appearance and more on the functionality of the design. People can interact with this prototype to understand how it works.
Alpha and beta versions
Alpha is an early version of the future product. This version might have issues, such as bugs in code, but it can be used for testing with users. The beta version is an enhanced version of the product design that closely resembles how the final product will look and work. There is a fine line between a prototype and a final product, but many consider alpha and beta versions prototypes rather than products.
Is prototyping part of development?
Yes, prototype development is part of the software development life cycle. The main advantage of a prototype is that it simulates the actual product, and this simulation helps to uncover the problems that can be overlooked when the team evaluates static mocks. Product teams often start to create prototypes during the initial stage of software development, wherein some changes can be easily introduced in product design. A rule of thumb says that
The earlier the problem is found, the less expensive it will be to fix it.
A technique called rapid prototyping can help product teams to develop the prototype in quick iterations. At the end of each iteration, the prototype is shared with clients or stakeholders so that they can provide feedback. This feedback is used as input for the next iteration and helps to improve the prototype design.
Stages of prototype development
1. Gather and analyze product requirements
Before you start creating anything, you need to clearly understand what you want to build and why you want to do it. Gathering product requirements seems like something that doesn't require explanation, yet, many product teams skip this step and go straight to the ideation or even a prototyping phase, where they expect to find a solution. Most of the time, it results in a huge waste of time because when team members don't understand what they want to achieve with their product, they end up creating generic solutions.
Product requirements should always be rooted in user and business objectives. You need to clearly understand why your target audience might want to use your product and whether they are willing to pay for it. Getting good revenue is one of the business objectives, so you need to be sure that your product offers value to your target audience and that they are willing to buy it rather than use it for free.
That's why you should invest in user research during this stage and collect as much information about your target audience as possible. Collect this information and create a user persona, an archetype of your ideal user. Use this persona to understand the expectations of your potential customers.
After you collect requirements, you also need to analyze them. The analysis will help you to define the order in which you will build your product—what you will create first, second, etc. For example, if you know that your users will benefit both from features A and B, but feature B is much more complex and, as a result, more time-consuming to build, you might want to put feature A earlier in the product design roadmap.
2. Idate solutions
Product requirements will help you frame the problem you want to solve in design. During the ideation phase, you should try to find a solution to this problem. The great thing about design ideation is that you can create simple prototypes during brainstorming sessions. The prototypes don't have to look fancy. You can create a paper prototype using simple tools like pen and paper, but paper prototypes will help communicate your idea to others better.
The product team should aim to propose a few solutions to the problem they're solving and choose one or two solutions that they want to prototype. Most of the time, it's possible to find the best solution by asking team members to vote for the design they like.
3. Create early prototypes
Once the team agrees on what approaches they want to follow, it's time to create a simple prototype of the future design. The prototype doesn't have to be pixel-perfect. In fact, it's better to make a low-fidelity prototype because you will likely need to introduce many changes to it. Once you show the prototype to stakeholders or potential customers, the prototype will require modifications and enhancement.
Consider early prototypes as a foundation for creating a fully-functional product. So instead of increasing the level of fidelity, you should focus on the areas like information architecture and content. Solid information architecture will help you create a logical navigation system and improve the content/feature discoverability of your product. Realistic content will help other people better understand the goal of individual screens/pages in your product.
4. Validate your prototypes
Once you make your design tangible, it's time to validate it with others. You might think that the only way to do it is to show your prototype to your users, but that's not true. You can solicit valuable feedback early in the design process by testing your prototype with teammates and (surprisingly) random people. If you want to test the design with teammates, you need to ensure that the person you want to reach isn't responsible for creating a prototype (otherwise, the testing results will be biased).
Testing with random people is called guerilla testing, and Martin Belam defines this way of testing as "the art of pouncing on lone people in cafes and public spaces, and quickly filming them while they use a website for a couple of minutes." No matter what type of testing you prefer to use, you need to specify tasks that you want test participants to complete. Сhoose a few regular tasks that most users will do in your product.
Once you validate your design, you will likely identify the areas of friction where users face problems when interacting with your product. You need to invest time and effort in eliminating such areas in the future version of your prototypes.
During this step, it's also essential to validate the technical feasibility of your solution. Not all that designers create can easily be turned into code. It's worth it to invite engineers in the design process and share the prototypes with them so that they can evaluate how much time it will take for them to build it and identify hard-to-build areas.
5. Increase the level of fidelity
When you minimize the number of issues your prototype has, it's time to increase the level of fidelity. The final product will be developed according to the high-fidelity prototype. It's possible to do two things to maximize the efficiency of the design process—introduce design systems and create coded prototypes.
The design system will help the team to use design components and visual styles so that the prototype will be visually and functionally consistent. The engineering team will also rely on the design system when they implement the design.
Coded prototypes can be very useful for the engineering team because they can reuse the code of individual elements (for example, animated transitions) in a final product.
6. Validate your design with real or potential users
You need to validate your design regularly during the design process, but it's critical to validate the design before the handoff. You need to be sure that the design the engineering team will implement will be flawless. The scope for testing should be based on the tasks that regular users will complete in your product.
The most popular examples of prototypes are paper, digital, and coded prototypes.
A paper prototype is a prototype created using pen and paper. Although the prototype resembles basic properties of future design it can be beneficial during the early stages of the product design process, like the ideation phase. It will help the team explore different design ideas and visualize interaction scenarios. Many great products started as a sketch on the napkin.
A digital prototype is a prototype created using a prototype tool. This prototype helps people interact with the design and form opinions about it. The major benefit of this type of prototype is that it can be easily shared with others. It's possible to share a link to the prototype, and the other person will view it on their device.
A coded prototype requires coding skills, so only designers who can code can create this prototype. A coded prototype is particularly useful during the later stages of the design process when the team wants to explore the feasibility of a solution or needs to work with dynamic data (such as data from the device sensors or data from the database).
Prototype development software
The software you use for prototype development depends on the type of prototype and its nature. For example, if you want to create a coded prototype of an iOS app, you will use Apple XCode and Swift programming language for that. But if you want to create a coded prototype of a website, you might want to use popular frameworks like React or Vue.
Tips for Prototype Development
Make sure to use the proper tools and techniques
Properly selected tools can maximize your design efficiency. When it comes to prototyping, the first tool you need to consider (apart from pen and paper) is a digital prototyping tool. And Mockplus RP can be an excellent tool for your toolbox because it will help you to move from lo-fi to hi-fi design, conduct usability testing sessions, and even conduct design handoff (using Mockplus Cloud).
Going from low-fidelity to high-fidelity prototype using Mockplus RP.
Practice iterative design
It's nearly impossible to create a perfect prototype from the first attempt. Most of the time, it takes a few iterations to go from the idea to a well-functioning design. And during each iteration, you will improve your design. Embrace the philosophy “change is the only constant in a designer's life.”
Be open-minded
No matter whether you like it or not, people will criticize your work. Sometimes the criticism will be constructive; in other cases, it will be destructive. When you collect and evaluate feedback. It's essential to be open-minded. Product design aims not to prove that you are right and other people are wrong but to find the best possible solution to the problem they want to solve.
Conclusion
Prototype development makes product design a less risky business. When the team creates and validates prototypes during the design process, they maximize the chances of creating a product that satisfies user expectations. And when a product meets users' expectations, they are more willing to use it again and again.
Join our Discord community
support@mockplusapp.com