One of the strength points that startups got over big companies is the ability to run fast and try new things. That’s why it’s important to improve your prototyping abilities.
Rapid prototyping composed from quick iterations of these three steps:
- Prototype – Draw, sketch or code something that can be reviewed.
Convert the description of the solution into mock ups that everyone can see and review. You should take into considerations what is the story that will drive the user interaction. What will be the best experience?
- Review – Share the prototype with stakeholders (=users, developers and designers) and evaluate whether it meets their needs and expectations. If you can, let them try it and watch what they are doing. Try to mimic the real world as much as you can. For example, if it’s a mobile web app, let users try it with 3G networks (or even 2G) and see what is working and what is not.
- Refine – Based on feedback and data that you collected, identify areas that need to be refined or further defined it in the prototype. Now jump to step #2 and see if the result improved or, like in some cases, they did not.
The key to a successful rapid prototyping is revising quickly based on feedback. You should say ‘no’ to a lot of suggestions and let the data leads you. This approach helps teams experiment with multiple approaches and ideas on their way to a new product. It also reduces the risk by putting everyone on the same page (or in this case, the same image).
What to Prototype?
Use the 20/80 rule.
As a starting point, you can impress your colleagues when you suggesting it… You can start by saying something like: “Let’s work with Pareto distribution“. At this point of the meeting, everyone will look at you with admiration.
But more importantly, it’s helpful – For real.
Focus on the 20% of the key functionality that will be used 80% of the time. You wish to showcase how your product will work and later how it will look like. So ignore all the ‘little’ features that are not part of these core functions.
After you identifying the areas to be prototyped, it’s time to see what are the stories. What are the paths that the user can take in order to reach their goals? Try to address the important paths in your prototype.
The prototype we are building is not something that can be done in one iteration. If this is the case (like in a 12h hackathon), than great, we can skip this planning phase. But in many real world scenarios we will want to plan this process. If you are running with Agile/Scrum or Kanaban it will fit to your current process. You want to devote a sprint to the macro view of the system and later go deeper on selected areas that you learn needs more attention.
- Check with your developer what can be done in terms of feature and prototype only these functions. It’s a waste of resources to ‘promise’ features that can’t be done in terms of technical issues, time and quality.
- Listen to all the stakeholders but don’t take every request that comes out of a prototype review as a new requirement.
Learn to say ‘No’.
Every new requirement should be evaluated carefully as it grows that complexity of the system and the risk of delivering it.
- Measure everything you can.
This will help you during the prototype review sessions. People can’t argue with data. Although, I saw cases, where some do try.
- Go from macro view deeper but stop at a point where you have enough feedback. You should not dive too deep in the prototype phase because in most cases it’s not helpful. It’s just a waste of time.
- Share the knowledge in each phase with all the stakeholders. Ask for specific feedback from each one of them. It will help you during the decision process and later with prioritization.
- Balsamiq – A simple web prototyping tool.
- Invision – This tool also allows team collaboration and comments on work progress.
- Proto.io – Enables you to prototype mobile applications and websites
- Design with napkin – A new mobile app that will let you (quickly) ‘draw’ your work.
Below is a table that let you compare popular prototyping tools.
If you like to take it old school and use paper, here are few options:
- Omnigraffle wireframe and if you want to see any site as a wireframe, checkout wirify.com.
- Web designers toolkit