{"id":49403,"date":"2023-08-17T06:16:51","date_gmt":"2023-08-17T13:16:51","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=49403"},"modified":"2023-08-24T09:30:24","modified_gmt":"2023-08-24T16:30:24","slug":"workable-prototype","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/","title":{"rendered":"What is a Workable Prototype?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype-1024x512.png\" alt=\"workable prototype\" class=\"wp-image-49404\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Designers create different types of prototypes depending on the project and its requirements. One of a commonly used type of prototypes is a working prototype or a workable prototype. We will go over the definition of a workable prototype, learn when this type is useful, and what the steps of designing a working prototype are.<\/p>\n\n\n\n<p><strong>Key takeaways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A workable prototype is an interactive model of the final product. Designers build such a prototype to test their solutions with real users. A workable prototype is a high-fidelity design which means that it closely resembles the end-product&#8217;s experience.<\/li>\n\n\n\n<li>Component-driven prototyping is the best methodology for creating working prototypes. It saves you time on adding interactions and keep your design consistent from the start.<\/li>\n\n\n\n<li>Building workable prototype allows designers to test their design choices, user flow, and see if they create a smooth user experience. To get the most insight, include real images and copy when designing a workable prototype.<\/li>\n\n\n\n<li>One of the best technology for working prototypes is UXPin Merge, because it helps you use your app&#8217;s building blocks \u2013 React components \u2013 in the prototyping process.<\/li>\n<\/ul>\n\n\n\n<p>Create interactive working prototypes to get better feedback and insights with UXPin&#8217;s revolutionary Merge technology. <a href=\"https:\/\/www.uxpin.com\/merge\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-workable-prototype\">What is a Workable Prototype?<\/h2>\n\n\n\n<p>A workable prototype is an interactive representation of an end-product. It&#8217;s called &#8220;workable&#8221; because it allows people to engage with and the prototype, experiencing its features and functionalities.<\/p>\n\n\n\n<p>Unlike a static or image-based prototype, a workable prototype enables users to navigate to different screens, interact with various elements, and perform actions that simulate user flows.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-when-to-build-a-workable-prototype\">When to Build a Workable Prototype<\/h2>\n\n\n\n<p>Design teams typically build a workable prototype in the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">later stages of UX design process<\/a> <em>after<\/em> validating the design concept and major features through <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-iteration-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">earlier iterations<\/a>.<\/p>\n\n\n\n<p>This prototype serves as a functional representation of the final product that helps assess its usability, gather user feedback, and verify key <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactions<\/a> and user flows.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-types-of-prototypes\">Types of Prototypes<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/responsive-screens-prototyping.png\" alt=\"responsive screens prototyping\" class=\"wp-image-32522\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/responsive-screens-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/responsive-screens-prototyping-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Low-fidelity prototypes:<\/strong> Basic representations with minimal details, often created using paper sketches or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/\" target=\"_blank\" rel=\"noreferrer noopener\">digital wireframes<\/a>. Designers use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">low-fidelity prototypes<\/a> in the <strong>early stages<\/strong> of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a> to quickly explore and validate design concepts before investing significant time and resources in more complex designs.<\/li>\n\n\n\n<li><strong>High-fidelity prototypes:<\/strong> Advanced and visually polished prototypes resembling the finished product, including realistic visuals, clickable elements, animations, and simulated user flows. Designers use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">high-fidelity prototypes<\/a> in <strong>later stages<\/strong> of the design process to gather detailed feedback on usability and interactivity.<\/li>\n\n\n\n<li><strong>Paper prototypes:<\/strong> Prototypes created using paper materials, such as hand-drawn sketches or cutouts, are cost-effective for brainstorming and testing design concepts. Designers use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paper-prototyping-the-practical-beginners-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">paper prototypes<\/a> in the <strong>early stages<\/strong> of the design process to iterate quickly, gather initial feedback, and make rapid design decisions before moving to more detailed digital prototypes.<\/li>\n\n\n\n<li><strong>Functional prototype:<\/strong> Prototypes focusing on demonstrating core functionalities, enabling users to perform key tasks and actions. Product teams might use <a href=\"https:\/\/www.altexsoft.com\/blog\/functional-prototype\/\" target=\"_blank\" rel=\"noreferrer noopener\">functional prototypes<\/a> to test specific functionalities and workflows of the product, ensuring they meet user needs and expectations.<\/li>\n\n\n\n<li><strong>Interactive prototypes:<\/strong> allow users to interact with the interface and experience product functionality, often created using design software or prototyping tools. Designers use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactive prototypes<\/a> <strong>throughout the design process, especially during late-stage<\/strong> user testing and validation, to provide users with a realistic and interactive experience.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-makes-a-prototype-workable\">What Makes a Prototype Workable?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png\" alt=\"testing user behavior prototype interaction\" class=\"wp-image-35213\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-prototype-a-guide-to-functional-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">prototype<\/a> should effectively communicate the product&#8217;s concept and demonstrate its viability to be &#8220;workable.&#8221; It must have the features and interactivity to elicit <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-testing-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">meaningful feedback from users<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-interview-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> to inform further design iterations and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-decisions\/\" target=\"_blank\" rel=\"noreferrer noopener\">decision-making<\/a>.<\/p>\n\n\n\n<p>A workable prototype must possess specific features and characteristics to be effective for user testing. Here are key aspects that contribute to making a prototype workable:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Functionality:<\/strong> A workable prototype should demonstrate the core functionality of the final product, showcasing the main features and interactions that users will experience.<\/li>\n\n\n\n<li><strong>Interactivity:<\/strong> It should allow users to interact with the prototype, providing a hands-on, realistic experience of the final product.&nbsp;<\/li>\n\n\n\n<li><strong>Navigation:<\/strong> The prototype should include a clear and intuitive <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/navigation-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">navigation<\/a> system that enables users to move between screens or sections seamlessly.<\/li>\n\n\n\n<li><strong>Visual design:<\/strong> The working prototype must reflect the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-user-interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">final product&#8217;s UI design<\/a>, including <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/brand-consistency\/\" target=\"_blank\" rel=\"noreferrer noopener\">branding and aesthetics<\/a>, to provide a realistic user experience.<\/li>\n\n\n\n<li><strong>User flow:<\/strong> The prototype should capture the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">essential user flows<\/a> and key interactions, allowing users to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-do-task-analysis\/\" target=\"_blank\" rel=\"noreferrer noopener\">complete tasks<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-goals-vs-business-goals-finding-the-ux-tipping-point\/\" target=\"_blank\" rel=\"noreferrer noopener\">achieve goals<\/a> within the prototype.<\/li>\n\n\n\n<li><strong>Real content:<\/strong> Designers must use real content and data, giving users a true sense of the user interface&#8217;s layout and media elements to determine whether these contribute to or hinder the user experience.<\/li>\n<\/ul>\n\n\n\n<p>We have emphasized <em>&#8220;providing a hands-on, realistic experience of the final product&#8221;<\/em> because many <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-figma-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\">image-based design tools<\/a> lack the features to create real-world prototype experiences. Organizations must combine several tools and platforms to increase fidelity and functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-a-component-driven-workflow-to-improve-working-prototypes\">How a Component-Driven Workflow to Improve Working Prototypes<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">Component-driven prototyping<\/a> is a design methodology inspired by <a href=\"https:\/\/www.simform.com\/blog\/component-based-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">component-driven development<\/a> where devs reuse UI elements for front-end development. Designers mimic this engineering workflow in UXPin by importing code components using <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a>. Instead of code, designers work with visual elements like in any other design tool.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ultimate-consistency\">Ultimate consistency<\/h3>\n\n\n\n<p>Merge components include properties and interactivity defined by the design system. For example, a button&#8217;s colors, sizes, variants, content, and states are available for designers to adjust using <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/configuring-the-properties-panel\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Properties Panel<\/a>.<\/p>\n\n\n\n<p>These baked-in properties offer many benefits for design teams:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No designing from scratch<\/li>\n\n\n\n<li>Eliminates errors or changing properties which result in drift<\/li>\n\n\n\n<li>Organization-wide consistency<\/li>\n\n\n\n<li>More time spent focused on product and user goals<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-realistic-working-prototypes\">Realistic working prototypes<\/h3>\n\n\n\n<p>Component-driven prototyping significantly improves prototyping fidelity and functionality because design teams can build exact replicas of the final product, giving user testing participants and stakeholders realistic user experiences <em>without writing a single line of code<\/em>\u2013and significantly faster than image-based tools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-a-workable-prototype-in-5-steps\">Design a Workable Prototype in 5 Steps<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/prototyping-elements-components.png\" alt=\"prototyping elements components\" class=\"wp-image-49152\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/prototyping-elements-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/prototyping-elements-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Following these steps will enable you to build a working prototype that effectively communicates the product concept, aligns with user needs, and provides a solid foundation for further development and refinement.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Define the objectives and scope<\/strong> to ensure that it aligns with the desired outcomes and provides a clear direction for the design process.<\/li>\n\n\n\n<li><strong>Conduct thorough user research to understand<\/strong> user needs, preferences, and pain points. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-beginners-guide-to-capturing-ux-requirements\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gather requirements<\/a> from stakeholders and users to inform the prototype&#8217;s design and functionality.<\/li>\n\n\n\n<li><strong>Build the prototype using the right tools<\/strong>, like <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin with Merge technology<\/a>, to create an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactive prototype<\/a> resembling the final product.<\/li>\n\n\n\n<li><strong>Conduct usability testing with representative users<\/strong> to evaluate the prototype&#8217;s effectiveness and gather feedback on its usability, functionality, and overall user experience.<\/li>\n\n\n\n<li><strong>Iterate and refine the prototype<\/strong> based on feedback to address any issues or concerns and improve its overall performance and user satisfaction.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-best-practices-for-workable-prototypes\">Best Practices for Workable Prototypes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-keep-the-prototype-focused-and-aligned-with-user-needs\">Keep the prototype focused and aligned with user needs<\/h3>\n\n\n\n<p>Ensure the prototype addresses the core user needs and goals by focusing on the key features and functionalities essential for user testing and validation.<\/p>\n\n\n\n<p>For example, when designing a mobile banking app, the prototype should prioritize crucial tasks like checking account balances, transferring funds, and making payments rather than including unnecessary features that may distract or confuse users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-balance-realism-and-usability\">Balance realism and usability<\/h3>\n\n\n\n<p>The prototype must be realistic enough to provide users with a sense of the final product&#8217;s look and feel but also functional and easy to navigate.&nbsp;<\/p>\n\n\n\n<p>For example, when designing an eCommerce website, the prototype should showcase real product images and descriptions while maintaining a streamlined and intuitive user interface that facilitates smooth browsing and purchasing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-real-content-and-data\">Use real content and data<\/h3>\n\n\n\n<p>Incorporate <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/live-data-prototype\/\" target=\"_blank\" rel=\"noreferrer noopener\">real content and data in the prototype<\/a> whenever possible to make the user experience more authentic. This realistic experience helps users better understand and evaluate the product&#8217;s value and usability.&nbsp;<\/p>\n\n\n\n<p>For example, when designing a travel booking app, use real destination names, prices, descriptions, and images to give users a realistic and immersive experience, improving their ability to make informed decisions.<\/p>\n\n\n\n<p>Without this accurate data, users may use the prototype differently than the final product, giving you inaccurate insights to make changes during the design process and adversely affecting the project&#8217;s success.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-involve-stakeholders-and-users-in-the-prototyping-process\">Involve stakeholders and users in the prototyping process<\/h3>\n\n\n\n<p>Collaborate with stakeholders and involve users in prototyping to gather valuable feedback and ensure the prototype meets their expectations. This collaboration helps validate design decisions, identify potential issues, and incorporate diverse perspectives.<\/p>\n\n\n\n<p>For example, including feedback from business stakeholders, doctors, nurses, and patients when developing a medical app ensures the prototype addresses different types of user groups&#8217; requirements, enhances usability for everyone, and meets industry standards.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-building-working-prototypes-with-uxpin-merge\">Building Working Prototypes With UXPin Merge<\/h2>\n\n\n\n<p>One of the biggest challenges for prototyping during the product design process is designers lack the tools and skills to build working prototypes. They&#8217;re limited by the tool&#8217;s vector-based constraints, which causes issues in testing prototypes with users and stakeholders.<\/p>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a> removes those constraints by bridging the gap between design and development. Designers use the <strong><em>exact<\/em><\/strong> same UI library during the design process as engineers developing the final product. Not only does this mean better collaboration, but it vastly improves prototype quality for users and stakeholders.<\/p>\n\n\n\n<p><em>&#8220;The C-suite people and the directors are able to give us stronger feedback about the ultimate direction because they experience the features and goals of these prototypes rather than just commenting about how these boxes don&#8217;t look like a text field.&#8221;<\/em> &#8211; Erica Rider, former UX Lead EPX at PayPal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-smoother-design-handoffs\">Smoother design handoffs<\/h3>\n\n\n\n<p>With design and engineering teams using the same component library, handoffs are seamless, almost non-existent, because developers already have the code to start the development process. UXPin renders <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/authoring-and-managing-jsx-presets\/\" target=\"_blank\" rel=\"noreferrer noopener\">production-ready JSX<\/a>, so devs simply copy\/paste to develop the final product according to the design team&#8217;s prototype and mockups.<\/p>\n\n\n\n<p>Stop wasting time and resources using multiple design platforms and workarounds to build realistic prototypes. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin is a full-stack design tool<\/a> that enables designers to create prototype experiences indistinguishable from the final product\u2013<strong><em>all the power of code without writing a single line<\/em><\/strong>.<\/p>\n\n\n\n<p>Level up your prototyping capability with the power of UXPin&#8217;s Merge technology. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> for more details and how to request access.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Designers create different types of prototypes depending on the project and its requirements. One of a commonly used type of prototypes is a working prototype or a workable prototype. We will go over the definition of a workable prototype, learn when this type is useful, and what the steps of designing a working prototype are.<\/p>\n","protected":false},"author":3,"featured_media":49404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,8],"tags":[],"class_list":["post-49403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-prototyping"],"yoast_title":"","yoast_metadesc":"What does it take to make a prototype work? Let's learn about designing a workable prototype that looks and feels like a finished product.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is a Workable Prototype? | UXPin<\/title>\n<meta name=\"description\" content=\"What does it take to make a prototype work? Let&#039;s learn about designing a workable prototype that looks and feels like a finished product.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a Workable Prototype?\" \/>\n<meta property=\"og:description\" content=\"What does it take to make a prototype work? Let&#039;s learn about designing a workable prototype that looks and feels like a finished product.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-17T13:16:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T16:30:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"What is a Workable Prototype?\",\"datePublished\":\"2023-08-17T13:16:51+00:00\",\"dateModified\":\"2023-08-24T16:30:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/\"},\"wordCount\":1695,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/workable-prototype.png\",\"articleSection\":[\"Blog\",\"Prototyping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/\",\"name\":\"What is a Workable Prototype? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/workable-prototype.png\",\"datePublished\":\"2023-08-17T13:16:51+00:00\",\"dateModified\":\"2023-08-24T16:30:24+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"What does it take to make a prototype work? Let's learn about designing a workable prototype that looks and feels like a finished product.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/workable-prototype.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/workable-prototype.png\",\"width\":1200,\"height\":600,\"caption\":\"workable prototype\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/workable-prototype\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is a Workable Prototype?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is a Workable Prototype? | UXPin","description":"What does it take to make a prototype work? Let's learn about designing a workable prototype that looks and feels like a finished product.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/","og_locale":"en_US","og_type":"article","og_title":"What is a Workable Prototype?","og_description":"What does it take to make a prototype work? Let's learn about designing a workable prototype that looks and feels like a finished product.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/","og_site_name":"Studio by UXPin","article_published_time":"2023-08-17T13:16:51+00:00","article_modified_time":"2023-08-24T16:30:24+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"What is a Workable Prototype?","datePublished":"2023-08-17T13:16:51+00:00","dateModified":"2023-08-24T16:30:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/"},"wordCount":1695,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype.png","articleSection":["Blog","Prototyping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/","name":"What is a Workable Prototype? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype.png","datePublished":"2023-08-17T13:16:51+00:00","dateModified":"2023-08-24T16:30:24+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"What does it take to make a prototype work? Let's learn about designing a workable prototype that looks and feels like a finished product.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/08\/workable-prototype.png","width":1200,"height":600,"caption":"workable prototype"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/workable-prototype\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"What is a Workable Prototype?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/49403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=49403"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/49403\/revisions"}],"predecessor-version":[{"id":49452,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/49403\/revisions\/49452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/49404"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=49403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=49403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=49403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}