{"id":37373,"date":"2022-11-02T02:04:00","date_gmt":"2022-11-02T09:04:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=37373"},"modified":"2022-11-01T14:21:45","modified_gmt":"2022-11-01T21:21:45","slug":"mistakes-that-kill-collaboration-between-designers-and-developers","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/","title":{"rendered":"5 Mistakes that Kill Collaboration Between Designers and Developers"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/8mvmV2avVip3t-wN7L2YcXl5670fEGriOiQ8acvaoGnQElWSUBHbaGS34lDXDOqZIPYH5JbG4BWZRVOpUjwu8zXWEngMcziKmjgZFTCuiKh-3wNJJPZG40Yh1eWdx59Ux_tJNJqDWZb2RiT05pjHa9-PD4CGjL9XHFd7p6WxqmXRDtgNzetwJY6_Qw\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>We&#8217;ve looked at <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-developers-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to make it easier for designers and developers to work together<\/a>. <em>But what roadblocks and workflows work against this collaboration?<\/em><\/p>\n\n\n\n<p>We&#8217;ve researched common mistakes design teams and product managers make when working with software engineers and how they can collaborate better. Reducing friction and roadblocks creates a smoother product development process while <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-value-conference-2022-recap\/\" target=\"_blank\" rel=\"noreferrer noopener\">increasing Design&#8217;s value<\/a>.<\/p>\n\n\n\n<p>Enhance collaboration and bridge the gap between design and development with UXPin Merge. With this tech, you can bring your component library&#8217;s elements to UXPin and create functional prototypes that we&#8217;ll be developed exactly as you designed them. Check more about it. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/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-1-using-image-based-prototypes\">1. Using Image-Based Prototypes<\/h2>\n\n\n\n<p>Whether you&#8217;re an early-stage startup or part of an enterprise software development team, design handoffs are often a time of friction between designers and engineers. One of the biggest causes for this tension is prototype fidelity.<\/p>\n\n\n\n<p>Image-based design tools produce poor prototypes that lack fidelity and functionality, making them hard to interpret and understand\u2013<em>for engineers, stakeholders, and usability participants.<\/em><\/p>\n\n\n\n<p>Design teams have two options:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Collaborate with front-end designers or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-engineer\/\">UX en<\/a><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-engineer\/\" target=\"_blank\" rel=\"noreferrer noopener\">g<\/a><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-engineer\/\">ineers<\/a> to build better <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-prototype-a-guide-to-functional-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">prototypes<\/a><\/li><li>Switch to a <a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">code-based design tool<\/a><\/li><\/ol>\n\n\n\n<p>The latter is a better solution because it removes reliance on engineering teams, significantly enhances prototyping capabilities, improves testing, and facilitates better designer\/developer collaboration for smoother design handoffs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-collaboration-comment-mobile-design.png\" alt=\"uxpin collaboration comment mobile design\" class=\"wp-image-35362\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-collaboration-comment-mobile-design.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-collaboration-comment-mobile-design-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-benefits-of-using-a-code-based-design-tool\">The benefits of using a code-based design tool<\/h3>\n\n\n\n<p>UXPin&#8217;s code-based design tool enables designers to build prototypes that accurately replicate the final product experience.&nbsp;<\/p>\n\n\n\n<p>Engineers and stakeholders never have to &#8220;imagine&#8221; doing something because UXPin&#8217;s fully interactive prototypes provide an experience comparable to code.<\/p>\n\n\n\n<p>Here are four UXPin features that enhance prototyping:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\/\" target=\"_blank\" rel=\"noreferrer noopener\">States<\/a>: Apply multiple states to a single element or component, each with different properties, interactions, and animations.<\/li><li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Interactions<\/a>: Create complex interactions with advanced <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#animations\" target=\"_blank\" rel=\"noreferrer noopener\">animations<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">conditional formatting<\/a> for dynamic user experiences.<\/li><li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a>: Capture and store user inputs and use that information to take actions or personalize a product flow.<\/li><li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Expressions<\/a>: Create fully functioning forms, validate passwords, update shopping carts, and more with Javascript-like functions.<\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to discover these and other advanced UXPin features.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-2-not-clarifying-design-decisions\">2. Not Clarifying Design Decisions<\/h2>\n\n\n\n<p>One of the biggest mistakes designers can make is not clarifying the <strong><em>why<\/em><\/strong> behind design decisions. How can engineers understand or empathize when they don&#8217;t know what user problems you&#8217;re trying to solve?<\/p>\n\n\n\n<p>The key to clarifying design decisions is to be proactive. Get developers involved throughout the design process and avoid design handoff surprises.<\/p>\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\/2022\/10\/designops-picking-tools-options.png\" alt=\"designops picking tools options\" class=\"wp-image-37016\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/designops-picking-tools-options.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/designops-picking-tools-options-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/uxdesign.cc\/how-designers-and-engineers-can-collaborate-closer-and-build-better-digital-products-508e5f27134b\" target=\"_blank\" rel=\"noreferrer noopener\">Designer and business leader Antonia Horvath offers excellent advice<\/a> for improving collaboration and including engineers in design decisions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Dev\/design pairing:<\/strong> designers watch engineers build a feature after <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoff<\/a> to understand the process and observe engineering challenges. Ideally, this process works best in person, with both team members in front of the same screen asking and answering questions live.<\/li><li><strong>Ideate together:<\/strong> bringing engineers into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-thinking-ideation\/\" target=\"_blank\" rel=\"noreferrer noopener\">ideation sessions<\/a> allows them to understand the thought process behind design decisions while leveraging their technical know-how to improve ideas.<\/li><li><strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-design-critique\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design critiques<\/a>:<\/strong> traditionally a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-team-rituals\/\" target=\"_blank\" rel=\"noreferrer noopener\">design team ritual<\/a>, but including engineers in the odd critique can bring new ideas from a fresh perspective. Engineers also benefit by understanding the design thinking process behind decision-making.<\/li><li><strong>Designer\/engineer retrospectives:<\/strong> an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/agile-vs-scrum-vs-kanban\/\" target=\"_blank\" rel=\"noreferrer noopener\">agile software development<\/a> practice where teams reflect on outcomes from each iteration and discuss improvements. Designers and engineers can conduct retrospectives at the end of every release to identify design handoff&#8217;s pain points and solutions.\u00a0<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-not-educating-engineers-about-user-experience\">3. Not Educating Engineers About User Experience<\/h2>\n\n\n\n<p>Contrary to popular belief, UX teams are not solely responsible for a product&#8217;s user experience\u2013<strong>it&#8217;s the entire organization&#8217;s responsibility<\/strong>. However, without effective <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-design-advocacy\/\" target=\"_blank\" rel=\"noreferrer noopener\">design advocacy<\/a> driven by UX designers, <strong>no one willingly learns about user experience<\/strong>.<\/p>\n\n\n\n<p>As Erica Rider, UX Lead EPX at PayPal, pointed out at <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/introducing-merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Value Conference 2022<\/a>, <em>&#8220;<\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designops-with-engineers\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>companies have a significant control\/accountability imbalance<\/em><\/a><em>.&#8221;<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>UX designers have zero control<\/strong> over UX delivered to users but <strong>100% accountability<\/strong>.<\/li><li><strong>Engineers have zero accountability<\/strong> for UX delivered to users but <strong>100% control<\/strong>.<\/li><\/ul>\n\n\n\n<p>The UX team&#8217;s role is to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-design-advocacy\/\" target=\"_blank\" rel=\"noreferrer noopener\">educate engineers about user experience<\/a> and for both departments to share the responsibility.<\/p>\n\n\n\n<p>Erica has developed systems to ensure <em>&#8220;the UX team works with engineers to deliver a good user experience at PayPal, but the engineers are accountable for the final product.&#8221;<\/em><\/p>\n\n\n\n<p>One of the biggest hurdles is a shift in thinking. Everyone outside of UX thinks the designer&#8217;s role is aesthetics and UI design.<\/p>\n\n\n\n<p>Erica&#8217;s education methodology was to shift engineers thinking of user experience away from aesthetically-pleasing user interfaces to problems that cause bottlenecks and roadblocks over which engineers have absolute control. Some examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Latency:<\/strong> If you click a button and it takes too long to load, that&#8217;s a poor user experience.<\/li><li><strong>Availability:<\/strong> If a URL doesn&#8217;t load, that&#8217;s a poor user experience.<\/li><li><strong>Security:<\/strong> If someone hacks my account, that&#8217;s a really bad user experience!<\/li><li><strong>Error messages that are not &#8220;human-readable&#8221; or have no way for the user to resolve them:<\/strong> <em>&#8220;Error Code 1578-B1273 \u2013 FAILED!&#8221;<\/em> Why do you show users this message without telling them what it means or how to fix it? Another poor user experience.<\/li><\/ul>\n\n\n\n<p>Developing an organization-wide user experience mindset (starting with engineers) will increase empathy for users while sharing the responsibility.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"DesignOps 2.0 \u2013 Scaling Design | Design Value Conference 2022\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/riMxjwv-X-o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\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-4-not-sharing-user-research-findings\">4. Not Sharing User Research Findings<\/h2>\n\n\n\n<p><a href=\"https:\/\/uxtools.co\/blog\/what-developers-need-from-ux-research\/\" target=\"_blank\" rel=\"noreferrer noopener\">In a UX Tools article<\/a>, Taylor Palmer shares insights from interviews with engineers about <em>&#8220;how user research helps them create better experiences.&#8221;<\/em><\/p>\n\n\n\n<p>Engineers care about user research because it helps them understand design decisions and, as one developer puts it, <em>&#8220;make sure we&#8217;re building the right thing.&#8221;<\/em>&nbsp;<\/p>\n\n\n\n<p>Developers don&#8217;t need access to the design team&#8217;s entire user research archives, nor do they have time to sit in user interviews. They prefer summaries, notes, and recorded interviews.\u00a0<\/p>\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<h3 class=\"wp-block-heading\" id=\"h-how-to-share-user-research-with-engineering-teams\">How to share user research with engineering teams<\/h3>\n\n\n\n<p><a href=\"https:\/\/uxtools.co\/blog\/what-developers-need-from-ux-research\/#making-research-accessible-to-engineers\" target=\"_blank\" rel=\"noreferrer noopener\">Taylor Palmer put together a list of ideas<\/a> for sharing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-research-methods-use-cases\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX research<\/a> with engineers:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Meetings to share research projects and insights<\/li><li>Linking design files with research summaries so engineers can understand the &#8220;why&#8221;<\/li><li>Creating an open-door policy for interviews and usability studies<\/li><li>Getting feedback on all <a href=\"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX artifacts<\/a>, including wireframes, mockups, and prototypes (low and high-fidelity)<\/li><li>Creating and sharing your <a href=\"https:\/\/uxtools.co\/blog\/how-to-maximize-the-user-research-youre-already-doing\/#documenting\" target=\"_blank\" rel=\"noreferrer noopener\">internal research repository<\/a>\u2013over and above summaries so engineers can delve deeper into research if necessary<\/li><li>Sharing notes from design meetings and ideation sessions<\/li><li>Creating a regular user experience newsletter<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-5-not-having-a-single-source-of-truth\">5. Not Having a Single Source of Truth<\/h2>\n\n\n\n<p>One of the most significant challenges for product development teams is overcoming the disconnect between designers and engineers.<\/p>\n\n\n\n<p>Designers and engineers speak different languages without a single source of truth from a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">fully integrated design system<\/a>. <em>The results?<\/em>\u00a0<\/p>\n\n\n\n<p>Poor collaboration, design drift, friction, and other negative consequences adversely impact user experience and product quality.<\/p>\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\/2022\/10\/design-system-components.png\" alt=\"design system components\" class=\"wp-image-37014\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/design-system-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/design-system-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-create-a-single-source-of-truth\">How to create a single source of truth<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Creating a design system<\/a> doesn&#8217;t guarantee you&#8217;ll have a single source of truth. Traditional methods for building design systems mean designers and engineers use separate &#8220;truths.&#8221;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Designers use a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/#h-what-is-a-ui-kit\" target=\"_blank\" rel=\"noreferrer noopener\">UI kit<\/a> or image-based design system<\/li><li>Engineers use a code <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a><\/li><\/ul>\n\n\n\n<p>Of the four stages of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system maturity<\/a>, this is stage three. Getting to stage four requires a tool to bridge the gap between design and development, where <strong>designers and engineers use the same component library<\/strong>.<\/p>\n\n\n\n<p>Nick Elliott, Design System Product Owner and Regional Head of Product Design at <a href=\"https:\/\/www.iress.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Iress<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">refers to stage four as <strong><em>fully integrated<\/em><\/strong><\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Design in (no) code:<\/strong> designers drag and drop to build UIs using code components from a repository\u2013<em>no designing from scratch<\/em>.<\/li><li><strong>No design drift:<\/strong> UX teams, product designers, and engineers use the <strong>exact<\/strong> same components resulting in zero drift and less UX\/front-end debt.<\/li><li><strong>Consistent design:<\/strong> components include properties and interactivity defined by the design system, so designers don&#8217;t have to think about colors, typography, states, etc.<\/li><li><strong>Seamless (no) handover:<\/strong> engineers already have <strong>exact<\/strong> copies of every component used for prototypes. It&#8217;s a matter of copying and pasting from the repository for front-end development, <strong>reducing the need to write code<\/strong>.<\/li><\/ul>\n\n\n\n<p>Iress used <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> to sync design and development. Merge pulls Iress&#8217; component library from a repository into UXPin so designers can build code-based prototypes that look and feel like the final product\u2013<em>and designers don&#8217;t need to see or write any code!<\/em><\/p>\n\n\n\n<p>This shared single source of truth means designers and engineers speak the same language and work within the same technical constraints. Reducing friction and streamlining workflows in the process. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page for more details<\/a> and how to request access.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-uxpin-merge-syncs-design-and-development-for-better-collaboration\">How UXPin Merge Syncs Design and Development for Better Collaboration<\/h2>\n\n\n\n<p>You&#8217;ve heard the results, but how does UXPin Merge work? Merge allows organizations to sync their design system from a repository to UXPin&#8217;s design editor.<\/p>\n\n\n\n<p>Organizations can connect a React design system directly to UXPin using the <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git Integration<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a> for other front-end technologies, including React, Angular, Vue, Ember, and HTML, to name a few.<\/p>\n\n\n\n<p>The component library appears in UXPin&#8217;s left sidebar for designers to drag elements onto the canvas to begin prototyping. Each UI component includes properties defined by the design system, like colors, sizing, typography, states, etc.<\/p>\n\n\n\n<p>Designers can switch between these using dropdowns and selectors in the <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a>. Any changes render as JSX, making it easy for engineers to copy and paste to begin the development process.<\/p>\n\n\n\n<p>Get your entire product development team to speak the same language with a code-based design solution from UXPin Merge. <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 to this revolutionary technology.<\/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>We&#8217;ve looked at how to make it easier for designers and developers to work together. But what roadblocks and workflows work against this collaboration? We&#8217;ve researched common mistakes design teams and product managers make when working with software engineers and how they can collaborate better. Reducing friction and roadblocks creates a smoother product development process<\/p>\n","protected":false},"author":3,"featured_media":37374,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,183,441],"tags":[],"class_list":["post-37373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-design-leadership","category-front-end"],"yoast_title":"5 Mistakes that Kill Design-Development Collaboration","yoast_metadesc":"Learn what you need to avoid if you want a thriving collaboration between your designers and devs. Here are 5 mistakes that destroy it.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Mistakes that Kill Design-Development Collaboration<\/title>\n<meta name=\"description\" content=\"Learn what you need to avoid if you want a thriving collaboration between your designers and devs. Here are 5 mistakes that destroy it.\" \/>\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\/mistakes-that-kill-collaboration-between-designers-and-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Mistakes that Kill Collaboration Between Designers and Developers\" \/>\n<meta property=\"og:description\" content=\"Learn what you need to avoid if you want a thriving collaboration between your designers and devs. Here are 5 mistakes that destroy it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-02T09:04:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/How-do-product-designers-work-with-engineers.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=\"8 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\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"5 Mistakes that Kill Collaboration Between Designers and Developers\",\"datePublished\":\"2022-11-02T09:04:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/\"},\"wordCount\":1604,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/How-do-product-designers-work-with-engineers.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Design Leadership\",\"Front-End\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/\",\"name\":\"5 Mistakes that Kill Design-Development Collaboration\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/How-do-product-designers-work-with-engineers.png\",\"datePublished\":\"2022-11-02T09:04:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn what you need to avoid if you want a thriving collaboration between your designers and devs. Here are 5 mistakes that destroy it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/How-do-product-designers-work-with-engineers.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/How-do-product-designers-work-with-engineers.png\",\"width\":1200,\"height\":600,\"caption\":\"How do product designers work with engineers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mistakes-that-kill-collaboration-between-designers-and-developers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Mistakes that Kill Collaboration Between Designers and Developers\"}]},{\"@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":"5 Mistakes that Kill Design-Development Collaboration","description":"Learn what you need to avoid if you want a thriving collaboration between your designers and devs. Here are 5 mistakes that destroy it.","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\/mistakes-that-kill-collaboration-between-designers-and-developers\/","og_locale":"en_US","og_type":"article","og_title":"5 Mistakes that Kill Collaboration Between Designers and Developers","og_description":"Learn what you need to avoid if you want a thriving collaboration between your designers and devs. Here are 5 mistakes that destroy it.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/","og_site_name":"Studio by UXPin","article_published_time":"2022-11-02T09:04:00+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/How-do-product-designers-work-with-engineers.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"5 Mistakes that Kill Collaboration Between Designers and Developers","datePublished":"2022-11-02T09:04:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/"},"wordCount":1604,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/How-do-product-designers-work-with-engineers.png","articleSection":["Blog","Collaboration","Design Leadership","Front-End"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/","name":"5 Mistakes that Kill Design-Development Collaboration","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/How-do-product-designers-work-with-engineers.png","datePublished":"2022-11-02T09:04:00+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn what you need to avoid if you want a thriving collaboration between your designers and devs. Here are 5 mistakes that destroy it.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/How-do-product-designers-work-with-engineers.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/11\/How-do-product-designers-work-with-engineers.png","width":1200,"height":600,"caption":"How do product designers work with engineers"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mistakes-that-kill-collaboration-between-designers-and-developers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"5 Mistakes that Kill Collaboration Between Designers and Developers"}]},{"@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\/37373","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=37373"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37373\/revisions"}],"predecessor-version":[{"id":37377,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/37373\/revisions\/37377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37374"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=37373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=37373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=37373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}