{"id":485,"date":"2022-06-20T16:41:25","date_gmt":"2022-06-20T16:41:25","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/startups\/blog\/?p=485"},"modified":"2024-11-05T11:49:25","modified_gmt":"2024-11-05T19:49:25","slug":"zerotoone-rapid-prototyping","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/startups\/blog\/zerotoone-rapid-prototyping\/","title":{"rendered":"#ZeroToOne:\u200aRapid Prototyping"},"content":{"rendered":"\n
ARE. YOU. READY? \u2013 Here\u2019s what you\u2019ve been waiting for and I\u2019m excited to take a dive into my favorite part of the process, you guessed it, Rapid Prototyping.<\/p>\n\n\n\n
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\u2026 but slow your roll there, pal, we\u2019ve got plenty of time to deal with that. So before we do anything, let\u2019s take some time and recap the series thus far:<\/p>\n\n\n\n From introducing user experience, to understanding the entirety of the product lifecycle, to understanding your user\u2019s pain points, to analyzing data and brainstorming based off you and your team\u2019s R&D, I feel confident that you should have all the prerequisite tasks taken care to the point where the fun begins \u2013 bringing the idea to life.<\/p>\n\n\n\n The goal of this week\u2019s 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\u2019s effort as well as what\u2019s best for the initial product scope.<\/p>\n\n\n\n So now that you\u2019ve done your R&D and your team has decided on which solutions to build out now, it\u2019s 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\u2019s 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\u2019t even built anything yet, but, as Benjamin Franklin once put it, \u201cif you fail to plan, you are planning to fail.\u201d Keeping that in mind, it is in you and your product\u2019s best interest if you have an understanding of what you are building for at this point.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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<\/strong> or an outline of the product, while a prototype is generally going to be medium-to-high fidelity<\/strong> and it will have a lot more functionality than a wireframe.<\/p>\n\n\n\n Here\u2019s a visual representation of both a high-fidelity low-fidelity prototype<\/strong> vs high-fidelity prototype<\/strong>.<\/p>\n\n\n\n As I mentioned before, when it comes to preference in prototyping, here are some of the reasons that I\u2019ve highlighted that go into choosing the best approach for you and your team.<\/p>\n\n\n\n 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\u2019s important to take this into consideration when it comes to prioritizing your prototype.<\/p>\n\n\n\n At this early stage of the design process, you don\u2019t 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\u2019ll 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.<\/p>\n\n\n\n In addition to flows and IA, a low-fidelity prototype will help you define the basic layout of the product\u2019s UI. That means determining the sizing, spacing, and positioning of the screen\u2019s elements and widgets. There\u2019ll be other factors to consider at this stage such as how much white space you\u2019re going to use and where.<\/p>\n\n\n\n Okay, so I\u2019m sure that was a lot to take in and I hope I haven\u2019t lost you completely yet, but let\u2019s 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:<\/p>\n\n\n\n One of the biggest takeaways I can leave you all with is the fact that RESEARCH MATTERS, your TEAM\u2019S 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.<\/p>\n\n\n\n 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\u2019ve learned into action.<\/p>\n\n\n\n Be on the lookout<\/strong> \u2013 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.<\/p>\n","protected":false},"excerpt":{"rendered":" ARE. YOU. READY? \u2013 Here\u2019s what you\u2019ve been waiting for and I\u2019m 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\u2026…<\/p>\n","protected":false},"author":1,"featured_media":806,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"footnotes":""},"categories":[57],"tags":[136],"coauthors":[489],"class_list":["post-485","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prototyping","tag-zerotoone"],"yoast_head":"\n<\/figure>\n\n\n\n
Choose your fighter \u2013 wireframes vs prototypes<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
When to use low-fidelity prototypes vs high-fidelity prototypes<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
Basic functionality and information architecture<\/h2>\n\n\n\n
Essential UI layout and element outlines<\/h2>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
\n
Looking ahead<\/h2>\n\n\n\n