{"id":35731,"date":"2022-07-13T23:40:00","date_gmt":"2022-07-14T06:40:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=35731"},"modified":"2024-06-12T20:37:10","modified_gmt":"2024-06-13T03:37:10","slug":"fighting-front-end-debt","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/","title":{"rendered":"How to Help Fight Front-end Debt as a Designer?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer-1024x512.png\" alt=\"Enterprise DS Webinar How to Help Fight Front end Debt as a Designer\" class=\"wp-image-35732\" width=\"840\" height=\"420\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png 1200w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Designers and engineers must understand each other&#8217;s challenges and work together to solve them. Designers want the entire product development team to understand user experience and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stages-design-thinking-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">design thinking<\/a>, while engineers need team members to help fight front-end debt.<\/p>\n\n\n\n<p>This article explores front-end debt, common solutions to the problem, and how design teams can assist engineers in reducing it. We also demonstrate how Delivery Hero used front-end debt as a business case for developing their design system\u2013thus enhancing the product development process for designers and engineers.<\/p>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-what-is-front-end-debt\" data-level=\"2\">What is Front-End Debt?<\/a><ul><li><a href=\"#h-front-end-debt-vs-design-debt\" data-level=\"3\">Front-End Debt vs. Design Debt<\/a><\/li><\/ul><\/li><li><a href=\"#h-how-do-devs-prevent-manage-front-end-debt\" data-level=\"2\">How do Devs Prevent &amp; Manage Front-End Debt?<\/a><ul><li><a href=\"#h-educate-teams\" data-level=\"3\">Educate Teams<\/a><\/li><li><a href=\"#h-set-engineering-standards\" data-level=\"3\">Set Engineering Standards<\/a><\/li><li><a href=\"#h-track-document-everything\" data-level=\"3\">Track &amp; Document Everything<\/a><\/li><li><a href=\"#h-adhere-to-project-deadlines\" data-level=\"3\">Adhere to Project Deadlines<\/a><\/li><li><a href=\"#h-automate-testing\" data-level=\"3\">Automate Testing<\/a><\/li><li><a href=\"#h-implement-a-design-system\" data-level=\"3\">Implement a Design System<\/a><\/li><\/ul><\/li><li><a href=\"#h-how-designers-can-help-prevent-front-end-debt\" data-level=\"2\">How Designers Can Help Prevent Front-End Debt<\/a><ul><li><a href=\"#h-understand-front-end-limitations\" data-level=\"3\">Understand Front-End Limitations<\/a><\/li><li><a href=\"#h-collaborate-early-often\" data-level=\"3\">Collaborate Early &amp; Often<\/a><\/li><li><a href=\"#h-use-code-based-vs-vector-based-design-tools\" data-level=\"3\">Use Code-Based vs. Vector-Based Design Tools<\/a><\/li><li><a href=\"#h-advocate-for-a-fully-integrated-design-system\" data-level=\"3\">Advocate for a Fully Integrated Design System<\/a><\/li><\/ul><\/li><li><a href=\"#h-building-a-business-case-for-a-design-system\" data-level=\"1\">Building a Business Case for a Design System<\/a><\/li><\/ul><\/div>\n\n\n\n<p>Reduce technical debt with a single source of truth between design and development using UXPin Merge. Explore Merge how it can keep unity across the organization, fight front-end debt, and speed up your product development process. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin&#8217;s Merge technology<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-front-end-debt\">What is Front-End Debt?<\/h2>\n\n\n\n<p>Front-end or technical debt is the accumulated development work due to workarounds and shortcuts to meet project deadlines. These short-term solutions allow engineers to ship products faster, but the fixes collect in a backlog as &#8220;debt.&#8221;<\/p>\n\n\n\n<p>Like financial debt, if engineering teams don&#8217;t manage technical debt properly, it can have devastating consequences for the product, user experience, and organization.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-front-end-debt-vs-design-debt\">Front-End Debt vs. Design Debt<\/h3>\n\n\n\n<p>Design debt is the required UX practices (research, design, testing, etc.) designers skip meeting project deadlines. For example, the design team implements a new <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI pattern<\/a> but doesn&#8217;t have time to test it adequately, not knowing its impact on usability, accessibility, etc.<\/p>\n\n\n\n<p>If your product doesn&#8217;t have a design system, design debt results in many UI inconsistencies, like color, typography, UI patterns, layouts, etc. Design inconsistencies (no matter how small) create a negative user experience and damage the brand.<\/p>\n\n\n\n<p>These small design debts compound to create significant usability issues. When paired with technical debt, it can be challenging to pinpoint the root cause, impacting workflows, releases, users, and revenue.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-do-devs-prevent-manage-front-end-debt\">How do Devs Prevent &amp; Manage Front-End Debt?<\/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\/2022\/05\/designops-picking-tools-care.png\" alt=\"designops picking tools care\" class=\"wp-image-35247\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/designops-picking-tools-care.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/designops-picking-tools-care-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>It&#8217;s important to note that technical debt is a product of programming, and some debt is unavoidable. The secret is not to eliminate debt but to prevent unnecessary backlogs.<\/p>\n\n\n\n<p>Established companies and enterprise organizations have the staff and resources to employ a dedicated technical debt team. For cash-strapped startups and smaller companies, prevention is always better than cure. Here are some tips to prevent and manage front-end debt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-educate-teams\">Educate Teams<\/h3>\n\n\n\n<p>The first step to minimizing front-end debt is to educate teams about its impact. Engineers, product teams, and UX designers must understand front-end debt, how it compounds, its adverse effects, and how each department can do its part.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-set-engineering-standards\">Set Engineering Standards<\/h3>\n\n\n\n<p>Every organization (including startups) must implement programming standards and best practices. Engineers must write uniform code and follow company protocols for workflows, documentation, and releases.<\/p>\n\n\n\n<p>These standards will prevent sloppy work and reduce accidental debt from accumulating.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-track-document-everything\">Track &amp; Document Everything<\/h3>\n\n\n\n<p>When engineers incur front-end debt, they must track and document it thoroughly, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add a job to the backlog (Jira, Trello, etc.)<\/li><li>Describe the reason(s) for incurring debt<\/li><li>Outline what the team should have done<\/li><li>Provide a roadmap to fix the problem<\/li><\/ul>\n\n\n\n<p>This documentation will streamline fixes and save time. Like debt, these small time savings compound to minimize costs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adhere-to-project-deadlines\">Adhere to Project Deadlines<\/h3>\n\n\n\n<p>Team members and stakeholders must adhere to project deadlines and avoid schedule changes that force engineers into unrealistic timelines. These changes often shift resources, creating a domino effect of backlog debt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-automate-testing\">Automate Testing<\/h3>\n\n\n\n<p>Taking time to write automated tests for your product&#8217;s common programming errors is an excellent debt prevention strategy. Engineers must get into the habit of writing tests when they find bugs to eliminate future recurring debt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-implement-a-design-system\">Implement a Design System<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design systems<\/a> are highly effective for reducing front-end debt while enhancing consistency and collaboration between designers and engineers.<\/p>\n\n\n\n<p>An approved, standardized <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a> gives engineers a foundation to write less front-end code, thus reducing errors and increasing productivity.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-designers-can-help-prevent-front-end-debt\">How Designers Can Help Prevent Front-End Debt<\/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\/02\/responsive-screens.png\" alt=\"responsive screens\" class=\"wp-image-33970\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/responsive-screens.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/responsive-screens-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Design and product teams also have a responsibility to reduce front-end debt. Here are some tips to minimize front-end debt during the design process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-understand-front-end-limitations\">Understand Front-End Limitations<\/h3>\n\n\n\n<p>It&#8217;s crucial for design and product teams to understand their product&#8217;s technical limitations and constraints. Working within these constraints streamlines <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoffs<\/a> and reduces any new code engineers must write to complete projects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-collaborate-early-often\">Collaborate Early &amp; Often<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-developers-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Designer\/engineer collaboration<\/a> must start early in the design process rather than only at handoffs. This communication helps designers and engineers understand each other&#8217;s challenges, allowing them to offer appropriate solutions.<\/p>\n\n\n\n<p>For example, engineers might have a solution to a usability issue that&#8217;s better for designers and reduces development time for engineers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-code-based-vs-vector-based-design-tools\">Use Code-Based vs. Vector-Based Design Tools<\/h3>\n\n\n\n<p>One of the biggest challenges between design and development is that designers and engineers speak different languages and work within different constraints.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Code-based design tools like UXPin<\/a> enable designers to build fully functioning, high-fidelity prototypes. Instead of using GIFs, animated videos, and other workarounds to replicate code, UXPin prototypes look and function like the final product.<\/p>\n\n\n\n<p>Moreover, its Merge technology allows you to import UI components from Git, Storybook, and npm repository, so that you use the exact building blocks of your product. Read more about it: <em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\">What is UXPin Merge and how does it work?<\/a><\/em><\/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\/02\/uxpin-merge-comparison-1.png\" alt=\"uxpin merge comparison 1\" class=\"wp-image-33988\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-advocate-for-a-fully-integrated-design-system\">Advocate for a Fully Integrated Design System<\/h3>\n\n\n\n<p>In his article <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">Re-Imagining Iress Design Tools<\/a>, Design System Product Owner at Iress, Nick Elliott describes 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> and how his team used <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> to develop a fully integrated design system.<\/p>\n\n\n\n<p>A fully integrated design system uses a single component library for design and development. Designers drag and drop to build prototypes, and engineers copy\/paste code to develop the final product. There&#8217;s no designing from scratch and no writing front-end code.<\/p>\n\n\n\n<p>While this scenario might seem hard to believe, enterprise organizations like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">Iress<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paypal-scaled-design-process-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">PayPal<\/a> use UXPin Merge to ship products with minimal new design or code. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> and explore how Merge works with our <a href=\"https:\/\/www.uxpin.com\/merge\/mui-library\" target=\"_blank\" rel=\"noreferrer noopener\">MUI integration<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-building-a-business-case-for-a-design-system\">Building a Business Case for a Design System<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/webinars\/enterprise-design-system-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin recently hosted a webinar with Amber Jabeen<\/a>, DesignOps Director at Delivery Hero (talabat). During her talk, Amber discussed how her team collaborated with an engineer to build a business case for a design system.<\/p>\n\n\n\n<p>Amber&#8217;s team started by auditing releases over a few months, comparing designs to the final release. Their research showed that every Delivery Hero project release incurred front-end debt, costing the company significant time and resources.<\/p>\n\n\n\n<p>Amber&#8217;s team found that most of this debt was due to design drift. They ran an experiment to create a UI with vs. without a design system. The results showed a 57% saving on time-to-market with <strong>zero debt<\/strong>. Amber used this data for her business case and got the go-ahead to build Delivery Hero&#8217;s Marshmallow design system.<\/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=\"Enterprise Design System \u2013 How to Build and Scale Webinar\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/in4axiKk-uE?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\">Fight Front-End Debt with UXPin Merge<\/h2>\n\n\n\n<p>How can you ensure that you don&#8217;t acquire front-end debt in the future? One of the ways is using the design tools that enhance the collaboration between designers and engineers. UXPin powered with Merge technology allows you to use the exact UI elements that your devs use to build products at the prototyping stage.<\/p>\n\n\n\n<p>Since you are designing with the building blocks of your app or website, your engineers have an easier job with developing your designs and not recreating the same components over and over again. They can release products faster while staying consistent with the design. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to Merge to explore its powerful features<\/a>.<\/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 and engineers must understand each other&#8217;s challenges and work together to solve them. Designers want the entire product development team to understand user experience and design thinking, while engineers need team members to help fight front-end debt. This article explores front-end debt, common solutions to the problem, and how design teams can assist engineers<\/p>\n","protected":false},"author":3,"featured_media":35732,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,199,441],"tags":[],"class_list":["post-35731","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-design-systems","category-front-end"],"yoast_title":"","yoast_metadesc":"Discover tips and tricks that will help you eliminate front-end debt and convince stakeholders that you need to get rid of it. Read more.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Help Fight Front-end Debt as a Designer? | UXPin<\/title>\n<meta name=\"description\" content=\"Discover tips and tricks that will help you eliminate front-end debt and convince stakeholders that you need to get rid of it. Read more.\" \/>\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\/fighting-front-end-debt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Help Fight Front-end Debt as a Designer?\" \/>\n<meta property=\"og:description\" content=\"Discover tips and tricks that will help you eliminate front-end debt and convince stakeholders that you need to get rid of it. Read more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-14T06:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T03:37:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.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=\"7 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\\\/fighting-front-end-debt\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How to Help Fight Front-end Debt as a Designer?\",\"datePublished\":\"2022-07-14T06:40:00+00:00\",\"dateModified\":\"2024-06-13T03:37:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/\"},\"wordCount\":1349,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Design Systems\",\"Front-End\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/\",\"name\":\"How to Help Fight Front-end Debt as a Designer? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png\",\"datePublished\":\"2022-07-14T06:40:00+00:00\",\"dateModified\":\"2024-06-13T03:37:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Discover tips and tricks that will help you eliminate front-end debt and convince stakeholders that you need to get rid of it. Read more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png\",\"width\":1200,\"height\":600,\"caption\":\"Enterprise DS Webinar How to Help Fight Front end Debt as a Designer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/fighting-front-end-debt\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Help Fight Front-end Debt as a Designer?\"}]},{\"@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":"How to Help Fight Front-end Debt as a Designer? | UXPin","description":"Discover tips and tricks that will help you eliminate front-end debt and convince stakeholders that you need to get rid of it. Read more.","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\/fighting-front-end-debt\/","og_locale":"en_US","og_type":"article","og_title":"How to Help Fight Front-end Debt as a Designer?","og_description":"Discover tips and tricks that will help you eliminate front-end debt and convince stakeholders that you need to get rid of it. Read more.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/","og_site_name":"Studio by UXPin","article_published_time":"2022-07-14T06:40:00+00:00","article_modified_time":"2024-06-13T03:37:10+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How to Help Fight Front-end Debt as a Designer?","datePublished":"2022-07-14T06:40:00+00:00","dateModified":"2024-06-13T03:37:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/"},"wordCount":1349,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png","articleSection":["Blog","Collaboration","Design Systems","Front-End"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/","name":"How to Help Fight Front-end Debt as a Designer? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png","datePublished":"2022-07-14T06:40:00+00:00","dateModified":"2024-06-13T03:37:10+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Discover tips and tricks that will help you eliminate front-end debt and convince stakeholders that you need to get rid of it. Read more.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/Enterprise-DS-Webinar-How-to-Help-Fight-Front-end-Debt-as-a-Designer.png","width":1200,"height":600,"caption":"Enterprise DS Webinar How to Help Fight Front end Debt as a Designer"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Help Fight Front-end Debt as a Designer?"}]},{"@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\/35731","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=35731"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35731\/revisions"}],"predecessor-version":[{"id":53482,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35731\/revisions\/53482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/35732"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=35731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=35731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=35731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}