CINXE.COM

Approaching the product design process through an engineering lens

<!DOCTYPE html><!-- Last Published: Wed Jan 22 2025 11:29:33 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="www.abstract.com" data-wf-page="643d81ef999b1cff3272acf5" data-wf-site="5ff3926f03b3ba26b7d639cb" lang="en" data-wf-collection="643d81ef999b1c0f7a72acb0" data-wf-item-slug="product-design-process-engineering-lens"><head><meta charset="utf-8"/><title>Approaching the product design process through an engineering lens</title><meta content="Zipper&#x27;s Duretti Hirpa says designers and engineers have more shared values than you may realize" name="description"/><meta content="Approaching the product design process through an engineering lens" property="og:title"/><meta content="Zipper&#x27;s Duretti Hirpa says designers and engineers have more shared values than you may realize" property="og:description"/><meta content="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa.png" property="og:image"/><meta content="Approaching the product design process through an engineering lens" property="twitter:title"/><meta content="Zipper&#x27;s Duretti Hirpa says designers and engineers have more shared values than you may realize" property="twitter:description"/><meta content="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa.png" property="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/css/fs-abstract-v2.c5aefa228.css" rel="stylesheet" type="text/css"/><style>@media (min-width:992px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="e645997a-582c-32f9-dae2-3b56e221dbc0"] {display:none;opacity:0;}}@media (max-width:991px) and (min-width:768px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="e645997a-582c-32f9-dae2-3b56e221dbc0"] {display:none;opacity:0;}}</style><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/5ff3926f03b3bac721d639f4_favicon-small.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/5ff3926f03b3baa809d639fc_favicon.png" rel="apple-touch-icon"/><link href="rss.xml" rel="alternate" title="RSS Feed" type="application/rss+xml"/><script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script><!-- Iubenda --> <script type="text/javascript"> var _iub = _iub || []; _iub.csConfiguration = {"consentOnScroll":false,"whitelabel":false,"lang":"en","siteId":1889649,"cookiePolicyId":91605901,"cookiePolicyUrl":"https://www.abstract.com/legal/cookie-policy/", "banner":{ "acceptButtonDisplay":true,"acceptButtonColor":"#ffffff","acceptButtonCaptionColor":"#191a1b","rejectButtonColor":"#0073CE","rejectButtonCaptionColor":"white","position":"float-bottom-left","textColor":"white","backgroundColor":"#242424","content":"We use cookies to collect and analyze information on site performance and usage, and to enhance and customize content and advertisements. To find out more or to change your cookie settings, please visit our <a href=\"https://www.abstract.com/legal/cookie-policy/\">Cookie Policy</a>." }}; </script> <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script> <script> !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.13.1"; analytics.load("Ro3i6wRonikkJnYwYzAGOAuFmaQQHQx4"); analytics.page(); }}(); </script> <!-- Customer IO Tag --> <script type="text/javascript"> (function() { var t = document.createElement('script'), s = document.getElementsByTagName('script')[0]; t.async = true; t.id = 'cio-forms-handler'; t.setAttribute('data-site-id', '80a43a6f3aab248f9bec'); t.setAttribute('data-base-url', 'https://customerioforms.com'); t.src = 'https://customerioforms.com/assets/forms.js'; s.parentNode.insertBefore(t, s); })(); </script> <style> /* Remove tap highlight on mobile */ input, textarea, button, select, a { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } /*smoother text*/ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: optimizeLegibility; } /*make inputs unstyled in safari*/ textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], { -webkit-appearance: none; } /* Get rid of textarea resizer */ textarea { resize: none } </style><meta content="Approaching the product design process through an engineering lens" property="twitter:title"> <meta content="Zipper&#39;s Duretti Hirpa says designers and engineers have more shared values than you may realize" property="twitter:description"> <meta content="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa.png" property="twitter:image"> <meta property="og:type" content="website"> <meta content="summary_large_image" name="twitter:card"> <meta property="og:image:alt" content="Approaching the product design process through an engineering lens" /></head><body><div class="custom-styles w-embed"><style> /*set default font*/ html { font-size:16px; } html, body{ height: 100%; } /* Blending modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /*colorize text selection */ ::-moz-selection { /* Firefox */ background: #C9D5D3; } ::selection { background: #C9D5D3; } /*add no events class*/ .no-pointer-events { pointer-events: none; } /*add no select class*/ .no-select { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ } /*make sure the upper headings in rich text blocks are without top margin*/ .rich-text h1:first-child { margin-top: 0; } .rich-text-designis h2:first-child { margin-top: 0; } .rich-text h2:first-child { margin-top: 0; } .rich-text h3:first-child { margin-top: 0; } .rich-text h4:first-child { margin-top: 0; } .rich-text h5:first-child { margin-top: 0; } .rich-text h6:first-child { margin-top: 0; } .rich-text figure:first-child { margin-top: 0; } /*make last elements in rich text to be marginless*/ .rich-text p:last-child { margin-bottom: 0; } .rich-text-designis p:last-child { margin-bottom: 0; } .rich-text blockquote:last-child { margin-bottom: 0; } .rich-text ol:last-child { margin-bottom: 0; } .rich-text ul:last-child { margin-bottom: 0; } .rich-text ol li:last-child { margin-bottom: 0; } .rich-text ul li:last-child { margin-bottom: 0; } .rich-text blockquote:before { content: '\201C'; position: absolute; top: 0; left: -0.4em; text-align: right; } .rich-text blockquote:after { content: '\201D'; } /*reset selects, buttons, and links*/ .w-input, .w-select, a { color: inherit; text-decoration: inherit; font-size: inherit; } .text-highlight a { color: inherit; text-decoration: none; cursor: inherit; } .text-highlight a:hover { color: inherit; text-decoration: none; } .w-select { /* resetting default form style for custom icon*/ -moz-appearance: none; -webkit-appearance: none; appearance: none; background-position: right 0.5rem center !important; } .block-quote:before { content: '\201C'; position: absolute; top: 0; left: -0.4em; text-align: right; } .text-gtsuper { font-variant-numeric: lining-nums; } .break-text { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } ol.decimal li:before { counter-increment: item; content: counters(item, ".") " "; display: inline-block; margin-right: 1rem; font-weight: 700; } ol.decimal li:first-child { counter-reset: item; } ol.lower-latin>li, ol.lower-latin>li>ol>li { list-style: lower-latin; list-style-position: inside; } ol.lower-latin>li:before, ol.lower-latin>li>ol>li:before { display: none; content: ""; margin: 0; } ol.decimal ol.lower-latin li { list-style: lower-latin; list-style-position: inside; } ol.decimal ul>li:before { display: none; } ol.lower-latin ol.lower-roman li { list-style: lower-roman; list-style-position: inside; } .r-item-info, .r-main-item-img, .r-grid-hover { transition: transform 700ms cubic-bezier(0.8,0,0.2,1) 0ms; } .r-grid-blocks-list .r-grid-block:nth-child(7n-13), .r-grid-blocks-list .r-grid-block:nth-last-child(1):nth-child(odd){ width: 100%; padding-top: 50%; } .cs-form-wrapper { transition: opacity 350ms linear 0ms; } .cs-form-close, .cs-form-open { cursor: pointer; } .cs-form-wrapper.active { display: flex; opacity: 1; transition: opacity 350ms linear 0ms; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; } .cs-form-group label { transition: all 200ms ease-in-out 0ms; } .cs-form-group label.active { font-size: 12px; top: 10px; } .cs-form-group label.focused { color: #4C5FD5; } .cs-form-highlight.active { transition: width 100ms cubic-bezier(.7,0,.3,1) 0ms; } .cs-form-highlight.active { width: 100%; transition: width 300ms cubic-bezier(.7,0,.3,1) 0ms; } .cs-form-text-area { resize: vertical; height: 48px; } .cs-form-field { font-size: 16px } .cs-form-label { user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; pointer-events:none; } .r-marquee-link-block { position: relative; overflow: hidden; } .r-marquee-item-block { width: auto; display: flex; position: relative; --offset: 100%; --move-initial: 0; --move-final: calc(-200% + var(--offset)); transform: translate3d(0,0,0); transform: translate3d(var(--move-initial), 0, 0); animation: marquee 10s linear infinite; animation-play-state: running; } @keyframes marquee { 0% { transform: translate3d(var(--move-initial), 0, 0); } 100% { transform: translate3d(var(--move-final), 0, 0); } } </style></div><a id="skip-link" href="#" class="skip-link no-anchor">skip to content<br/></a><section class="cs-form-wrapper"><div class="cs-form-click-away cs-form-close"></div><div class="cs-form-modal"><div class="cs-form w-form"><div class="cs-form-header"><div class="cs-form-title">Contact Sales</div><div class="cs-form-exit cs-form-close"><div class="cs-exit-bar cs-exit-bar-1"></div><div class="cs-exit-bar cs-exit-bar-2"></div></div></div><form id="wf-form-contactSales" name="wf-form-contactSales" data-name="contactSales" method="get" class="cs-form" data-wf-page-id="643d81ef999b1cff3272acf5" data-wf-element-id="2f26523a-676b-0736-1758-07b13c5a20e2"><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="email" data-name="email" placeholder="" type="email" id="email-11" required=""/><label for="Email-11" class="cs-form-label">Email</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="firstName" data-name="firstName" placeholder="" type="text" id="firstName-8" required=""/><label for="First-Name" class="cs-form-label">First name</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="lastName" data-name="lastName" placeholder="" type="text" id="lastName-8" required=""/><label for="Last-Name" class="cs-form-label">Last name</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><input class="cs-form-field w-input" maxlength="256" name="company" data-name="company" placeholder="" type="text" id="company-9" required=""/><label for="Email-11" class="cs-form-label">Company</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><select id="Estimated-Design-Users" name="Est.-Design-Users" data-name="Est. Design Users" required="" class="cs-form-field w-select"><option value="">Select one...</option><option value="100+ contributors">100+ contributors</option><option value="50-99 contributors">50-99 contributors</option><option value="25-49 contributors">25-49 contributors</option><option value="10-24 contributors">10-24 contributors</option></select><label for="" class="cs-form-label">Estimated Contributor Seats</label><div class="cs-form-highlight"></div></div><div class="cs-form-group"><textarea id="comments-7" name="comments" maxlength="5000" data-name="comments" placeholder="" class="cs-form-field cs-form-text-area w-input"></textarea><label for="Email-12" class="cs-form-label">Comments (optional)</label><div class="cs-form-highlight"></div></div><div class="cs-form-section-title">I’d like to learn more about:</div><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="organizingDesigns" type="checkbox" name="organizingDesigns" data-name="organizingDesigns" style="opacity:0;position:absolute;z-index:-1"/><span for="organizingDesigns" class="cs-form-radio-text w-form-label">Organizing designs into projects</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="streamliningReviews" type="checkbox" name="streamliningReviews" data-name="streamliningReviews" style="opacity:0;position:absolute;z-index:-1"/><span for="streamliningReviews" class="cs-form-radio-text w-form-label">Streamlining the review process</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="sharingEvolution" type="checkbox" name="sharingEvolution" data-name="sharingEvolution" style="opacity:0;position:absolute;z-index:-1"/><span for="sharingEvolution" class="cs-form-radio-text w-form-label">Sharing the evolution of designs</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="versionControl" type="checkbox" name="versionControl" data-name="versionControl" style="opacity:0;position:absolute;z-index:-1"/><span for="versionControl" class="cs-form-radio-text w-form-label">Version control for Sketch files</span></label><label class="w-checkbox cs-form-radio-field"><div class="w-checkbox-input w-checkbox-input--inputType-custom cs-form-checkbox"></div><input id="other" type="checkbox" name="other" data-name="other" style="opacity:0;position:absolute;z-index:-1"/><span for="other" class="cs-form-radio-text w-form-label">Other</span></label><div data-sitekey="6LcaaBcqAAAAAHGxbhANyJehugFxM3XEhAlSrzNU" class="w-form-formrecaptcha g-recaptcha g-recaptcha-error g-recaptcha-disabled"></div><input type="submit" data-wait="Please wait..." class="cs-form-submit-btn w-button" value="Submit"/></form><div class="cs-success w-form-done"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/6100656f4aa5c63a91736881_check.svg" loading="lazy" alt="Checkmark Illustration" class="cs-success-img"/><div class="cs-success-headline">Thank you!</div><div class="cs-success-copy">You&#x27;ll hear back from our team shortly.</div><div class="button button-small cs-success-btn cs-form-close">Close Form</div></div><div class="cs-error w-form-fail"><div class="cs-error-message">Oops! Something didn&#x27;t work. Please try again.</div></div></div></div></section><div class="page"><div class="topbar-wrapper"><div class="w-dyn-list"><div class="collection-empty w-dyn-empty"><div>No items found.</div></div></div></div><div class="nav-outer-wrapper"><div class="c-header"><div class="c-section c-section-header"><div class="c-grid c-grid-header"><div id="w-node-d2797371-cb25-451d-99b8-1de0a99b68da-a99b68d7" class="header-logo-container"><a href="/" class="header-logo-link w-inline-block"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/60c388bf3c3ae4d1d10653e7_Abstract_Wordmark-White.svg" loading="lazy" alt="" class="header-logo"/></a></div><div data-w-id="d2797371-cb25-451d-99b8-1de0a99b68f2" class="header-menu-icon"><div class="header-menu-bar header-menu-bar-1"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/61534838ccd7f756b3a17a1e_navbar.svg" loading="lazy" alt="Menu Bar" class="header-menu-bar-img"/></div><div class="header-menu-bar header-menu-bar-2"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/61534838ccd7f756b3a17a1e_navbar.svg" loading="lazy" alt="Menu Bar" class="header-menu-bar-img"/></div><div class="header-menu-bar header-menu-bar-3"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/61534838ccd7f756b3a17a1e_navbar.svg" loading="lazy" alt="Menu Bar" class="header-menu-bar-img"/></div></div><div id="w-node-d2797371-cb25-451d-99b8-1de0a99b68ed-a99b68d7" class="header-cta-container"><a href="https://app.abstract.com/signin" class="c-link c-link-text c-link-text-reverse">Sign in</a></div></div></div><div data-w-id="d2797371-cb25-451d-99b8-1de0a99b68f9" class="c-section c-section-mobile-menu"><div class="c-grid c-grid-header-mobile-nav"><div class="header-mobile-nav"><a href="#" class="header-mobile-nav-link w-inline-block"><div>Notebooks</div></a><a href="/" class="header-mobile-nav-link w-inline-block"><div>Branches</div></a><a href="/pricing" class="header-mobile-nav-link w-inline-block"><div>Pricing</div></a></div><div class="header-mobile-ctas"><a href="https://app.abstract.com/signup" class="c-link c-link-btn c-link-btn-white">Try Notebooks</a><a href="https://app.abstract.com/signin" class="header-mobile-sign-in">Sign in</a></div></div></div></div></div><nav class="blog-navigation"><div class="blog-navigation-main"><div class="section"><div class="container-max"><div class="flex-h-ac-jsb"><div class="heading-blog-nav heading-m"><a href="/blog">Blog</a></div><div class="blog-navigation-right-part"><a href="https://www.abstract.com/category/product" class="blog-nav-category-link bncl-featured w-button">Product</a><a href="/category/inspiration" class="blog-nav-category-link bncl-featured w-button">Inspiration</a><a href="/category/inside-abstract" class="blog-nav-category-link bncl-featured w-button">Inside Abstract</a><a href="/category/customer-stories" class="blog-nav-category-link bncl-featured w-button">Customer Stories</a><div data-hover="false" data-delay="100" data-w-id="7b7e8081-2634-cee2-9ec4-65df3c9426ca" class="blog-nav-category-link bncl-ellipses w-dropdown"><div class="blog-nav-ellipses w-dropdown-toggle"><div class="blog-more-toggle"><div class="more-toggle-dot dot-1"></div><div class="more-toggle-dot dot-2"></div><div class="more-toggle-dot dot-3"></div></div></div><nav class="blog-nav-dropdown w-dropdown-list"><div class="section"><div class="container-max"><div class="w-layout-grid grid-grid g-blog-nav"><div><h1 class="heading-s">Categories</h1><div class="blog-nav-dropdown-list"><div class="space-top-m"><div class="w-dyn-list"><div role="list" class="w-dyn-items"><div role="listitem" class="text-l w-dyn-item"><a href="/category/customer-stories" class="text-link tl-blog-dropdown">Customer Stories</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/category/inside-abstract" class="text-link tl-blog-dropdown">Inside Abstract</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/category/inspiration" class="text-link tl-blog-dropdown">Inspiration</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/category/product" class="text-link tl-blog-dropdown">Product</a></div></div></div></div></div></div><div id="w-node-_7b7e8081-2634-cee2-9ec4-65df3c9426e0-3c9426bc"><h1 class="heading-s">Tags</h1><div class="blog-nav-dropdown-list"><div class="blog-nav-dropdown-gradient-top"><div class="blog-nav-dropdown-gradient bndg-top no-pointer-events"></div></div><div class="space-top-m"><div class="w-dyn-list"><div role="list" class="w-dyn-items"><div role="listitem" class="text-l w-dyn-item"><a href="/tag/branches" class="text-link tl-blog-dropdown">Abstract Branches</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/announcements" class="text-link tl-blog-dropdown">Announcements</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/brand" class="text-link tl-blog-dropdown">Brand</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/career-development" class="text-link tl-blog-dropdown">Career Development</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/champions-toolkit" class="text-link tl-blog-dropdown">Champion&#x27;s Toolkit</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/change-management" class="text-link tl-blog-dropdown">Change Management</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/collaboration" class="text-link tl-blog-dropdown">Collaboration</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/community" class="text-link tl-blog-dropdown">Community</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-leadership" class="text-link tl-blog-dropdown">Design Leadership</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-process" class="text-link tl-blog-dropdown">Design Process</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-reviews" class="text-link tl-blog-dropdown">Design Reviews</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-systems" class="text-link tl-blog-dropdown">Design Systems</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/design-workflow" class="text-link tl-blog-dropdown">Design Workflow</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/designops" class="text-link tl-blog-dropdown">DesignOps</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/developer-handoff" class="text-link tl-blog-dropdown">Developer Handoff</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/enterprise" class="text-link tl-blog-dropdown">Enterprise</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/events" class="text-link tl-blog-dropdown">Events</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/inclusion" class="text-link tl-blog-dropdown">Inclusion</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/libraries" class="text-link tl-blog-dropdown">Libraries</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/linked-libraries" class="text-link tl-blog-dropdown">Linked Libraries</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/open-design" class="text-link tl-blog-dropdown">Open Design</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/overheard" class="text-link tl-blog-dropdown">Overheard</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/by-design" class="text-link tl-blog-dropdown">Podcast</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/projects" class="text-link tl-blog-dropdown">Projects</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/research-ops" class="text-link tl-blog-dropdown">Research Ops</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/sketch" class="text-link tl-blog-dropdown">Sketch</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/tips" class="text-link tl-blog-dropdown">Tips</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/version-control" class="text-link tl-blog-dropdown">Version Control</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/tag/video" class="text-link tl-blog-dropdown">Video</a></div></div></div></div><div class="blog-nav-dropdown-gradient no-pointer-events"></div></div></div><div id="w-node-_7b7e8081-2634-cee2-9ec4-65df3c9426ef-3c9426bc"><h1 class="heading-s">Authors</h1><div class="blog-nav-dropdown-list"><div class="blog-nav-dropdown-gradient-top"><div class="blog-nav-dropdown-gradient bndg-top no-pointer-events"></div></div><div class="space-top-m"><div class="w-dyn-list"><div role="list" class="w-dyn-items"><div role="listitem" class="text-l w-dyn-item"><a href="/author/alden-spence" class="text-link tl-blog-dropdown">Alden Spence</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/alison-harshbarger" class="text-link tl-blog-dropdown">Alison Harshbarger</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/alyshia-olsen" class="text-link tl-blog-dropdown">Alyshia Olsen</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/amy-schroeder" class="text-link tl-blog-dropdown">Amy Schroeder</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/andrea-burton" class="text-link tl-blog-dropdown">Andrea Burton</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/andrew-mccloud" class="text-link tl-blog-dropdown">Andrew McCloud</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/ben-erez" class="text-link tl-blog-dropdown">Ben Erez</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/daina-lightfoot" class="text-link tl-blog-dropdown">Daina Lightfoot</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/david-xie" class="text-link tl-blog-dropdown">David Xie</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/deana-tucker" class="text-link tl-blog-dropdown">Deana Tucker</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/edgardo-perez" class="text-link tl-blog-dropdown">Edgardo Perez</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/hannah-shadrick" class="text-link tl-blog-dropdown">Hannah Shadrick</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/heather-phillips" class="text-link tl-blog-dropdown">Heather Phillips</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/jabu-dayton" class="text-link tl-blog-dropdown">Jabu Dayton</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/jonathan-snook" class="text-link tl-blog-dropdown">Jonathan Snook</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/jordan-staniscia" class="text-link tl-blog-dropdown">Jordan Staniscia</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/josh-brewer" class="text-link tl-blog-dropdown">Josh Brewer</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/josh-taylor" class="text-link tl-blog-dropdown">Josh Taylor</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/kasey-fleisher-hickey" class="text-link tl-blog-dropdown">Kasey Fleisher Hickey</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/kelly-watkins" class="text-link tl-blog-dropdown">Kelly Watkins</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/kevin-smith" class="text-link tl-blog-dropdown">Kevin Smith</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/lashaun-williams" class="text-link tl-blog-dropdown">LaShaun Williams</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/lesley-alegria" class="text-link tl-blog-dropdown">Lesley Alegría</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/lindsay-brechler" class="text-link tl-blog-dropdown">Lindsay Brechler</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/matt-colyer" class="text-link tl-blog-dropdown">Matt Colyer</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/mia-blume" class="text-link tl-blog-dropdown">Mia Blume</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/payam-rajabi" class="text-link tl-blog-dropdown">Payam Rajabi</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/rukmini-reddy" class="text-link tl-blog-dropdown">Rukmini Reddy</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sara-howshar" class="text-link tl-blog-dropdown">Sara Howshar</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sara-zhang" class="text-link tl-blog-dropdown">Sara Zhang</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sarah-mcilwain" class="text-link tl-blog-dropdown">Sarah McIlwain</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/scott-welliver" class="text-link tl-blog-dropdown">Scott Welliver</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/sean-catangui" class="text-link tl-blog-dropdown">Sean Catangui</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/tim-van-damme" class="text-link tl-blog-dropdown">Tim Van Damme</a></div><div role="listitem" class="text-l w-dyn-item"><a href="/author/vince-joy" class="text-link tl-blog-dropdown">Vince Joy</a></div></div></div></div><div class="blog-nav-dropdown-gradient no-pointer-events"></div></div></div><div id="w-node-_7b7e8081-2634-cee2-9ec4-65df3c9426fe-3c9426bc"><h1 class="heading-s">Sharing</h1><div><div class="space-top-m"><div class="blog-social-link"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path d="M10.488 18V12.372H9V10.344H10.488C10.488 10.344 10.488 9.516 10.488 8.616C10.488 7.248 11.364 6 13.392 6C14.208 6 14.82 6.084 14.82 6.084L14.772 7.98C14.772 7.98 14.148 7.98 13.476 7.98C12.744 7.98 12.624 8.316 12.624 8.88C12.624 9.324 12.624 7.944 12.624 10.356H14.82L14.724 12.384H12.636V18H10.488Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">Facebook</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a></div></div><div class="blog-social-link"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path d="M9.33195 17.6991C14.5292 17.6991 17.3731 13.3892 17.3731 9.65802C17.3731 9.53677 17.3731 9.41552 17.3675 9.29427C17.9187 8.89745 18.3982 8.39592 18.7785 7.82824C18.2714 8.05421 17.7258 8.20302 17.1526 8.27467C17.7368 7.92745 18.1832 7.3708 18.3982 6.70943C17.8526 7.0346 17.2463 7.26608 16.6015 7.39284C16.0889 6.84171 15.3504 6.5 14.5402 6.5C12.9805 6.5 11.7129 7.76762 11.7129 9.32734C11.7129 9.5478 11.7404 9.76274 11.7845 9.97217C9.43667 9.85092 7.35336 8.7266 5.95898 7.01807C5.71648 7.43694 5.5787 7.92194 5.5787 8.44001C5.5787 9.42103 6.08023 10.2863 6.83529 10.7934C6.37233 10.7768 5.93694 10.6501 5.55114 10.4406C5.55114 10.4517 5.55114 10.4627 5.55114 10.4792C5.55114 11.846 6.52665 12.9924 7.81632 13.2514C7.57933 13.3176 7.33132 13.3507 7.07228 13.3507C6.89041 13.3507 6.71404 13.3341 6.54319 13.3011C6.90143 14.4254 7.94859 15.2411 9.18314 15.2631C8.21314 16.0237 6.99512 16.4756 5.67239 16.4756C5.44642 16.4756 5.22046 16.4646 5 16.437C6.25108 17.2307 7.73916 17.6991 9.33195 17.6991Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">Twitter</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a></div></div><div class="blog-social-link"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72437 17.2996V9.55997H6.15648V17.2996H8.72437ZM7.44043 8.50401C8.34039 8.50401 8.89237 7.90404 8.89237 7.17207C8.88037 6.4041 8.34039 5.82812 7.45243 5.82812C6.57646 5.82812 6.00049 6.4041 6.00049 7.17207C6.00049 7.91604 6.55247 8.50401 7.41643 8.50401H7.44043Z" fill="CurrentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1525 17.2996H12.7204V12.9798C12.7204 12.7518 12.7324 12.5118 12.8044 12.3559C12.9844 11.8879 13.4164 11.4199 14.1243 11.4199C15.0603 11.4199 15.4323 12.1279 15.4323 13.1718V17.3116H18.0002V12.8718C18.0002 10.4959 16.7282 9.39198 15.0363 9.39198C13.6444 9.39198 13.0444 10.1719 12.6964 10.6999H12.7204V9.57197H10.1525C10.1765 10.2799 10.1525 17.2996 10.1525 17.2996Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">LinkedIn</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a></div></div><a href="#" class="blog-social-link link-copy w-inline-block"><div class="blog-social-icon"><div class="svg w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="CurrentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49632 11.9997C7.80726 11.6888 8.31139 11.6888 8.62233 11.9997C8.93327 12.3106 8.93327 12.8148 8.62233 13.1257L8.05932 13.6887C7.43744 14.3106 7.43744 15.3189 8.05932 15.9407C8.6812 16.5626 9.68947 16.5626 10.3113 15.9407L12.5634 13.6887C13.1853 13.0668 13.1853 12.0586 12.5634 11.4367C12.2524 11.1258 12.2524 10.6216 12.5634 10.3107C12.8743 9.99974 13.3784 9.99974 13.6894 10.3107C14.9332 11.5544 14.9332 13.571 13.6894 14.8147L11.4374 17.0668C10.1936 18.3105 8.17707 18.3105 6.93331 17.0668C5.68955 15.823 5.68955 13.8065 6.93331 12.5627L7.49632 11.9997ZM16.5043 11.9999C16.1934 12.3108 15.6892 12.3108 15.3783 11.9999C15.0674 11.6889 15.0674 11.1848 15.3783 10.8739L15.9413 10.3109C16.5632 9.68898 16.5632 8.68071 15.9413 8.05883C15.3194 7.43695 14.3112 7.43695 13.6893 8.05883L11.4373 10.3109C10.8154 10.9327 10.8154 11.941 11.4373 12.5629C11.7482 12.8738 11.7482 13.378 11.4373 13.6889C11.1263 13.9998 10.6222 13.9998 10.3112 13.6889C9.06749 12.4451 9.06749 10.4286 10.3112 9.18485L12.5633 6.93282C13.807 5.68906 15.8236 5.68906 17.0673 6.93282C18.3111 8.17658 18.3111 10.1931 17.0673 11.4369L16.5043 11.9999Z" fill="CurrentColor"/> </svg></div></div><div class="text-l">Copy link</div></a></div></div></div></div></div></div></nav></div></div></div></div></div></div><div><div data-w-id="e645997a-582c-32f9-dae2-3b56e221dbc0" class="blog-navigation-post"><div class="section"><div class="container-max"><div class="flex-h-ac-jsb"><div class="blog-post-navbar-title"><div class="heading-s blog-post-title">Approaching the product design process through an engineering lens</div><div class="blog-post-nav-title-gradient"></div></div><div class="blog-navigation-right-part"><div class="blog-post-share-links-wrapper"><div class="blog-post-share-links"><div class="space-right-s">Share:</div><div class="blog-social-link bsl-navbar"><div>Facebook</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a></div></div><div class="blog-social-link bsl-navbar"><div>Twitter</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a></div></div><div class="blog-social-link bsl-navbar"><div>LinkedIn</div><div class="social-link w-embed"><a class="w-inline-block social-link" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a></div></div><a href="#" class="blog-social-link bsl-navbar link-copy w-inline-block"><div>Copy Link</div></a></div></div><div class="blog-nav-category-link bncl-ellipses no-pointer-events"><div class="blog-nav-ellipses"><div class="blog-more-toggle"></div></div></div></div></div></div><div class="blog-post-progress"></div></div></div></div></nav><div id="content" class="main"><div><header class="section s-default"><div class="container-max"><div class="flex-grid"><div class="col-wrapper"><div class="col col-8-d col-12-t"><h1 class="heading-xl space-bottom-m">Approaching the product design process through an engineering lens</h1><div class="text-xl space-bottom-m text-black">Zipper&#x27;s Duretti Hirpa says designers and engineers have more shared values than you may realize</div></div><div class="col col-4-d col-12-t"><div class="blog-meta bm-post"><div class="flex-h-as-js"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/inspiration" class="text-nowrap text-link space-right-sentence">Inspiration</a></div><div class="flex-h-as-js"><div class="space-right-sentence">by</div><a href="/author/alison-harshbarger" class="text-nowrap text-link space-right-sentence">Alison Harshbarger</a></div></div></div></div></div></div></header><article class="section space-inner-0"><div class="img-wrapper"><img loading="lazy" alt="Approaching the product design process through an engineering lens" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa.png" sizes="(max-width: 1439px) 100vw, (max-width: 1919px) 92vw, 98vw" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-500.png 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-800.png 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-1080.png 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-1600.png 1600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-2600.png 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa.png 3200w" class="img-100"/></div></article><section data-w-id="2f9c3f5e-af02-d346-04ae-5337f816ae0b" class="section s-default s-last"><div class="container-wide"><article data-w-id="1bbf3479-e601-da8b-1220-f904ea0fff26" class="flex-grid space-bottom-l"><div class="col-wrapper flex-h-as-js"><div class="col col-8-d col-12-t"><div class="rich-text text-l w-richtext"><p>Not long ago, a wise design pro by the name of Joshua Goldenberg, VP of Design at Loom, advised product design folk to “<a href="https://www.abstract.com/blog/trust-collaboration-building-products">find their engineering soulmate</a>” early on in their job. <br/></p><p>He knows from experience that a strongly aligned partnership between design and engineering can make the entire product development process go more smoothly. It could also lead to more well-rounded explorations in the early stages, and possibly faster breakthroughs and innovations in later stages. <br/></p><p>As much as we’ve spoken to design professionals about the importance of the relationship between designers and engineers, it also helps us to hear directly from our engineering partners. <br/></p><p>So we were delighted to get some time with <a href="https://www.linkedin.com/in/duretti/">Duretti Hirpa</a>, Principal Engineer at Zipper and formerly a Senior Product Engineer at Slack, on how design and engineering teams can best collaborate on building quality products. </p><h2>The Goldilocks Rule (or how not to dread the design-dev handoff) </h2><p>Like most engineers, Duretti has experienced that dreaded moment when a design mockup comes across her desk — sight unseen — and she’s instructed to just build it. That’s typically a worst case scenario, but it does happen. <br/></p><p>“I think I&#x27;ve seen projects go off the rails when engineering gets involved too late,” she says. “Sometimes design has made a lot of effort to get something looking a particular way, but maybe there&#x27;s some technical limitation that means that we actually can&#x27;t build any of that and that&#x27;s sad because someone&#x27;s spent a lot of time trying to get to that point.”<br/></p><p>“What&#x27;s that children&#x27;s story with the three bears? It’s like that,” she says. “You want to get [the balance] just right.”<br/></p><p>The best thing to do is to make sure there’s some engineering representation in early product conversations. It doesn’t have to be the whole team, but adding an engineering manager or a tech lead can help you inform design decisions and avoid critical mistakes come <a href="https://www.abstract.com/blog/developer-handoff-for-designers">developer handoff</a>. <br/></p><h2>Even the smallest features need clear owners<br/></h2><p>You’ve been there: you see an opportunity to expand on an existing feature in a meaningful way, so you let yourself believe that this small update can simply get coded and shipped. No complications, right? <br/></p><p>But just as designers are bound to run into issues when they don’t consult with engineers early on in the process, the reverse is also true. “I think fundamentally engineers are optimistic people,” says Duretti. That doesn’t mean that their optimism can’t lead them astray. <br/></p><p>Duretti reasons that engineers won’t always know when they might come across an unanticipated issue that requires a design solution, like needing a new button or a mockup for an error state. <br/></p><p>She shares one example of a time the team at Slack wanted to make an update to an often-used feature (snoozing notifications). A small team of engineers went ahead and built out some necessary additional functionality, but no one truly owned the project’s success. Over time, product managers transferred teams, communication eroded, and the project kept getting punted. Even if it seemed like a relatively simple task, and an almost certain win for the customer, the project wasn’t going anywhere. <br/></p><p>“The belief that, ‘Oh, it&#x27;s just a small feature,’ meant that we didn&#x27;t run [the project] as tight as we normally would have,” she says.  <br/></p><p>In what ended up being “quite the retro,” according to Duretti, the team realized that their biggest misstep was that everyone was waiting for somebody else to step up and be the leader. <br/></p><p>So, when in doubt, make sure that someone is responsible for looking after the project and is making sure that the right voices — whether that’s design or product management — are represented in your process. </p><h2>Managing scope creep is an interpersonal and a team effort</h2><p>A reality we don’t often hear people be so candid about is that sometimes product decisions are influenced by people in positions of relative power. It’s not controversial, nor a secret, but it still is a reality that most product design and development teams need to contend with. <br/></p><p>Duretti calls these “human factors”. <br/></p><p>“Is it a very classic swoop and poop, where the [CEO] comes in and tells you how things need to go? Or is there a power differential; like is this a leader, a director, or VP?” she says. Depending on these factors, you can determine how much you can push back on a set of requests or demands. <br/></p><p>While there are some people who are naturally good at saying no, others need some practice on pushing back. Duretti says it’s a good idea to get aligned as a team of engineers and designers on what is and isn’t possible. When you’re crystal clear on your constraints, you can have a much more practical conversation with stakeholders. <br/></p><p>A great way to frame new requests is to be flat out and say, “it’s going to cost you,” says Duretti. Whether that’s time or money, every change that follows the initial brief should be approached as a negotiation. The better you get at managing and measuring your capacity as a united team, the better equipped you’ll be to ship features within a reasonable timeline (while also avoiding burnout). </p><h2>How to do more help than harm when you’re jumping in mid-process</h2><p>We don’t always have the luxury of being part of a <a href="https://www.abstract.com/in-the-margin/joshua-goldenberg-podcast">project from kickoff to shipping</a>. It’s especially hard to jump in when the project has a history and you’re the new person on the team who’s still trying to make a good first impression. <br/></p><p>“My starting point would be to make friends with people on the team,” says Duretti. Be prepared that you may encounter some natural defensiveness, or wariness, from established members of the team, especially if they sense that you’re there to shake up their process. <br/></p><p>In cases where you may be stepping into a project that’s not going as expected, Duretti says that, “my zero-step would just be to establish some relationships with key people — both on my team and adjacent — and get a sense of what’s happening. Let me make some friends. Let me get the tea,” she says. <br/></p><p>“Sometimes it&#x27;s just growing pains, and it&#x27;s not any one person&#x27;s fault, and sometimes there&#x27;s super extenuating circumstances preventing the team from getting certain things done,” she says. <br/></p><p>“But if it&#x27;s not happening on purpose, then I think you can influence what&#x27;s happening and help people pave the cow path a little bit — but you should know whether it’s a hot stove that you shouldn&#x27;t touch.”</p><h2>Avoiding the “P” word </h2><p>Some people don’t like the word “process.” Nonetheless, you need to find a shared language for having an integrated and somewhat predictable way of working as a team. How do you achieve that?<br/></p><p>Duretti approaches it with an MVP mindset, like any good product designer: “Can you [prove] it on a smaller scale? If you&#x27;re on a team, and you agree to work in a certain way, and it shows that you’re getting better, people will want to copy that,” she says. <br/></p><p>“When you’re able to say: ‘Here&#x27;s what we did, it worked really well, and now we&#x27;re shipping much faster than we were before,’ people love that,” she says. So once you’ve found success on a smaller scale, and that success proves to be replicable, keep evangelizing to operate that way on a larger and larger scale. </p><h2>QA can be a competitive advantage </h2><p>“You don’t get a second chance to make a first impression,” says Duretti (spoken like a true veteran in her field). <br/></p><p>That’s why the final QA review of your product should be everyone’s job, and that includes designers. “Designers should have an opinion on the final feeling and full experience of the product,” she says. <br/></p><p>Balancing QA tasks between engineers and designers is also helpful because, by that point, designers will have had some distance from the product and so they can act as a true fresh pair of eyes. <br/></p><p>Duretti’s been in tech for about 15 years now and she’s noticing that the quality bar for software products has only gotten higher. “People are looking for a lot more polish,” she notes. <br/></p><p>“Users don&#x27;t have a lot of tolerance for experiences that aren’t smooth,” she says. “I’m a quality nerd, I just really like using things that feel nice and I think that&#x27;s a competitive advantage for your business. But be prepared: If it’s something that’s easy to use, it&#x27;s going to be hard to do.”<br/></p><p>What speaking with Duretti reminds us is that engineers and designers have more shared values than not. Both want to build products that are reliable, beautiful, and even delightful to use. Both want to make users happy while satisfying the needs of the business. And both want to feel proud of their work. <br/></p><p>But it’s not as simple as getting from point A to point B, as Duretti so astutely pointed out earlier. Even the seemingly smallest upgrades require collaboration across disciplines, clear owners, and inevitably some negotiations around scope and timelines. The more that designers and engineers can share in these responsibilities, the better the outcome for all. </p><p>‍</p><p><em>This post is part of an ongoing series featuring snippets from </em><a href="https://www.abstract.com/in-the-margin-format/video"><em>Same Page</em></a><em> — our event series that explores the design process. Explore </em><a href="https://www.abstract.com/in-the-margin"><em>In the Margin</em></a><em> to see full-length recordings and more content on the design process.</em><br/></p></div></div><div class="col col-4-d blog-post-sticky-meta"><div class="blog-post-meta-wrapper"><div id="w-node-_9c75e5de-7378-a930-4d41-aa1ad7bc2f08-3272acf5" class="blog-post-meta bpm-date"><div class="text-nowrap space-right-sentence">Published on</div><div>September 21, 2021</div></div><div class="blog-post-meta"><div class="text-nowrap space-right-sentence">Illustration by</div><div><a href="https://jasonsbmoc.com/" class="text-link">Jason Combs</a></div><div><a href="#" class="text-link w-dyn-bind-empty"></a></div></div><div class="blog-post-meta"><div class="text-nowrap space-right-sentence">Written by</div><div><a href="/author/alison-harshbarger" class="text-link">Alison Harshbarger</a></div></div><div id="w-node-_173f9653-ef08-e614-6575-c8381295a437-3272acf5" class="blog-post-meta"><div class="flex-grid"><div class="col-wrapper"><div class="col col-12-t"><div class="heading-s">Tags<br/></div></div><div class="col col-12-t"><div class="w-dyn-list"><div role="list" class="badge-tag-wrapper w-dyn-items"><div role="listitem" class="w-dyn-item"><a href="/tag/developer-handoff" class="tag">Developer Handoff</a></div><div role="listitem" class="w-dyn-item"><a href="/tag/design-process" class="tag">Design Process</a></div><div role="listitem" class="w-dyn-item"><a href="/tag/events" class="tag">Events</a></div></div></div></div></div></div></div></div></div></div></article><div><h2 class="heading-m space-bottom-m">Related Articles</h2><div class="flex-grid w-dyn-list"><div role="list" class="col-wrapper w-dyn-items"><div role="listitem" class="col col-4-d col-6-t col-12-ml w-dyn-item"><div class="blog-post-wrapper space-bottom-m space-bottom-s-tablet"><div class="blog-post-inner-content"><a href="/blog/modern-retros-valuable-post-mortems" class="blog-post-link space-bottom-xs w-inline-block"><div class="img-wrapper"><img loading="lazy" alt="A guide to modern retros: how to host valuable project post-mortems" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle.png" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 44vw, (max-width: 1439px) 30vw, 405.1458435058594px" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle-p-500.png 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle-p-800.png 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle-p-1080.png 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle-p-1600.png 1600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle-p-2000.png 2000w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle-p-2600.png 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/615204bdaf531d8c47b357de_20210913_SamePage_KyleDaigle.png 3200w" class="img-100"/><div class="blog-read-time"><div class="blog-read-time-clock space-right-xs"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/602418512fbb8e318081c80f_ico-clock-white.svg" loading="lazy" alt=""/></div><div class="space-right-sentence">11</div><div>min</div></div></div></a><div class="blog-meta space-bottom-s"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/inspiration" class="text-nowrap text-link space-right-sentence">Inspiration</a><div class="space-right-sentence">by</div><a href="/author/alison-harshbarger" class="text-nowrap text-link space-right-sentence">Alison Harshbarger</a></div><a href="/blog/modern-retros-valuable-post-mortems" class="blog-post-link w-inline-block"><h2 class="heading-s space-bottom-s">A guide to modern retros: how to host valuable project post-mortems</h2><div class="post-lede"><div class="text-l">GitHub’s Kyle Diagle says successful retros start with trust </div></div></a></div><div class="blog-read-more"><div class="text-annotation">Read more</div><div class="blog-arrow-read-more"><div class="svg w-embed"><svg viewBox="0 0 37 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.21847 0.0241569C0.679529 -0.0965021 0.144816 0.242584 0.0241569 0.781528C-0.0965021 1.32047 0.242584 1.85518 0.781528 1.97584L1.21847 0.0241569ZM27.6763 41.567C27.9894 42.0219 28.612 42.1369 29.067 41.8237L36.4805 36.7209C36.9355 36.4077 37.0504 35.7851 36.7373 35.3302C36.4242 34.8752 35.8015 34.7603 35.3466 35.0734L28.7567 39.6093L24.2209 33.0195C23.9077 32.5645 23.2851 32.4496 22.8302 32.7627C22.3752 33.0758 22.2603 33.6985 22.5734 34.1534L27.6763 41.567ZM0.781528 1.97584C6.215 3.19229 14.0966 6.61162 20.0104 12.8741C25.8848 19.0947 29.855 28.152 27.5166 40.8185L29.4834 41.1815C31.945 27.848 27.7485 18.1553 21.4646 11.5009C15.2201 4.88838 6.95167 1.30771 1.21847 0.0241569L0.781528 1.97584Z" fill="CurrentColor"/> </svg></div></div></div></div></div><div role="listitem" class="col col-4-d col-6-t col-12-ml w-dyn-item"><div class="blog-post-wrapper space-bottom-m space-bottom-s-tablet"><div class="blog-post-inner-content"><a href="/blog/product-design-process-engineering-lens" aria-current="page" class="blog-post-link space-bottom-xs w-inline-block w--current"><div class="img-wrapper"><img loading="lazy" alt="Approaching the product design process through an engineering lens" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa.png" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 44vw, (max-width: 1439px) 30vw, 405.1458435058594px" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-500.png 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-800.png 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-1080.png 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-1600.png 1600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa-p-2600.png 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6140b5e983b9f85fa54cf4cb_20210913_SamePage_DurettiHirpa.png 3200w" class="img-100"/><div class="blog-read-time"><div class="blog-read-time-clock space-right-xs"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/602418512fbb8e318081c80f_ico-clock-white.svg" loading="lazy" alt=""/></div><div class="space-right-sentence">7</div><div>min</div></div></div></a><div class="blog-meta space-bottom-s"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/inspiration" class="text-nowrap text-link space-right-sentence">Inspiration</a><div class="space-right-sentence">by</div><a href="/author/alison-harshbarger" class="text-nowrap text-link space-right-sentence">Alison Harshbarger</a></div><a href="/blog/product-design-process-engineering-lens" aria-current="page" class="blog-post-link w-inline-block w--current"><h2 class="heading-s space-bottom-s">Approaching the product design process through an engineering lens</h2><div class="post-lede"><div class="text-l">Zipper&#x27;s Duretti Hirpa says designers and engineers have more shared values than you may realize</div></div></a></div><div class="blog-read-more"><div class="text-annotation">Read more</div><div class="blog-arrow-read-more"><div class="svg w-embed"><svg viewBox="0 0 37 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.21847 0.0241569C0.679529 -0.0965021 0.144816 0.242584 0.0241569 0.781528C-0.0965021 1.32047 0.242584 1.85518 0.781528 1.97584L1.21847 0.0241569ZM27.6763 41.567C27.9894 42.0219 28.612 42.1369 29.067 41.8237L36.4805 36.7209C36.9355 36.4077 37.0504 35.7851 36.7373 35.3302C36.4242 34.8752 35.8015 34.7603 35.3466 35.0734L28.7567 39.6093L24.2209 33.0195C23.9077 32.5645 23.2851 32.4496 22.8302 32.7627C22.3752 33.0758 22.2603 33.6985 22.5734 34.1534L27.6763 41.567ZM0.781528 1.97584C6.215 3.19229 14.0966 6.61162 20.0104 12.8741C25.8848 19.0947 29.855 28.152 27.5166 40.8185L29.4834 41.1815C31.945 27.848 27.7485 18.1553 21.4646 11.5009C15.2201 4.88838 6.95167 1.30771 1.21847 0.0241569L0.781528 1.97584Z" fill="CurrentColor"/> </svg></div></div></div></div></div><div role="listitem" class="col col-4-d col-6-t col-12-ml w-dyn-item"><div class="blog-post-wrapper space-bottom-m space-bottom-s-tablet"><div class="blog-post-inner-content"><a href="/blog/stakeholder-review-meetings" class="blog-post-link space-bottom-xs w-inline-block"><div class="img-wrapper"><img loading="lazy" alt="Making the most of stakeholder review meetings" src="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield.png" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 44vw, (max-width: 1439px) 30vw, 405.1458435058594px" srcset="https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield-p-500.png 500w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield-p-800.png 800w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield-p-1080.png 1080w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield-p-1600.png 1600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield-p-2000.png 2000w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield-p-2600.png 2600w, https://cdn.prod.website-files.com/5ff3926f03b3ba043ed639d1/6137906abfa1a81a4a3a956f_20210825SamePage_MeghanSchofield.png 3200w" class="img-100"/><div class="blog-read-time"><div class="blog-read-time-clock space-right-xs"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/602418512fbb8e318081c80f_ico-clock-white.svg" loading="lazy" alt=""/></div><div class="space-right-sentence">5</div><div>min</div></div></div></a><div class="blog-meta space-bottom-s"><div class="text-nowrap space-right-sentence">Posted in</div><a href="/category/inspiration" class="text-nowrap text-link space-right-sentence">Inspiration</a><div class="space-right-sentence">by</div><a href="/author/alison-harshbarger" class="text-nowrap text-link space-right-sentence">Alison Harshbarger</a></div><a href="/blog/stakeholder-review-meetings" class="blog-post-link w-inline-block"><h2 class="heading-s space-bottom-s">Making the most of stakeholder review meetings</h2><div class="post-lede"><div class="text-l">Google’s Meghan Schofield on honing your design communication skills</div></div></a></div><div class="blog-read-more"><div class="text-annotation">Read more</div><div class="blog-arrow-read-more"><div class="svg w-embed"><svg viewBox="0 0 37 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.21847 0.0241569C0.679529 -0.0965021 0.144816 0.242584 0.0241569 0.781528C-0.0965021 1.32047 0.242584 1.85518 0.781528 1.97584L1.21847 0.0241569ZM27.6763 41.567C27.9894 42.0219 28.612 42.1369 29.067 41.8237L36.4805 36.7209C36.9355 36.4077 37.0504 35.7851 36.7373 35.3302C36.4242 34.8752 35.8015 34.7603 35.3466 35.0734L28.7567 39.6093L24.2209 33.0195C23.9077 32.5645 23.2851 32.4496 22.8302 32.7627C22.3752 33.0758 22.2603 33.6985 22.5734 34.1534L27.6763 41.567ZM0.781528 1.97584C6.215 3.19229 14.0966 6.61162 20.0104 12.8741C25.8848 19.0947 29.855 28.152 27.5166 40.8185L29.4834 41.1815C31.945 27.848 27.7485 18.1553 21.4646 11.5009C15.2201 4.88838 6.95167 1.30771 1.21847 0.0241569L0.781528 1.97584Z" fill="CurrentColor"/> </svg></div></div></div></div></div></div></div></div></div></section></div><footer class="c-footer-container"><div class="c-section c-section_footer"><div class="c-grid c-grid_footer"><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb027-2c2bb025" class="c-footer_col c-footer_col1"><a href="/" class="c-footer_logolink w-inline-block"><img src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/60c388bf3c3ae4d1d10653e7_Abstract_Wordmark-White.svg" loading="lazy" alt="Abstract logo" class="c-footer_logo"/></a><div class="c-footer_copyright">© Copyright 2025<br/>Abstract Studio Design, Inc.<br/>‍All rights reserved</div></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb030-2c2bb025" class="c-footer_col test001"><h6 class="c-footer_columntitle">Products</h6><a href="#" class="c-footer_link">Notebooks</a><a href="/" class="c-footer_link">Branches</a><h6 class="c-footer_columntitle c-footer_columntitle-stacked">Use Cases</h6><a href="/it-abstract-com/use-cases/kickoff" class="c-footer_link">Kick Off</a><a href="/it-abstract-com/use-cases/present-designs" class="c-footer_link">Present</a><a href="/it-abstract-com/use-cases/evolve-designs" class="c-footer_link">Evolve</a></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb03f-2c2bb025" class="c-footer_col"><h6 class="c-footer_columntitle">Resources</h6><a href="/blog" class="c-footer_link">Blog</a><a href="https://help.abstract.com/" target="_blank" class="c-footer_link">Help Center</a><a href="https://help.abstract.com/hc/en-us/articles/360050382291-Contact-Support" target="_blank" class="c-footer_link">Contact Support</a><a href="#" class="c-footer_link cs-form-open">Contact Sales</a><a href="/release-notes" class="c-footer_link">Release Notes</a><a href="https://status.goabstract.com/" target="_blank" class="c-footer_link">Status</a></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb052-2c2bb025" class="c-footer_col"><h6 class="c-footer_columntitle">Company</h6><a href="/about" class="c-footer_link">About Us</a><a href="/careers" class="c-footer_link">Careers</a><a href="/legal" class="c-footer_link">Legal</a><a href="/privacy" class="c-footer_link">Privacy</a><a href="/legal/website-terms-of-use" class="c-footer_link">Website Terms of Use</a><h6 class="c-footer_columntitle c-footer_columntitle-stacked">Contact Us</h6><a href="mailto:info@abstract.com" class="c-footer_link">info@abstract.com</a></div><div id="w-node-_5450694c-b7b9-7422-2f9f-d3f12c2bb065-2c2bb025" class="c-footer_col"><h6 class="c-footer_columntitle">Social</h6><a href="https://twitter.com/goabstract" target="_blank" class="c-footer_link">Twitter</a><a href="https://www.linkedin.com/company/17950473/" target="_blank" class="c-footer_link">LinkedIn</a><a href="https://facebook.com/Abstract/" target="_blank" class="c-footer_link">Facebook</a><a href="https://dribbble.com/abstract" target="_blank" class="c-footer_link">Dribbble</a></div><div class="c-footer_copyright c-footer_copyright_mobile">© Copyright 2022<br/>Abstract Studio Design, Inc.<br/>All rights reserved</div></div></div></footer></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5ff3926f03b3ba26b7d639cb" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/5ff3926f03b3ba26b7d639cb/js/fs-abstract-v2.a5752db1312b561cce741500826aa35e.js" type="text/javascript"></script><!-- Twitter Universal Website Tag --> <script> !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments); },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js', a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script'); // Insert Twitter Pixel ID and Standard Event data below twq('init','nzf0p'); twq('track','PageView'); </script> <!-- Segment Form Tracking --> <script> const formElemList = document.querySelectorAll("form"); formElemList.forEach((form) => { form.addEventListener("submit", (e) => { // on form submission, prevent default e.preventDefault(); // construct a FormData object, which fires the formdata event new FormData(form); }); form.addEventListener("formdata", (e) => { // Get the form data from the event object let data = e.formData; let obj = {}; const entries = [...data.entries()]; entries.forEach((entry) => (obj[entry[0]] = entry[1])); analytics.track(form.attributes[2].nodeValue, obj); }); }); </script> <!-- Contact Sales Form Interactions --> <script> var csForm = document.querySelector('.cs-form-wrapper'); var csFormOpen = document.querySelectorAll('.cs-form-open'); var csFormExit = document.querySelectorAll('.cs-form-close'); csFormOpen.forEach(function(btn) { btn.addEventListener(`click`, function() { if(csForm.classList.contains(`active`)) { csForm.classList.add(`active`) } else { csForm.classList.add(`active`) } }); }); csFormExit.forEach(function(btn) { btn.addEventListener(`click`, function() { if(csForm.classList.contains(`active`)) { csForm.classList.remove(`active`) } else { csForm.classList.remove(`active`) } }); }); const csFormFields = document.querySelectorAll('.cs-form-field') const checkFormState = function (event) { csFormFields.forEach(function (field) { const label = field.nextElementSibling const highlight = label.nextElementSibling if (field === document.activeElement) { label.classList.add('active') label.classList.add('focused') highlight.classList.add('active') } else if (field.value.length > 0) { label.classList.add('active') highlight.classList.remove('active') label.classList.remove('focused') } else { label.classList.remove('active') highlight.classList.remove('active') label.classList.remove('focused') } }) } window.addEventListener('click', checkFormState, false); window.addEventListener('keyup', checkFormState, false); </script> <!-- Segment tracking data-analytics --> <script> 'use strict'; document.addEventListener('DOMContentLoaded', () => { const targetElements = document.querySelectorAll('[data-analytics]'); targetElements.forEach((element) => { element.addEventListener('click', () => { var _a; const event = element.dataset.analytics; if (!event) return; const properties = { text: (_a = element.textContent) !== null && _a !== void 0 ? _a : '', pageUrl: window.location.href, destination: element instanceof HTMLAnchorElement ? element.href : '', }; for (const { name, value } of element.attributes) { const property = name.split('data-property-')[1]; if (!property) continue; properties[property] = value; } window.analytics.track(event, properties); }); }); }); </script> <script> document.addEventListener('DOMContentLoaded', () => { const elements = document.querySelectorAll('[data-analytics]'); elements.forEach((element) => element.addEventListener('click', () => { const event = element.dataset.analytics; const properties = { text: element.textContent || undefined, pageUrl: window.location.href, destination: element instanceof HTMLAnchorElement ? element.href : undefined, }; for (const { name, value } of element.attributes) { const property = name.split('data-property-')[1]; if (!property) continue; properties[property] = value; } window.analytics.track(event, properties); }) ); }); </script> <script> $topBar = $('#topbar'); // hide $topBar if its link links to this page if($topBar.find('a[href]').attr('href')){ if(window.location.href === $topBar.find('a[href]').attr('href').split(/[?#]/)[0]){ $topBar.hide(); } } </script> <!-- F’in sweet Webflow Hacks --> <script> $(document).ready(function() { const listItems = $('li'); listItems.each(function(index, item){ if($(item).text().startsWith('~~')){ indentText(this, 'sub-sub-bullet'); } else if($(item).text().startsWith('~')){ indentText(this, 'sub-bullet'); } }); // indentText function function indentText(li, className){ $(li).addClass(className); const reformatedText = $(li).html().replace(/~+/g,''); $(li).html(reformatedText); } }); </script> <!-- Finsweet Sweet Text script. Add classes to Webflow rich text. --> <script src="https://cdn.finsweet.com/files/sweet-text/richtext-stylesystem2-v1.0.min.js"></script> <!-- Disable Scroll Script --> <script> document.addEventListener('DOMContentLoaded', () => { var $body = $(document.body); var scrollPosition = 0; $('[scroll="disable"]').on('click', function () { var oldWidth = $body.innerWidth(); scrollPosition = window.pageYOffset; $body.css('overflow', 'hidden'); $body.css('position', 'fixed'); $body.css('top', `-${scrollPosition}px`); $body.width(oldWidth); }); $('[scroll="enable"]').on('click', function () { if ($body.css('overflow') != 'hidden') { scrollPosition = window.pageYOffset; } $body.css('overflow', ''); $body.css('position', ''); $body.css('top', ''); $body.width(''); $(window).scrollTop(scrollPosition); }); $('[scroll="both"]').on('click', function () { if ($body.css('overflow') != 'hidden') { var oldWidth = $body.innerWidth(); scrollPosition = window.pageYOffset; $body.css('overflow', 'hidden'); $body.css('position', 'fixed'); $body.css('top', `-${scrollPosition}px`); $body.width(oldWidth); } else { $body.css('overflow', ''); $body.css('position', ''); $body.css('top', ''); $body.width(''); $(window).scrollTop(scrollPosition); } }); }); </script> <!-- Update footer year --> <script> document.querySelector('.footer-year').textContent = new Date().getFullYear(); </script> <!-- Skip to content for screen readers --> <script> document.getElementById('skip-link').addEventListener('click', function(e) { e.preventDefault(); var target = document.getElementById('content'); target.setAttribute('tabindex', '-1'); target.focus(); }); </script> <!-- F’in sweet Webflow Hacks --> <script> // when the DOM is ready $(document).ready(function() { // get the anchor link buttons const menuBtn = $('.no-anchor'); // when each button is clicked menuBtn.click(()=>{ // set a short timeout before taking action // so as to allow hash to be set setTimeout(()=>{ // call removeHash function after set timeout removeHash(); }, 5); // 5 millisecond timeout in this case }); // removeHash function // uses HTML5 history API to manipulate the location bar function removeHash(){ history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search); } }); </script> <!-- Topbar remember closed status --> <script> (() => { const getCookie = (key) => { if(- 1 === document.cookie.indexOf(key)) return null; const cookieVal = (document.cookie || '').match(RegExp(`${key}=([^;]+)`)) || []; return (cookieVal)[1] || null; }; const setCookie = (key, value, exp) => document.cookie = `${key}=${value};expires=${exp};`; if(getCookie('topbarClose')) $('.topbar-wrapper').hide(); const handleTopbarClick = () => { if(!getCookie('topbarClose')){ setCookie('topbarClose', '1', new Date(new Date().setDate(new Date().getDate() + 2))); } }; $('.topbar-wrapper .topbar-close').click(handleTopbarClick); })(); </script> <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script> <script> //url queries const urlParams = new URLSearchParams(window.location.search); Cookies.set('utmMedium', urlParams.get('utm_medium')); Cookies.set('utmSource', urlParams.get('utm_source')); Cookies.set('utmTerm', urlParams.get('utm_term')); Cookies.set('utmContent', urlParams.get('utm_content')); Cookies.set('utmCampaign', urlParams.get('utm_campaign')); </script> <script> $('[name="utm_medium"]').val(Cookies.get('utmMedium')); $('[name="utm_source"]').val(Cookies.get('utmSource')); $('[name="utm_campaign"]').val(Cookies.get('utmCampaign')); $('[name="utm_content"]').val(Cookies.get('utmContent')); $('[name="utm_term"]').val(Cookies.get('utmTerm')); </script> <script> //get the address and copy to clipboard $(".link-copy").on("click", () => copyTextToClipboard(window.location.href)); function copyTextToClipboard(text) { let textArea = document.createElement("textarea"); textArea.style.position = "fixed"; textArea.style.top = 0; textArea.style.left = 0; textArea.style.width = "2em"; textArea.style.height = "2em"; textArea.style.padding = 0; textArea.style.border = "none"; textArea.style.outline = "none"; textArea.style.boxShadow = "none"; textArea.style.background = "transparent"; textArea.value = text; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand("copy"); } catch (err) { //console.log('failed!'); } document.body.removeChild(textArea); } </script></body></html>

Pages: 1 2 3 4 5 6 7 8 9 10