Cactuslab, a web and app design and development studio with superpowers in Auckland, New Zealand

<!doctype html>  <html lang="en" class="js--html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/static/img/favicon/ms-icon-144x144.2d537cba.png"> <meta name="theme-color" content="#ffffff"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@cactuslab"> <meta name="twitter:title" content="Cactuslab"> <meta name="twitter:description" content="A web and app design and development studio with superpowers in Auckland, New Zealand"> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/yo/7i/y3/s1/cl-bubbles-0-250-0-0.png?k=51c89484d0"> <meta property="og:url" content="https://cactuslab.com/"> <meta property="og:type" content="website"> <meta property="og:title" content="Cactuslab"> <meta property="og:description" content="A web and app design and development studio with superpowers in Auckland, New Zealand"> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/yo/7i/y3/s1/cl-bubbles-0-250-0-0.png?k=51c89484d0"> <meta property="og:image:width" content="250"> <meta property="og:image:height" content="250"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab, a web and app design and development studio with superpowers in Auckland, New Zealand </title> <link rel="stylesheet" href="/static/css/main.min.9fa619f9.css" type="text/css" media="all"> <link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.f5d574c5.png"> <link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.8aa9891b.png"> <link rel="apple-touch-icon" sizes="72x72" href="/static/img/favicon/apple-icon-72x72.f8a44f32.png"> <link rel="apple-touch-icon" sizes="76x76" href="/static/img/favicon/apple-icon-76x76.8b365de5.png"> <link rel="apple-touch-icon" sizes="114x114" href="/static/img/favicon/apple-icon-114x114.27bae8dc.png"> <link rel="apple-touch-icon" sizes="120x120" href="/static/img/favicon/apple-icon-120x120.5d2efb29.png"> <link rel="apple-touch-icon" sizes="144x144" href="/static/img/favicon/apple-icon-144x144.2d537cba.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/img/favicon/apple-icon-152x152.ec29f70b.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/img/favicon/apple-icon-180x180.83b0e344.png"> <link rel="icon" type="image/png" sizes="192x192" href="/static/img/favicon/android-icon-192x192.fdddf555.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/favicon-96x96.d4326dad.png"> <link rel="icon" type="image/png" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="manifest" href="/static/img/favicon/manifest.1caa16a2.json"> <script type="text/javascript" src="/static/js/main.min.ecc35a3c.js"></script> </head> <body class="js--body -is-not-scrolled"> <div id="wrapper" class="js--wrapper"> <style> html { background-color: #e0e8e8; } </style> <div class="context js--context" data-context-code="home"> <header class="site-header js--site-header"> <div class="scrollbar-offset js--scrollbar-offset -is-fixed"> <div class="constraint js--constraint"> <a class="site-logo js--site-logo" href="/"> <span class="_sr-only">Cactuslab · A web and app design and development studio with superpowers in Auckland, New Zealand</span> <svg class="glyph" xmlns="http://www.w3.org/2000/svg" width="36" height="50" viewBox="0 0 36 50" preserveAspectRatio="xMaxYMid meet"> <title>Cactuslab Glyph Logo</title> <g fill="none" fill-rule="evenodd" transform="translate(6 5)"> <circle class="bubble js--bubble" cx="16" cy="38" r="3"/> <circle class="bubble js--bubble" cx="6" cy="28" r="6"/> <circle class="bubble js--bubble" cx="16" cy="9" r="9"/> </g> </svg> <svg class="wordmark" xmlns="http://www.w3.org/2000/svg" width="123" height="25" viewBox="0 0 123 25" preserveAspectRatio="xMinYMid meet"> <title>Cactuslab Wordmark Logo</title> <g fill-rule="evenodd" stroke-width="0"> <path d="M16.14 4.01c-.987-.707-1.393-.943-2.264-1.238-1.16-.472-2.38-.65-3.658-.65C4.645 2.122.406 6.488.406 12.21c0 6.015 4.18 10.32 10.044 10.32.93 0 1.684-.06 2.67-.295.988-.236 1.452-.412 2.613-.943l-.638-2.005c-1.568.648-2.845.943-4.47.943-4.587 0-7.548-3.243-7.548-8.197 0-4.48 2.96-7.725 7.083-7.725 1.858 0 3.31.472 4.76 1.474l1.22-1.77zm9.36 14.744c-1.916 1.415-2.612 1.71-3.6 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.06-.825.407-1.473l4.993-1.29v2.83zm3.367 1.887c-.696-.11-1.045-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.116-.23-.116-.35-.116-.53 0-.76.638-1.18 2.032-1.18 1.683 0 2.554.59 2.554 1.65v2.42l-4.644 1.12c-1.974.47-2.96 1.77-2.96 3.78 0 2.127 1.392 3.54 3.598 3.54.93 0 2.032-.292 2.845-.763.464-.235.755-.47 1.393-1.06.117 1.296.755 1.77 2.613 1.886l.464-1.83zM42 21.06l-1.16-1.77c-1.103.826-1.916 1.12-3.193 1.12-2.845 0-4.644-1.945-4.644-5.012 0-3.007 1.8-5.13 4.47-5.13 1.22 0 1.974.294 3.02 1.18l1.276-1.83c-.93-.648-1.34-.884-2.21-1.12-.64-.177-1.28-.236-1.98-.236-4.13 0-6.97 3.007-6.97 7.253 0 4.13 2.78 6.96 6.85 6.96 1.33 0 2.61-.295 3.71-.943.11-.06.4-.237.81-.473zm10-.236l-.93-1.474c-.928.707-1.392.943-1.915.943-.464 0-.754-.236-.754-.65-.05-.116-.05-.41-.05-.824l-.06-.59v-7.67h3.54V8.67h-3.54V4.717h-2.21v3.95l-2.26.59v1.298h2.27v8.906c0 1.77 1.04 3.01 2.55 3.01 1.05 0 1.8-.35 3.37-1.65zm13.83 1.297V8.61h-2.263v8.257c-1.51 2.123-3.658 3.656-5.05 3.656-1.104 0-1.57-.708-1.57-2.36V8.61h-2.205v10.144c0 2.477 1.22 3.774 3.54 3.774 2.033 0 3.775-1.06 5.343-3.184v2.83h2.206v-.06zm12.496-3.48c0-2.12-.813-3.06-3.6-4.24-2.438-1-2.786-1.24-3.31-1.77-.23-.23-.347-.53-.347-.82 0-1 .98-1.71 2.49-1.71.52 0 .98.06 1.56.24.69.18 1.04.36 1.91.89l1.1-1.83c-1.108-.65-1.63-.822-2.618-1-.58-.06-1.16-.116-1.685-.116-3.13 0-5.05 1.47-5.05 3.83 0 1.65.87 2.537 3.485 3.657 2.38 1 3.02 1.355 3.544 2.12.174.177.29.59.29.944 0 1.06-.987 1.77-2.38 1.77-.93 0-2.148-.3-3.077-.77-.236-.12-.58-.294-.99-.53l-.93 1.887c1.336.707 1.86.88 3.136 1.12.7.118 1.28.177 1.86.177 2.845 0 4.587-1.415 4.587-3.833z"/> <path d="M81.836.413h2.206v21.703h-2.206z"/> <path d="M94.62 18.754c-1.915 1.415-2.61 1.71-3.598 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.058-.825.406-1.473l4.993-1.29v2.83zm3.31 1.887c-.696-.11-1.044-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.05-.23-.11-.35-.11-.53 0-.76.64-1.18 2.03-1.18 1.69 0 2.56.59 2.56 1.65v2.42l-4.65 1.11c-1.97.47-2.96 1.77-2.96 3.78 0 2.127 1.39 3.54 3.6 3.54.93 0 2.03-.293 2.85-.764.467-.236.757-.472 1.396-1.062.116 1.298.754 1.77 2.61 1.888l.466-1.83zm11.973-5.77c0 2.24-.522 3.54-1.974 4.54-.64.47-1.34.77-2.15.95-.41.06-.76.12-1.16.12-.82 0-1.34-.11-1.92-.41v-8.61c1.1-.76 2.09-1.06 3.31-1.06 2.44 0 3.89 1.65 3.89 4.49zm2.44-.12c0-3.89-2.265-6.49-5.633-6.49-.813 0-1.8.12-2.496.3-.523.18-.813.3-1.51.65V.42h-2.206v21.29c.64.29.87.41 1.335.47.697.18 1.916.292 2.67.292 4.762 0 7.84-3.01 7.84-7.728z"/> </g> </svg> </a> <nav class="site-nav"> <ul class="navlist"> <li class="navitem"><a class="label" href="/about/">About</a></li> <li class="navitem"><a class="label" href="/work/">Work</a></li> <li class="navitem"><a class="label" href="/ventures/">Ventures</a></li> </ul> </nav> </div> </div> </header> <article class="site-content context-transition -fade js--context-transition"> <div class="hero-frame js--hero-frame hero-list js--hero-list"> <article class="hero js--hero site-hero -cactus" data-hero-type="cactus" data-logo-color="" data-background-color="#e0e8e8" data-text-color="herocactus"> <div class="constraint js--constraint"> <header class="header js--header -has-no-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Sites, apps and superpowers.</h1>   <button type="button" class="ctabutton" data-cell-index="1"><span class="label">New Work →</span></button>  </div> </header> <div class="media js--media"> <div class="cactus js--cactus" style="width: 57.14285714285714%"> <div class="ratio" style="padding-top: 175.0%;"> <img data-aspect-ratio="1.75" src="/static/img/branding/cactus-1x.5c594919.png" srcset="/static/img/branding/cactus-2x.3b2d3e04.png 2x" alt="Cactuslab Inflatable Hero"> </div> </div> </div> </div> </article>  <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#D07F1C" data-text-color="light" > <div class="constraint js--constraint"> <header class="header js--header -has-no-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Ockham Residential</h1> <div class="rich-text -smaller description"> <p>We’ve completely redesigned Auckland property developer Ockham’s flagship site, giving its crack digital team a more flexible set of tools so they can quickly and easily compile complex layouts from a predetermined set of components.</p> </div> <a class="ctabutton" href="/work/ockham-residential/"><span class="label">View Project</span></a> </div> </header> <div class="media js--media -is-only-device-desktop -has-device-desktop -has-no-device-tablet -has-no-device-phone"> <figure class="device js--device -desktop" data-device-type="desktop" data-layer="0" > <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5625" src="/assets/resized/sm/upload/hs/34/z3/tm/ockham-featured-0-800-0-0.jpg?k=60d9373cc8" srcset="/assets/resized/sm/upload/hs/34/z3/tm/ockham-featured-0-1600-0-2500-crop-1.jpg?k=c2ff906eaa 2x" /> </div> </div> </div> </figure> </div> </div> </article> <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#E40712" data-text-color="light" > <div class="constraint js--constraint"> <header class="header js--header -has-no-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Honda New Zealand</h1> <div class="rich-text -smaller description"> <p>We worked with Honda New Zealand’s creative agency to deliver a new website showcasing the company’s complete range of vehicles, with accompanying information and tools, and—in a world first—a complete end-to-end online vehicle purchasing flow.</p> </div> <a class="ctabutton" href="/work/honda-new-zealand/"><span class="label">View Project</span></a> </div> </header> <div class="media js--media -is-only-device-desktop -has-device-desktop -has-no-device-tablet -has-no-device-phone"> <figure class="device js--device -desktop" data-device-type="desktop" data-layer="0" > <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="2.35125" src="/assets/resized/sm/upload/3q/vm/dq/po/honda-home-crop-tall-0-800-0-0.jpg?k=ecc1359aea" srcset="/assets/resized/sm/upload/3q/vm/dq/po/honda-home-crop-tall-0-1600-0-3760-crop-1.jpg?k=44697b0051 2x" /> </div> </div> </div> </figure> </div> </div> </article> <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#013672" data-text-color="light" > <div class="constraint js--constraint"> <header class="header js--header -has-no-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Barfoot & Thompson</h1> <div class="rich-text -smaller description"> <p>We designed and built this universal app for iOS and iPadOS. It features new corporate branding, an all-new interface and improved agent-mode features that allow the company’s staff to access and manage data for their properties.</p> </div> <a class="ctabutton" href="/work/barfoot-thompson/"><span class="label">View Project</span></a> </div> </header> <div class="media js--media -has-no-device-desktop -has-device-tablet -has-device-phone"> <div class="device js--device -tablet -landscape" data-device-type="tablet" data-layer="0" style="color: rgb(0,17,34)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.75" src="/assets/resized/sm/upload/j9/wu/vx/r9/IMG_0175-0-800-0-0.jpg?k=2280839738" srcset="/assets/resized/sm/upload/j9/wu/vx/r9/IMG_0175-0-1600-0-1200-crop-1.jpg?k=98fe5a9eb7 2x" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phone" data-layer="1" data-offset-x="0.75" style="color: rgb(0,17,34)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.78" src="/assets/resized/sm/upload/r7/et/hj/a2/IMG_0001-0-350-0-0.jpg?k=fa6ea35c1d" srcset="/assets/resized/sm/upload/r7/et/hj/a2/IMG_0001-0-700-0-1244-crop-1.jpg?k=27cf65e385 2x" /> </div> </div> </div> </div> </div> </div> </article> <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#402F50" data-text-color="light" > <div class="constraint js--constraint"style=" background-image: url('/assets/sm/upload/g8/ig/ds/zy/zoomy-app-icon-2018.svg?k=9c4c244533'); background-repeat: no-repeat; background-position: 42.5% 75%;"> <header class="header js--header -has-no-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Zoomy</h1> <div class="rich-text -smaller description"> <p>We worked with local ride-sharing company Zoomy to re-imagine its rider app for iOS and Android. The result is a much improved user experience and two beautiful new apps.</p> </div> <a class="ctabutton" href="/work/zoomy/"><span class="label">View Project</span></a> </div> </header> <div class="media js--media -is-only-device-phone -has-no-device-desktop -has-no-device-tablet -has-device-phone"> <div class="device js--device -phone -portrait" data-device-type="phone" data-layer="0" style="color: rgb(17,17,17)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7771428571428571" src="/assets/resized/sm/upload/nr/kk/gs/vm/z2-0-350-0-0.jpg?k=987dc22131" srcset="/assets/resized/sm/upload/nr/kk/gs/vm/z2-0-700-0-1244-crop-1.jpg?k=8480ed3b07 2x" /> </div> </div> </div> </div> </div> </div> </article> <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#239A39" data-text-color="light" > <div class="constraint js--constraint"> <header class="header js--header -has-no-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Designers Institute</h1> <div class="rich-text -smaller description"> <p><span>We worked with two of the Institute’s long-time partners to</span><span> deliver this evolution of its site, placing more focus on our design community and bringing event RSVPs in-house.</span></p> </div> <a class="ctabutton" href="/work/designers-institute/"><span class="label">View Project</span></a> </div> </header> <div class="media js--media -has-device-desktop -has-no-device-tablet -has-device-phone"> <figure class="device js--device -desktop" data-device-type="desktop" data-layer="0" > <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.47375" src="/assets/resized/sm/upload/u2/t2/83/ur/dinz-2-crop-0-800-0-0.jpg?k=29d183ce62" srcset="/assets/resized/sm/upload/u2/t2/83/ur/dinz-2-crop-0-1600-0-2356-crop-1.jpg?k=25ed0ee1a8 2x" /> </div> </div> </div> </figure> <div class="device js--device -phone -portrait" data-device-type="phone" data-layer="1" data-offset-x="0.8" style="color: rgb(34,34,34)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.78" src="/assets/resized/sm/upload/0k/hb/nr/h0/IMG_7488-0-350-0-0.jpg?k=29d183ce62" srcset="/assets/resized/sm/upload/0k/hb/nr/h0/IMG_7488-0-700-0-1244-crop-1.jpg?k=26bbca24a6 2x" /> </div> </div> </div> </div> </div> </div> </article> <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#34AD40" data-text-color="light" > <div class="constraint js--constraint"> <header class="header js--header -has-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Vend Register</h1> <div class="rich-text -smaller description"> <p>We worked with Vend to design a new interface and experience for its flagship iPad app, and continue to provide feature development and maintenance assistance.</p> </div> <a class="ctabutton" href="/work/vend-register/"><span class="label">View Project</span></a> <div class="best-award -silver"> <div class="sticker"></div> </div> </div> </header> <div class="media js--media -is-only-device-tablet -has-no-device-desktop -has-device-tablet -has-no-device-phone"> <div class="device js--device -tablet -landscape" data-device-type="tablet" data-layer="0" style="color: rgb(255,255,255)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.75" src="/assets/resized/sm/upload/s7/yr/m1/ko/vend-sale-0-800-0-0.jpg?k=da6aad8dfe" srcset="/assets/resized/sm/upload/s7/yr/m1/ko/vend-sale-0-1600-0-1200-crop-1.jpg?k=4924b049dc 2x" /> </div> </div> </div> </div> </div> </div> </article> <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#A0A8B0" data-text-color="dark" > <div class="constraint js--constraint"> <header class="header js--header -has-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Back of a Napkin</h1> <div class="rich-text -smaller description"> <p>We created this tool for <span>Buddle Findlay</span> to promote its Startup Companies division. The resulting webapp creates a customised contract based on an applicant’s answers to five simple questions.</p> </div> <a class="ctabutton" href="/work/back-of-a-napkin/"><span class="label">View Project</span></a> <div class="best-award -gold"> <div class="sticker"></div> </div> </div> </header> <div class="media js--media -is-only-device-desktop -has-device-desktop -has-no-device-tablet -has-no-device-phone"> <figure class="device js--device -desktop" data-device-type="desktop" data-layer="0" > <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.875" src="/assets/resized/sm/upload/z9/0v/n1/ah/napkin-0-800-0-0.jpg?k=81a5a2f630" srcset="/assets/resized/sm/upload/z9/0v/n1/ah/napkin-0-1600-0-1400-crop-1.jpg?k=b55f0f84fb 2x" /> </div> </div> </div> </figure> <div class="pin -gold" data-layer="1"> <div class="ratio js--ratio" style="padding-top: 47.5%"> <div class="mask"> <img src="/static/img/best/gold-pin.e8cb5099.png" data-aspect-ratio="0.475"/> </div> </div> </div> </div> </div> </article> <article class="hero js--hero site-hero -project" data-hero-type="project" data-background-color="#556677" data-text-color="light" > <div class="constraint js--constraint"> <header class="header js--header -has-best-award"> <div class="measure js--measure"> <h1 class="name js--name">Letterboxd</h1> <div class="rich-text -smaller description"> <p>For years we dreamt of a better place to discuss our shared interest in film, and when we couldn’t find the right outlet, we made one. The result is Letterboxd, a social network for grass-roots film discussion and discovery.</p> </div> <a class="ctabutton" href="/work/letterboxd/"><span class="label">View Project</span></a> <div class="best-award -gold"> <div class="sticker"></div> </div> </div> </header> <div class="media js--media -has-device-desktop -has-no-device-tablet -has-device-phone"> <figure class="device js--device -desktop" data-device-type="desktop" data-layer="0" data-offset-x="-0.125"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.8125" src="/assets/resized/sm/upload/o1/op/oq/p2/lb-film-tdk-0-800-0-0.jpg?k=3296fa042b" srcset="/assets/resized/sm/upload/o1/op/oq/p2/lb-film-tdk-0-1600-0-2900-crop-1.jpg?k=8f7cf7b741 2x" /> </div> </div> </div> </figure> <div class="device js--device -phone -portrait" data-device-type="phone" data-layer="1" data-offset-x="0.75" style="color: rgb(32,40,48)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.78" src="/assets/resized/sm/upload/dr/k6/0s/ly/lb-tdk-2019-0-350-0-0.jpg?k=675726d5c2" srcset="/assets/resized/sm/upload/dr/k6/0s/ly/lb-tdk-2019-0-700-0-1244-crop-1.jpg?k=993832e57a 2x" /> </div> </div> </div> </div> <div class="pin -gold" data-layer="2"> <div class="ratio js--ratio" style="padding-top: 47.5%"> <div class="mask"> <img src="/static/img/best/gold-pin.e8cb5099.png" data-aspect-ratio="0.475"/> </div> </div> </div> </div> </div> </article>  </div> </article> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-748523-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>

CINXE.COM

Cactuslab, a web and app design and development studio with superpowers in Auckland, New Zealand