1<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Thu Sep 10 2026 05:55:09 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="nuuxstudios-opt.webflow.io" data-wf-page="6972171a3a6d9e19bd0cb5fe" data-wf-site="6972171a3a6d9e19bd0cb61e" lang="en" data-wf-collection="6972171a3a6d9e19bd0cb649" data-wf-item-slug="product-design"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>Product Design | NUUX Design Studios</title><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/css/nuuxstudios-opt.webflow.shared.26c73f1fa.min.css" rel="stylesheet" type="text/css" integrity="sha384-Jsc/H6mQrDNizogvFrdXYk1JedtCnMXEv+yT3aOmHE8rH/whFKG4au2h88wKT0MM" crossorigin="anonymous"/><link href="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/css/nuuxstudios-opt.webflow.6972171a3a6d9e19bd0cb5fe.d59bac6dc.opt.min.css" rel="stylesheet" type="text/css" integrity="sha384-1Zusbc54IScBIjzhayS1AdQn4tZyuFu0nFAcEsDbGEhk35R3FPvR7ToZXosi2saf" crossorigin="anonymous"/><style>@media not all and (max-width: 479px) and (min-width: 0px){@media not all and (max-width: 767px) and (min-width: 480px){@media not all and (max-width: 991px) and (min-width: 768px){html.w-mod-js:not(.w-mod-ix3) :is(.services-heading-text.heading-style-h1-new) {visibility: hidden !important;}}}}</style>
1<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>
1<link href="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976d9cecd94a67b753c8c27_6972171a3a6d9e19bd0cb7ef_Nuux%20logo%20mark-04%201%20(1).png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976d9d84ac837916acceb24_6972171a3a6d9e19bd0cb7ee_Nuux%20logo%20mark-04%201.png" rel="apple-touch-icon"/><link href="https://www.nuuxstudios.com/solutions/product-design" rel="canonical"/>
1<script type="text/javascript">!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.agent='plwebflow';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init', '1250578866637649');fbq('track', 'PageView');</script>
1<!-- Google Tag Manager -->
2<script>
vendor: 327 bytes, lines 2-6
2(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 3new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 4j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 5'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 6})(window,document,'script','dataLayer','
6GTM-N23MMQRC
vendor: 3 bytes, line 6
6');
6</script>
6 7<!-- End Google Tag Manager --> 8 9<style> 10 /* Default Desktop Width */ 11 .testimonial_text_inner { 12 width: 560px; 13 } 14 15 /* When screen is under 1250px */ 16 @media (max-width: 1250px) { 17 .testimonial_text_inner { 18 width: 350px !important; /* Force the smaller width */ 19 } 20 } 21 22 23 /* When screen is under 1250px */ 24 @media (max-width: 992px) { 25 .testimonial_text_inner { 26 width: 100% !important; /* Force the smaller width */ 27 } 28 } 29</style> 30 31<style> 32 33 34 35 /* ANIMATION FOR SLIDER UP TEXT TESTIMONIAL */ 36 .sliding-text-wrapper { 37 position: relative; 38 height: 50px; 39 width: 300px; 40 overflow: hidden; 41 margin: auto; 42 } 43 44 .sliding-text { 45 position: absolute; 46 opacity: 0; 47 transform: translateY(100%); 48 animation: slideUp 8s infinite; 49 } 50 51 .sliding-text:nth-child(1) { 52 animation-delay: 0s; 53 } 54 55 .sliding-text:nth-child(2) { 56 animation-delay: 2s; 57 } 58 59 .sliding-text:nth-child(3) { 60 animation-delay: 4s; 61 } 62 63 .sliding-text:nth-child(4) { 64 animation-delay: 6s; 65 } 66 67 @keyframes slideUp { 68 0% { 69 transform: translateY(100%); 70 opacity: 0; 71 } 72 5% { 73 transform: translateY(0); 74 opacity: 1; 75 } 76 20% { 77 transform: translateY(0); 78 opacity: 1; 79 } 80 25% { 81 transform: translateY(-100%); 82 opacity: 0; 83 } 84 100% { 85 transform: translateY(-100%); 86 opacity: 0; 87 } 88 } 89 @media screen and (max-width: 767px){ 90 .sliding-text { 91 width: 100%; 92 } 93 .sliding-text-wrapper{ 94 width: 100%; 95 } 96 } 97 98</style></head><body class="body"><div class="page-wrapper"><div data-animation="default" class="navbar2_component w-nav" data-easing2="ease" fs-scrolldisable-element="smart-nav" data-easing="ease" data-collapse="medium" data-w-id="29ee5b7c-4672-9037-dd57-34171246ad78" role="banner" data-duration="400"><div class="nav-cont z-index-1"><div class="nav-logo-list-wrapper"><a href="/" class="navbar2_logo-link w-nav-brand"><img loading="lazy" src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb76d_Logo%20(9).svg" alt="" class="navbar2_logo"/></a><nav role="navigation" id="w-node-_29ee5b7c-4672-9037-dd57-34171246ad7c-1246ad78" class="navbar2_menu is-page-height-tablet w-nav-menu"><a href="/" class="navbar2_link w-nav-link">Home</a><div data-hover="true" data-delay="0" class="dropdown-2 w-dropdown"><div class="navbar2_link dropdown w-dropdown-toggle"><div>Solutions</div><div class="code-embed-5 w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 99 <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> 100</svg></div></div><nav class="dropdown-list w-dropdown-list"><div class="w-dyn-list"><div role="list" class="dropdown-list-contain w-dyn-items"><div role="listitem" class="w-dyn-item"><div data-w-id="38064c9a-833f-5a19-aa05-a8a50752b985" class="dropdown-list-item"><a href="/solutions/uxui-design" class="solutions-link w-inline-block"></a><div class="nav-icon-block"><div class="nav-icon w-richtext"><div class="w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"> 101 <path d="M13.4386 28.125H16.5886C17.7886 28.125 18.5636 27.275 18.3386 26.2375L17.8261 23.9751H12.2011L11.6886 26.2375C11.4636 27.2125 12.3136 28.125 13.4386 28.125Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 102 <path d="M17.8257 23.9626L19.9882 22.0375C21.2007 20.9625 21.2507 20.2125 20.2882 19L16.4757 14.1625C15.6757 13.15 14.3632 13.15 13.5632 14.1625L9.75068 19C8.78818 20.2125 8.78818 21 10.0507 22.0375L12.2132 23.9626" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 103 <path d="M15.0117 13.9V17.0625" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 104 <path d="M13.9391 6.48753L12.9641 5.51249C12.3766 4.92499 12.3766 3.97505 12.9641 3.38755L13.9391 2.41252C14.5266 1.82502 15.4766 1.82502 16.0641 2.41252L17.0391 3.38755C17.6266 3.97505 17.6266 4.92499 17.0391 5.51249L16.0641 6.48753C15.4766 7.07503 14.5266 7.07503 13.9391 6.48753Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 105 <path d="M24.3125 12.2625H25.6875C26.5125 12.2625 27.1875 12.9375 27.1875 13.7625V15.1375C27.187
1055 15.9625 26.5125 16.6376 25.6875 16.6376H24.3125C23.4875 16.6376 22.8125 15.9625 22.8125 15.1375V13.7625C22.8125 12.9375 23.4875 12.2625 24.3125 12.2625Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 106 <path d="M5.6875 12.2625H4.3125C3.4875 12.2625 2.8125 12.9375 2.8125 13.7625V15.1375C2.8125 15.9625 3.4875 16.6376 4.3125 16.6376H5.6875C6.5125 16.6376 7.1875 15.9625 7.1875 15.1375V13.7625C7.1875 12.9375 6.5125 12.2625 5.6875 12.2625Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 107 <path d="M23.1758 12.625L16.5508 5.99998" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 108 <path d="M6.82422 12.625L13.4492 5.99998" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 109</svg></div></div></div><div><div class="text-size-regular text-weight-bold">UX/UI Design </div><div class="text-size-small">Seamless interfaces & experiences</div></div></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="38064c9a-833f-5a19-aa05-a8a50752b985" class="dropdown-list-item"><a href="/solutions/product-design" aria-current="page" class="solutions-link w-inline-block w--current"></a><div class="nav-icon-block"><div class="nav-icon w-richtext"><div class="w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"> 110 <path d="M8.05 2.5H21.9375C26.3875 2.5 27.5 3.6125 27.5 8.05V15.9625C27.5 20.4125 26.3875 21.5125 21.95 21.5125H8.05C3.6125 21.525 2.5 20.4125 2.5 15.975V8.05C2.5 3.6125 3.6125 2.5 8.05 2.5Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 111 <path d="M15 21.525V27.5" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 112 <path d="M2.5 16.25H27.5" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 113 <path d="M9.375 27.5H20.625" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 114</svg></div></div></div><div><div class="text-size-regular text-weight-bold">Product Design</div><div class="text-size-small">User-first product solutions</div></div></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="38064c9a-833f-5a19-aa05-a8a50752b985" class="dropdown-list-item"><a href="/solutions/web-development" class="solutions-link w-inline-block"></a><div class="nav-icon-block"><div class="nav-icon w-richtext"><div class="w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"> 115 <path d="M11.2484 16.25C10.4234 16.6625 9.73594 17.275 9.22344 18.0375C8.93594 18.475 8.93594 19.025 9.22344 19.4625C9.73594 20.225 10.4234 20.8375 11.2484 21.25" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 116 <path d="M19.0117 16.25C19.8367 16.6625 20.5242 17.275 21.0367 18.0375C21.3242 18.475 21.3242 19.025 21.0367 19.4625C20.5242 20.225 19.8367 20.8375 19.0117 21.25" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 117 <path d="M11.25 27.5H18.75C25 27.5 27.5 25 27.5 18.75V11.25C27.5 5 25 2.5 18.75 2.5H11.25C5 2.5 2.5 5 2.5 11.25V18.75C2.5 25 5 27.5 11.25 27.5Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 118 <path d="M2.78906 10.0125L26.8141 10" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 119</svg></div></div></div><div><div class="text-size-regular text-weight-bold">Web Development</div><div class="text-size-small">Fast, functional, scalable</div></div></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="38064c9a-833f-5a19-aa05-a8a50752b985" class="dropdown-list-item"><a href="/solutions/growth-marketing" class="solutions-link w-inline-block"></a><div class="nav-icon-block"><div class="nav-icon w-richtext"><div class="w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"> 120 <path d="M2.5 27.5H27.5" stroke="CurrentColor" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> 121 <path d="M12.1875 5V27.5H17.8125V5C17.8125 3.625 17.25 2.5 15.5625 2.5H14.4375C12.75 2.5 12.1875 3.625 12.1875 5Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
122 <path d="M3.75 12.5V27.5H8.75V12.5C8.75 11.125 8.25 10 6.75 10H5.75C4.25 10 3.75 11.125 3.75 12.5Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 123 <path d="M21.25 18.75V27.5H26.25V18.75C26.25 17.375 25.75 16.25 24.25 16.25H23.25C21.75 16.25 21.25 17.375 21.25 18.75Z" stroke="CurrentColor" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/> 124</svg></div></div></div><div><div class="text-size-regular text-weight-bold">Growth Marketing</div><div class="text-size-small">Turning insights into impact</div></div></div></div></div></div></nav></div><a href="/work" class="navbar2_link w-nav-link">Portfolio</a><a href="/about-us" class="navbar2_link w-nav-link">About Us</a><a href="/insights" class="navbar2_link w-nav-link">Insights & Blog</a><a href="/contact-us" class="button-copy is-icon-new blue show-mob-portrait w-button">Book a Consultation</a></nav></div><div id="w-node-_29ee5b7c-4672-9037-dd57-34171246ad83-1246ad78" class="navbar2_button-wrapper"><a href="/contact-us" class="button is-navbar2-button hide-mobile-portrait w-button">Book a Free Consultation</a><div class="navbar2_menu-button w-nav-button"><div class="menu-icon2"><div class="menu-icon2_line-top"></div><div class="menu-icon2_line-middle"><div class="menu-icon2_line-middle-inner"></div></div><div class="menu-icon2_line-bottom"></div></div></div></div></div><div class="nav-size-wrapper"><div class="nav-size"></div></div></div><div class="main-wrapper"><section class="designing-sec"><div class="padding-global"><div class="padding-section-medium"><div class="w-layout-blockcontainer container-large w-container"><div class="spacer-large"></div><div class="spacer-large"></div><div class="w-layout-grid grid-18"><div class="designing-div"><div class="w-layout-hflex designing-div-flex"><div class="blue-line"></div><div class="text-size-small-new text-color-light-blue-secondary text-weight-semibold uppercase">Service</div></div><div class="spacer-small"></div><div class="services-heading-text heading-style-h1-new w-richtext"><h1>Turning Ideas into <strong>Intuitive, Scalable</strong> Digital Products</h1><p>Too many digital products look great but feel frustrating to use. We design apps, software, and digital products that are easy to use, visually engaging, and built to grow.</p></div><div class="spacer-medium"></div><div class="w-layout-hflex"><a href="/work" class="button-copy is-icon-new blue mw-100 w-inline-block"><div class="text-block-4">View Our Portfolio</div><div class="icon-1x1-small _w-20 w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 125 <path d="M2 9.99998C15.7999 9.99998 16.6249 9.99998 18.8749 9.99998M18.8749 9.99998C14.9865 8.93704 13.625 7.37499 13.25 4M18.8749 9.99998C14.6036 10.0815 13.3373 13.4912 13.25 16" stroke="white" stroke-linecap="round"/> 126</svg></div></a></div></div><div id="w-node-a789bb49-b69d-c588-a585-2289f29b2cdb-bd0cb5fe" class="div-block-47"><div class="service-hero-lottie w-embed w-script">
126<script src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.mjs" type="module"></script>
126<dotlottie-player src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/697516cb53ba734dd95250cc_services%203.lottie" background="transparent" speed="1" style="width: 100%; height: 100%" direction="1" playMode="normal" loop autoplay></dotlottie-player></div></div></div></div></div></div></section><section class="what-we-sec"><div class="padding-global"><div class="padding-section-medium"><div class="w-layout-blockcontainer container-large w-container"><div class="w-layout-grid what-we-grid images-aligned"><div class="what-we-div"><div class="w-layout-hflex flex-block-9-copy"><div class="blue-line"></div><div class="text-size-small-new text-color-light-blue-secondary text-weight-semibold uppercase">vision</div></div><div class="spacer-small"></div><h1 class="heading-style-h2-new text-color-blue-600 tab-small">About Our <span class="underlined">Vision </span></h1></div><div><div class="text-size-regular-new text-color-gray-600 max-width-large-copy w-richtext"><p>We design digital products with a strong focus on usability, clarity, and purpose. â¨â¨</p><p>â</p><p>Through research-led UX, thoughtful interaction design, and polished visual systems, we create experiences that solve real user problems while supporting long-term business goals.</p></div></div></div><div class="spacer-large"></div><div class="w-layout-grid what-we-grid images-aligned"><div class="about-vision-img-div"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb916_Frame%20438%20(2).svg" loading="eager" alt="" class="image-36"/></div><div class="div-block-46"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb917_Frame%20439%20(3).svg" loading="eager" alt="" class="image-37"/></div></div></div></div></div></section><section class="our-services-what-sec"><div class="padding-global"><div class="padding-section-medium"><div class="w-layout-blockcontainer container-large w-container"><div class="w-layout-grid our-services-new-grid"><div id="w-node-_58862d43-3ba4-f12b-bae0-3c48f1f113be-bd0cb5fe" class="what-we-div"><div class="w-layout-hflex flex-block-9-copy"><div class="blue-line"></div><div class="text-size-small-new text-color-light-blue-secondary text-weight-semibold uppercase">Our services</div></div><div class="spacer-small"></div><h1 class="heading-style-h2-new text-color-blue-600 tab-small">What we can do<br/> <span class="underlined">For You </span></h1><div class="spacer-medium"></div><div class="text-size-medium-new text-color-gray-600">We fix little things that make a big difference, so your users stay engaged and take action.</div></div><div><div class="w-dyn-list"><div role="list" class="collection-list-4 w-dyn-items"><div role="listitem" class="collection-item w-dyn-item"><div class="clean-content-div-copy background-color-alternate padding-small"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb928_drawing-mode.svg" loading="lazy" alt="" class="image-38"/><div class="spacer-small"></div><div class="text-size-large-new text-weight-semibold">Concept to Prototype</div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-600">We turn ideas into interactive prototypes, so you can test and refine before development.</div></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="clean-content-div-copy background-color-alternate padding-small"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb925_pen-tool.svg" loading="lazy" alt="" class="image-38"/><div class="spacer-small"></div><div class="text-size-large-new text-weight-semibold">User-Friendly Interfaces</div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-600">Every detail is designed for clarity, ease of use, and engagement.</div></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="clean-content-div-copy background-color-alternate padding-small"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb924_geometric-shapes-01.svg" loading="lazy" alt="" class="image-38"/><div class="spacer-small"></div><div class="text-size-large-new text-weight-semibold">Scalable Product Design</div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-600">Built to grow, ensuring seamless expansion as your business evolves.</div></div></div></div></div></div></div></div></div></div></section><section class="check-out-work-sec"><div class="padding-global"><div class="padding-section-medium"><div class="w-layout-blockcontainer container-large w-container"><div class="check-out-div"><div class="w-layout-hflex flex-block-9-copy"><div class="blue-line"></div><div class="text-size-small-new text-color-light-blue-secondary text-weight-semibold uppercase">Our Works</div></div><div class="spacer-small"></div><h1 class="heading-style-h2-new text-color-blue-600 tab-small">Check Out Our Recent <span class="underlined">Work </span></h1><div class="spacer-small"></div><div class="w-layout-hflex flex-block-27"><div class="text-size-medium-new text-color-gray-600">Explore how our design and development expertise helps brands grow, connect, and stand out.</div><a href="/work" class="button-copy is-icon-new blue mw-100 w-inline-block"><div class="text-block-4">View More</div><div class="icon-1x1-small _w-20 w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 127 <path d="M2 9.99998C15.7999 9.99998 16.6249 9.99998 18.8749 9.99998M18.8749 9.99998C14.9865 8.93704 13.625 7.37499 13.25 4M18.8749 9.99998C14.6036 10.0815 13.3373 13.4912 13.25 16" stroke="white" stroke-linecap="round"/> 128</svg></div></a></div></div><div class="spacer-large"></div><div class="w-dyn-list"><div role="list" class="our-work-grid w-dyn-items"><div role="listitem" class="w-dyn-item">
128<a href="/work/divergeit" class="portfolio-content-grid shadow w-inline-block"><div style="background-image:url("https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb93a_Effect%20(2).svg")" class="trace-mobile-div background-color-tertiary padding-medium"><div style="color:#0e2242" class="text-size-medium-new text-color-green text-weight-bold">DivergeIT</div><div class="spacer-xsmall"></div><div class="text-size-small-new text-color-gray-500">Product Design</div><div class="spacer-small"></div><div class="div-block-18"><img loading="lazy" src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6976c86dd8be17ac1ed83257_1.webp" alt="" sizes="(max-width: 767px) 100vw, (max-width: 991px) 727px, 940px, 100vw" srcset="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6976c86dd8be17ac1ed83257_1-p-500.webp 500w, https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6976c86dd8be17ac1ed83257_1.webp 652w" class="portfolio-card_img"/></div></div><div class="trace-div background-color-alternate padding-medium"><div class="trave-mobile-content-block background-color-alternate"><div class="text-size-medium-new text-color-gray-900 text-weight-bold">DivergeIT</div><div class="tag-pill background-color-fiftry"><div class="text-size-small-new text-color-light-blue-secondary text-weight-medium">Product Design</div></div></div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-500 h-small">We helped DivergeIT create a unified, responsive design system that streamlined their development process, ensuring consistent user experiences and faster delivery across their suite of MVP microservice applications.</div><div class="spacer-small"></div><div class="w-layout-hflex timeline-flex"><div class="text-size-small-new text-color-gray-500">Time line: </div><div class="text-size-small-new text-color-gray-500">2 Weeks</div></div></div></a></div><div role="listitem" class="w-dyn-item"><a href="/work/bizichat-mobile-app" class="portfolio-content-grid shadow w-inline-block"><div style="background-image:url("https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb932_Ellipse%204%20(2).svg")" class="trace-mobile-div background-color-tertiary padding-medium"><div style="color:#0282f0" class="text-size-medium-new text-color-green text-weight-bold">Bizichat Mobile App</div><div class="spacer-xsmall"></div><div class="text-size-small-new text-color-gray-500">Product Design</div><div class="spacer-small"></div><div class="div-block-18"><img loading="lazy" src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6976c87c17ac6da90759d65c_2.webp" alt="" sizes="(max-width: 767px) 100vw, (max-width: 991px) 727px, 940px, 100vw" srcset="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6976c87c17ac6da90759d65c_2-p-500.webp 500w, https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6976c87c17ac6da90759d65c_2.webp 652w" class="portfolio-card_img"/></div></div><div class="trace-div background-color-alternate padding-medium"><div class="trave-mobile-content-block background-color-alternate"><div class="text-size-medium-new text-color-gray-900 text-weight-bold">Bizichat Mobile App</div><div class="tag-pill background-color-fiftry"><div class="text-size-small-new text-color-light-blue-secondary text-weight-medium">Product Design</div></div></div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-500 h-small">We redesigned the Connections Tab to enhance the contact summary, improve discoverability of the Quick Match feature, and create a more intuitive user flow. The result? A cleaner, more engaging experience that encourages users to interact with key features seamlessly.</div><div class="spacer-small"></div><div class="w-layout-hflex timeline-flex"><div class="text-size-small-new text-color-gray-500">Time line: </div><div class="text-size-small-new text-color-gray-500">1 Week</div></div></div></a></div><div role="listitem" class="w-dyn-item"><a href="/work/trove-mobile-app" class="portfolio-content-grid shadow w-inline-block"><div style="background-image:url("https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb908_Ellipse%204%20(1).svg")" class="trace-mobile-div background-color-tertiary padding-medium"><div style="color:#014d40" class="text-size-medium-new text-color-green text-weight-bold">Trove Mobile App</div><div class="spacer-xsmall"></div><div class="text-size-small-new text-color-gray-500">Product Design</div><div class="spacer-small"></div><div class="div-block-18"><img loading="lazy" src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972ff874a1ddec3a78a6699_Frame%2014.webp" alt="" sizes="(max-width: 767px) 100v
128w, (max-width: 991px) 727px, 940px, 100vw" srcset="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972ff874a1ddec3a78a6699_Frame%2014-p-500.webp 500w, https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972ff874a1ddec3a78a6699_Frame%2014.webp 562w" class="portfolio-card_img"/></div></div><div class="trace-div background-color-alternate padding-medium"><div class="trave-mobile-content-block background-color-alternate"><div class="text-size-medium-new text-color-gray-900 text-weight-bold">Trove Mobile App</div><div class="tag-pill background-color-fiftry"><div class="text-size-small-new text-color-light-blue-secondary text-weight-medium">Product Design</div></div></div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-500 h-small">Early-stage product design and UI exploration for a peer-to-peer collectibles marketplace.</div><div class="spacer-small"></div><div class="w-layout-hflex timeline-flex"><div class="text-size-small-new text-color-gray-500">Time line: </div><div class="text-size-small-new text-color-gray-500">1 Week</div></div></div></a></div><div role="listitem" class="w-dyn-item"><a href="/work/chin-chin-website" class="portfolio-content-grid shadow w-inline-block"><div style="background-image:url("https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb8e7_Ellipse%205%20(1).svg")" class="trace-mobile-div background-color-tertiary padding-medium"><div style="color:#ed1c25" class="text-size-medium-new text-color-green text-weight-bold">Chin Chin Website</div><div class="spacer-xsmall"></div><div class="text-size-small-new text-color-gray-500">Product Design</div><div class="spacer-small"></div><div class="div-block-18"><img loading="lazy" src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972ffb0bf2e9e8c548bc2a6_Frame%2015.webp" alt="" sizes="(max-width: 767px) 100vw, (max-width: 991px) 727px, 940px, 100vw" srcset="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972ffb0bf2e9e8c548bc2a6_Frame%2015-p-500.webp 500w, https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972ffb0bf2e9e8c548bc2a6_Frame%2015.webp 562w" class="portfolio-card_img"/></div></div><div class="trace-div background-color-alternate padding-medium"><div class="trave-mobile-content-block background-color-alternate"><div class="text-size-medium-new text-color-gray-900 text-weight-bold">Chin Chin Website</div><div class="tag-pill background-color-fiftry"><div class="text-size-small-new text-color-light-blue-secondary text-weight-medium">Product Design</div></div></div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-500 h-small">Unified Chin Chinâs website, ordering flow, and marketing funnel to create a seamless customer journey and measurable growth.</div><div class="spacer-small"></div><div class="w-layout-hflex timeline-flex"><div class="text-size-small-new text-color-gray-500">Time line: </div><div class="text-size-small-new text-color-gray-500">12 Months</div></div></div></a></div></div></div></div></div></div></section><section class="testimonial-sec"><div class="padding-global"><div class="padding-section-medium"><div class="w-layout-blockcontainer container-large w-container"><div class="hero-content_wrapper"><div class="w-layout-hflex flex-block-9"><div class="blue-line"></div><div class="text-size-small-new text-color-light-blue-secondary text-weight-semibold uppercase">TESTIMONIAL</div></div><div class="spacer-medium"></div><div class="w-layout-hflex flex-block-10 text-align-center"><div><h2 class="heading-style-h2-new text-color-blue-600"><span class="underlined">Stories</span> In Growth From Our</h2></div><div class="sliding-text-wrapper text-align-left-copy"><h2 class="sliding-text text-color-blue-600">Partners</h2><h2 class="sliding-text text-color-blue-600">Friends</h2><h2 class="sliding-text text-color-blue-600">Clients</h2><h2 class="sliding-text text-color-blue-600">Colleagues</h2></div></div><div class="spacer-medium"></div><div class="max-width-large"><div class="text-size-regular-new text-color-gray-500 text-align-center">Hear from some of our amazing customers who are automating their finances.</div></div><div class="spacer-medium"></div></div><div class="testimonial_component"><div class="testimonial_list"><div class="testimonial_item _1"><div class="testimonial_content_mask"><div class="testimonial_text_inner"><p class="text-size-small-new text-color-gray-700">
128During a time when FTM Hospitality needed reliable design support, NUUX Design Studios stepped in with a thoughtful and well-communicated process. They approached the project with realism, flexibility, and a commitment to clarity every step of the way.<br/></p><div class="spacer-large"></div><h2 class="text-size-large-new text-color-gray-900 text-weight-bold">Ron So</h2><h3 class="text-size-tiny-new text-color-gray-500">Marketing Manager, FTM Hospitality: Chin Chin, BBC</h3></div></div><div class="testimonial_image_wrapper"><div class="testimonial_image _1"></div></div></div><div class="testimonial_item _2"><div class="testimonial_content_mask"><div class="testimonial_text_inner"><p class="text-size-small-new text-color-gray-700">Working with NUUX Design Studios was smooth and efficient. They quickly understood the project's needs and delivered user-friendly wireframes with precision and care. The collaborative process and strong UX thinking stood out throughout the engagement.</p><div class="spacer-large"></div><h2 class="text-size-large-new text-color-gray-900 text-weight-bold">Lucia</h2><h3 class="text-size-tiny-new text-color-gray-500">iNCMicro, CEO</h3></div></div><div class="testimonial_image_wrapper"><div class="testimonial_image"></div></div></div><div class="testimonial_item _3"><div class="testimonial_content_mask is-active"><div class="testimonial_text_inner"><p class="text-size-small-new text-color-gray-700">NUUX Design Studios brought structure and clarity to a complex information architecture challenge. Their ability to break down requirements and provide clear, strategic recommendations helped us move forward with confidence. Their professionalism and collaborative approach made the experience stand out.<br/></p><div class="spacer-large"></div><h2 class="text-size-large-new text-color-gray-900 text-weight-bold">Sachin Kumar</h2><h3 class="text-size-tiny-new text-color-gray-500">Co-Founder & CEO, Prema Collective</h3></div></div><div class="testimonial_image_wrapper"><div class="testimonial_image _3"></div></div></div><div class="testimonial_item _4"><div class="testimonial_content_mask"><div class="testimonial_text_inner"><p class="text-size-small-new text-color-gray-700">NUUX Design Studios proved to be a responsive and capable UI/UX partner. Their team asked the right questions up front, stayed engaged throughout the project, and consistently delivered thoughtful, effective design solutions that fit well into our development pipeline.</p><div class="spacer-large"></div><h2 class="text-size-large-new text-color-gray-900 text-weight-bold">Brian Yeo</h2><h3 class="text-size-tiny-new text-color-gray-500">Lead Engineer, DivergeIT</h3></div></div><div class="testimonial_image_wrapper"><div class="testimonial_image _4"></div></div></div><div class="testimonial_item _5"><div class="testimonial_content_mask"><div class="testimonial_text_inner"><p class="text-size-small-new text-color-gray-700">NUUX Design Studios delivered outstanding work across several UX/UI projects, including key landing pages. Their attention to detail, clear communication, and ability to consistently meet expectations made them a trusted design partner.</p><div class="spacer-large"></div><h2 class="text-size-large-new text-color-gray-900 text-weight-bold">Ryan England</h2><h3 class="text-size-tiny-new text-color-gray-500">AMAX, Marketing Manager</h3></div></div><div class="testimonial_image_wrapper"><div class="testimonial_image _5"></div></div></div></div><div class="testimonial_mobile_nav"><a href="#" class="testimonial_mobile_trigger w-inline-block"><div class="testimonial_mobile_img"></div></a><a href="#" class="testimonial_mobile_trigger w-inline-block"><div class="testimonial_mobile_img _1"></div></a><a href="#" class="testimonial_mobile_trigger w-inline-block"><div class="testimonial_mobile_img _3"></div></a><a href="#" class="testimonial_mobile_trigger w-inline-block"><div class="testimonial_mobile_img _4"></div></a><a href="#" class="testimonial_mobile_trigger w-inline-block"><div class="testimonial_mobile_img _5"></div></a></div></div></div></div></div></section><section class="design-process-sec"><div class="padding-global"><div class="padding-section-medium"><div class="w-layout-blockcontainer container-large w-container"><div class="check-out-div"><div class="w-layout-hflex flex-block-9-copy"><div class="blue-line"></div><div class="text-size-small-new text-color-light-blue-secondary text-weight-semibold uppercase">Our Design Process</div></div><div class="spacer-small"></div><h1 class="heading-style-h2-new text-color-blue-600 tab-small">How We Build Engaging Digital Experiences</h1><div class="spacer-large"></div><div class="w-dyn-list"><div role="list" class="grid-21 w-dyn-items"><div role="listitem" class="w-dyn-item"><div class="clean-content-div background-color-fiftry padding-small"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb918_content-writing.svg" loading="lazy" alt="" class="image-39"/><div class="spacer-small"></div><div class="text-size-large-new text-weight-semibold">Discovery & Research</div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-600">We deep-dive into your audience, goals, and market to shape a strong foundation.</div></div></div><div role="listitem" class="w-dyn-item"><div class="clean-content-div background-color-fiftry padding-small"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb914_grid.svg" loading="lazy" alt="" class="image-39"/><div class="spacer-small"></div><div class="text-size-large-new text-weight-semibold">Wireframing & Prototyping</div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-600">We create interactive prototypes to test functionality and refine UX before full design.</div></div></div><div role="listitem" class="w-dyn-item"><div class="clean-content-div background-color-fiftry padding-small"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61f/6972171a3a6d9e19bd0cb919_pen-tool-03.svg" loading="lazy" alt="" class="image-39"/><div class="spacer-small"></div><div class="text-size-large-new text-weight-semibold">User Interface & Interaction Design</div><div class="spacer-small"></div><div class="text-size-small-new text-color-gray-600">We craft clean, intuitive interfaces that make your product feel seamless and natural to use.</div></div></div></div></div></div></div></div></div></section><section data-w-id="08bf4024-fb0b-d178-a033-99fdefc73177" class="want-to-see-sec"><div class="padding-global"><div class="padding-section-medium"><div class="w-layout-blockcontainer container-large bg-img w-container"><div class="hero-content_wrapper padding-small"><div class="spacer-xlarge"></div><div class="w-layout-hflex flex-block-10"><div class="text-align-center"><h2 class="heading-style-h2-new text-color-alternate text-align-center">Want to see what we can do for you</h2></div></div><div class="spacer-medium"></div><div class="max-width-large"><div class="text-size-medium-new text-weight-normal text-color-alternate text-align-center grey-200">Letâs turn your vision into something people can click, use, and appreciate.</div></div><div class="spacer-medium"></div><div class="w-layout-hflex flex-block-13"><a href="/contact-us" class="button-copy is-icon-new w-inline-block"><div class="text-block-4">Letâs Talk</div><div class="icon-1x1-small _w-20 w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 129 <path d="M2 9.99998C15.7999 9.99998 16.6249 9.99998 18.8749 9.99998M18.8749 9.99998C14.9865 8.93704 13.625 7.37499 13.25 4M18.8749 9.99998C14.6036 10.0815 13.3373 13.4912 13.25 16" stroke="CurrentColor" stroke-linecap="round"/> 130</svg></div></a></div><div class="spacer-xlarge"></div><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976da59bc1876574c61c580_cta%20desktop.png" loading="lazy" sizes="100vw" srcset="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976da59bc1876574c61c580_cta%20desktop-p-500.png 500w, https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976da59bc1876574c61c580_cta%20desktop-p-800.png 800w, https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976da59bc1876574c61c580_cta%20desktop-p-1080.png 1080w, https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976da59bc1876574c61c580_cta%20desktop.png 1152w" alt="" class="image-18"/>
130<img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6976da590850728bd1496ef1_cta%20respon.png" loading="eager" alt="" class="image-18 mob"/></div></div></div></div></section><section class="footer-sec"><div class="padding-global"><div class="padding-section-small"><div class="w-layout-blockcontainer container-large w-container"><div class="w-layout-hflex flex-border"><div><a aria-label="visit our home page" href="/" class="w-inline-block"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb76d_Logo%20(9).svg" loading="lazy" alt=""/></a><div class="spacer-medium"></div><div class="w-layout-hflex flex-block-16"><div><a href="/" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500">Home</div></a></div><div><a href="/about-us" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500">About Us</div></a></div><div><a href="/work" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500">Portfolio</div></a></div><div><a href="/insights" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500">Insights & Blog</div></a></div><div><a href="/contact-us" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500">Contact Us</div></a></div></div><div class="spacer-medium"></div></div><div class="w-layout-hflex flex-block-17"><a aria-label="visit our linkedin page" href="https://www.linkedin.com/company/nuuxstudios/" class="social w-inline-block"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb7c1_Property%201%3Dhover%20(1).svg" loading="lazy" alt="" class="colored-social-icon"/><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb790_Linkedin.svg" loading="lazy" alt="" class="grey-social-icon"/></a><a aria-label="visit our facebook page" href="https://www.facebook.com/people/NUUX-Design-Studios/61570284456882/" class="social w-inline-block"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb7c0_Property%201%3Dhover%20(2).svg" loading="lazy" alt="" class="colored-social-icon"/><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb791_Facebook.svg" loading="lazy" alt="" class="grey-social-icon"/></a><a aria-label="visit our instagram page" href="https://www.instagram.com/nuuxstudios/" class="social w-inline-block"><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb7aa_Property%201%3Dhover%20(3).svg" loading="lazy" alt="" class="colored-social-icon"/><img src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/6972171a3a6d9e19bd0cb7c2_Property%201%3DDefault.svg" loading="lazy" alt="" class="grey-social-icon"/></a></div></div><div class="spacer-medium"></div><div class="div-block-43"><div class="text-size-regular-new text-color-gray-500 text-align-center copyright">© 2025 NUUX. All rights reserved.</div><div class="w-layout-hflex privacy"><div><a href="/sms-privacy-policy" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500 copyright">SMS Privacy</div></a></div><div><a href="/privacy-policy" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500">Privacy</div></a></div><div><a href="/cookies-policy" class="link-block-3 w-inline-block"><div class="text-size-small-new text-color-gray-500">Cookies</div></a></div></div></div></div></div></div></section></div></div>
130<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6972171a3a6d9e19bd0cb61e" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
130<script src="https://cdn.prod.website-files.com/6972171a3a6d9e19bd0cb61e/js/webflow.eea48964.74e0e1c85960534c.js" type="text/javascript" integrity="sha384-ywE5dGTSWgP3sWAp0hu9/N2bq7mwXdifA7ApYfi3Dpof3hJG8dgGQGUR49ErcUvI" crossorigin="anonymous"></script>
130<script src="https://cdn.prod.website-files.com/gsap/3.15.0/gsap.min.js" type="text/javascript"></script>
130<script src="https://cdn.prod.website-files.com/gsap/3.15.0/SplitText.min.js" type="text/javascript"></script>
130<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 130-131
130 131<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
131GTM-N23MMQRC
vendor: 83 bytes, lines 131-132
131" 132height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
133<!-- End Google Tag Manager (noscript) -->
134<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
vendor: 1 bytes, line 134
134
135<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
135 136<!--
136<script src="https://slater.app/projects/18592/pages/54192.js"></script>
136 --> 137
138<script> 139document.addEventListener("DOMContentLoaded", (event) => { 140 gsap.registerPlugin(ScrollTrigger); 141 142 // Initialize modules safely 143 initTestimonials(); 144 145}); 146 147function initSlidingText() { 148 const words = document.querySelectorAll(".sliding-text"); 149 150 if (words.length === 0) return; 151 152 // 1. INSTANTLY stack them 153 // We set absolute position via GSAP too, just to be safe, 154 // but it is BETTER to do this in Webflow CSS as per Step 1. 155 gsap.set(words, { 156 position: "absolute", 157 top: 0, 158 left: 0, 159 width: "100%", 160 margin: 0, 161 y: "100%", 162 opacity: 0 163 }); 164 165 // 2. Show the first one 166 gsap.set(words[0], { y: "0%", opacity: 1 }); 167 168 // 3. Animation Loop 169 let tl = gsap.timeline({ repeat: -1, repeatDelay: 0 }); 170 171 words.forEach((word, index) => { 172 let nextWord = index === words.length - 1 ? words[0] : words[index + 1]; 173 174 tl.to(word, { 175 y: "-100%", 176 opacity: 0, 177 duration: 0.8, 178 ease: "power2.inOut", 179 delay: 2 180 }) 181 .fromTo(nextWord, { y: "100%", opacity: 0 }, { 182 y: "0%", 183 opacity: 1, 184 duration: 0.8, 185 ease: "power2.inOut" 186 }, 187 "<" 188 ); 189 }); 190} 191 192 193// ========================================================= 194// MODULE 2: TESTIMONIALS 195// ========================================================= 196function initTestimonials() { 197 // 1. Guard Clause: If no testimonial items exist, stop. 198 const items = document.querySelectorAll(".testimonial_item"); 199 if (items.length === 0) return; 200 201 const mobileTriggers = document.querySelectorAll(".testimonial_mobile_trigger"); 202 203 // Default Active Index logic 204 let initialIndex = items.length > 2 ? 2 : 0; 205 206 // Initialize MatchMedia 207 let mm = gsap.matchMedia(); 208 209 mm.add({ 210 isDesktop: "(min-width: 992px)", 211 isMobile: "(max-width: 991px)" 212 }, (context) => { 213 let { isDesktop, isMobile } = context.conditions; 214 215 // ================= DESKTOP LOGIC ================= 216 if (isDesktop) { 217 let activeItem = items[initialIndex]; 218 219 // Init Styles 220 gsap.set(items, { clearProps: "all", display: "flex" }); 221 gsap.set(".testimonial_content_mask", { width: 0, height: "auto" }); 222 gsap.set(".testimonial_image", { filter: "grayscale(100%)" }); 223 224 // Open default item (safely) 225 if (activeItem) { 226 gsap.set(activeItem.querySelector(".testimonial_content_mask"), { width: "auto" }); 227 gsap.set(activeItem.querySelector(".testimonial_image"), { filter: "grayscale(0%)" }); 228 } 229 230 const desktopClickHandler = (item) => { 231 if (item === activeItem) return; 232 233 // Close Old (Safely) 234 const oldMask = activeItem?.querySelector(".testimonial_content_mask"); 235 const oldImg = activeItem?.querySelector(".testimonial_image"); 236 if (oldMask) gsap.to(oldMask, { width: 0, duration: 0.6, ease: "power3.inOut" }); 237 if (oldImg) gsap.to(oldImg, { filter: "grayscale(100%)", duration: 0.6 }); 238 239 // Open New 240 const newMask = item.querySelector(".testimonial_content_mask"); 241 const newImg = item.querySelector(".testimonial_image"); 242 243 if (newMask) gsap.fromTo(newMask, { width: 0 }, { 244 width: "auto", 245 duration: 0.6, 246 ease: "power3.inOut" 247 }); 248 if (newImg) gsap.to(newImg, { filter: "grayscale(0%)", duration: 0.6 }); 249 250 activeItem = item; 251 }; 252 253 items.forEach((item) => { 254 item._desktopClick = () => desktopClickHandler(item); 255 item.addEventListener("click", item._desktopClick); 256 }); 257 258 return () => { 259 items.forEach(item => item.removeEventListener("click", item._desktopClick)); 260 }; 261 } 262 263 // ================= MOBILE LOGIC ================= 264 if (isMobile) { 265 // Safety Check: Do we have mobile triggers? 266 if (mobileTriggers.length === 0) return; 267 268 let activeIndex = initialIndex; 269 270 // Init Mobile Styles 271 gsap.set(items, { display: "none", opacity: 0, width: "100%" }); 272 gsap.set(".testimonial_content_mask", { width: "auto", height: "auto" }); 273 gsap.set(".testimonial_image", { filter: "grayscale(0%)" }); 274 275 // Show Active 276 if (items[activeIndex]) gsap.set(items[activeIndex], { display: "flex", op
276acity: 1 }); 277 278 // Init Triggers 279 const mobileImages = document.querySelectorAll(".testimonial_mobile_img"); 280 gsap.set(mobileTriggers, { opacity: 0.6 }); 281 if (mobileTriggers[activeIndex]) gsap.set(mobileTriggers[activeIndex], { opacity: 1 }); 282 283 gsap.set(mobileImages, { filter: "grayscale(100%)" }); 284 if (mobileImages[activeIndex]) gsap.set(mobileImages[ 285 activeIndex], { filter: "grayscale(0%)" }); 286 287 mobileTriggers.forEach((trigger, index) => { 288 trigger._mobileClick = () => { 289 if (index === activeIndex) return; 290 291 const outgoingItem = items[activeIndex]; 292 const incomingItem = items[index]; 293 const outgoingTrigger = mobileTriggers[activeIndex]; 294 const incomingTrigger = mobileTriggers[index]; 295 296 // Safety: If any element is missing, abort animation for that element 297 if (!outgoingItem || !incomingItem) return; 298 299 const outgoingImg = outgoingTrigger?.querySelector(".testimonial_mobile_img"); 300 const incomingImg = incomingTrigger?.querySelector(".testimonial_mobile_img"); 301 302 // 1. Content Animation 303 gsap.to(outgoingItem, { 304 opacity: 0, 305 duration: 0.3, 306 onComplete: () => { 307 gsap.set(outgoingItem, { display: "none" }); 308 gsap.set(incomingItem, { display: "flex" }); 309 gsap.fromTo(incomingItem, { opacity: 0, y: 10 }, { 310 opacity: 1, 311 y: 0, 312 duration: 0.4 313 }); 314 } 315 }); 316 317 // 2. Trigger Animation 318 if (outgoingTrigger) gsap.to(outgoingTrigger, { opacity: 0.6, duration: 0.3 }); 319 if (outgoingImg) gsap.to(outgoingImg, { 320 filter: "grayscale(100%)", 321 duration: 0.3 322 }); 323 324 if (incomingTrigger) gsap.to(incomingTrigger, { opacity: 1, duration: 0.3 }); 325 if (incomingImg) gsap.to(incomingImg, { 326 filter: "grayscale(0%)", 327 duration: 0.3 328 }); 329 330 activeIndex = index; 331 }; 332 333 trigger.addEventListener("click", trigger._mobileClick); 334 }); 335 336 return () => { 337 mobileTriggers.forEach(t => t.removeEventListener("click", t._mobileClick)); 338 gsap.set(items, { clearProps: "display,opacity,width" }); 339 gsap.set(mobileImages, { clearProps: "filter" }); 340 }; 341 } 342 }); 343} 344 345</script>
vendor: 1 bytes, line 345
345
346<script src="https://hubspotv2.use1-marketplace-1p-apps-prod-red.if.webflow.services/static/disable-hubspot-chatbot.js" type="text/javascript" async="" defer=""></script>
346<script src="https://js.hs-scripts.com/146617653.js" type="text/javascript" async="" defer=""></script>
346</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.