ARE. YOU. READY? – Here’s what you’ve been waiting for and I’m excited to take a dive into my favorite part of the process, you guessed it, Rapid Prototyping.
I know this has been a lengthy process and at this point you are probably beyond eager to start building that first iteration of your product… but slow your roll there, pal, we’ve got plenty of time to deal with that. So before we do anything, let’s take some time and recap the series thus far:
From introducing user experience, to understanding the entirety of the product lifecycle, to understanding your user’s pain points, to analyzing data and brainstorming based off you and your team’s R&D, I feel confident that you should have all the prerequisite tasks taken care to the point where the fun begins – bringing the idea to life.
The goal of this week’s post is to not only take a deep dive into the rapid prototyping phase but also explore different methods of prototyping and how each one can benefit your team’s effort as well as what’s best for the initial product scope.
Choose your fighter – wireframes vs prototypes
So now that you’ve done your R&D and your team has decided on which solutions to build out now, it’s time to test those ideas with real users by creating a mock-up, otherwise known as a prototype. When it comes to choosing the optimal prototyping approach for you and your team, it’s important to know the scope and some of the desired outcomes that you look to achieve post-prototype. That may be a lot to think about considering that you haven’t even built anything yet, but, as Benjamin Franklin once put it, “if you fail to plan, you are planning to fail.” Keeping that in mind, it is in you and your product’s best interest if you have an understanding of what you are building for at this point.
Whether you are looking to build a bare-bones version of your ultimate design for early buy-in, or you are looking to build a simulation that will allow you to get better usability results early on, you should decide on whether you need to build a wireframe or a prototype.
This picture above is the simplest way to think about the difference between the two methods and its uses. A wireframe is going to be low fidelity or an outline of the product, while a prototype is generally going to be medium-to-high fidelity and it will have a lot more functionality than a wireframe.
Here’s a visual representation of both a high-fidelity low-fidelity prototype vs high-fidelity prototype.
When to use low-fidelity prototypes vs high-fidelity prototypes
As I mentioned before, when it comes to preference in prototyping, here are some of the reasons that I’ve highlighted that go into choosing the best approach for you and your team.
Whether you are looking to get that early buy-in, looking to get it in the hands of your potential users for feedback, or you are just looking to decide on whether you need to pivot before you start building out your MVP, it’s important to take this into consideration when it comes to prioritizing your prototype.
Basic functionality and information architecture
At this early stage of the design process, you don’t want to start getting bogged down in details such as typography, images, and gradients. What you need to demonstrate is core functionality, information architecture (IA) and the user flow between screens. You’ll need to outline some basic screen designs that allow the user to complete their primary goals and help satisfy the basic requirement for each feature.
Essential UI layout and element outlines
In addition to flows and IA, a low-fidelity prototype will help you define the basic layout of the product’s UI. That means determining the sizing, spacing, and positioning of the screen’s elements and widgets. There’ll be other factors to consider at this stage such as how much white space you’re going to use and where.
Okay, so I’m sure that was a lot to take in and I hope I haven’t lost you completely yet, but let’s wrap this up. When it comes to building that first iteration of your product, here are some of the biggest pros as to why you should be building a winning prototype:
- Allows early feedback on the product
- Let’s you identify design and development mistakes
- Time- and cost-saving solution compared to full-stage development
- Provides users with a better understanding of the product workflow
- Makes it easier to identify customer needs
- Displays complex ideas in one comprehensive format
- Can be used again in the next, more complex projects
One of the biggest takeaways I can leave you all with is the fact that RESEARCH MATTERS, your TEAM’S INPUT MATTERS, and more importantly your CUSTOMERS MATTER. With that being said, hopefully now you are starting to realize that all of the previous topics and posts are all a part of a bigger picture.
At this point you all should have a solid understanding of the prototyping process conceptually, but I wanted to take it a step further and show you guys an example of what it looks like to fully grasp how to put what we’ve learned into action.
Be on the lookout – a two-part video series that will show you my step-by-step method on how to take an idea from a low-fidelity prototype to a high-fidelity prototype.