Cactuslab · Work · Barfoot & Thompson

<!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_large_image"> <meta name="twitter:site" content="@cactuslab"> <meta name="twitter:title" content="Cactuslab: Barfoot & Thompson"> <meta name="twitter:description" content="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."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/j9/wu/vx/r9/IMG_0175-0-500-0-0.png?k=301e48d8ef"> <meta property="og:url" content="https://cactuslab.com/work/barfoot-thompson/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Barfoot & Thompson at Cactuslab"> <meta property="og:description" content="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."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/j9/wu/vx/r9/IMG_0175-0-500-0-0.png?k=301e48d8ef"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="375"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Barfoot & Thompson </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> .site-logo { color: #013672; } .external-link { color: #013672; } .external-link:hover, .external-link:focus { border-color: #013672; } .project-media .mediaitem { background-color: #013672; } .project-media .deviceset { color: #001122; } </style> <div class="context js--context"> <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 · </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 active"><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-in js--context-transition"> <div class="constraint page-layout -has-no-aside"> <div class="page-body"> <header class="page-section project-information"> <div class="header"> <h1 class="title">Barfoot & Thompson</h1> </div> <div class="body"> <div class="rich-text"> <p>We were excited when <a href="http://www.barfoot.co.nz/">Barfoot & Thompson</a> asked us to re-build its property search iPad app as a universal app to work on all iOS devices. The new version allows home buyers to effortlessly search, save and track properties (and sync selections to Barfoot’s website), and on the business side enables agents to effectively access and manage data about their listed properties. An intensive development period during which we worked closely with Barfoot & Thompson’s internal teams has allowed us to envision and design an all-new interface that delivers a much improved experience.</p> <p><em>Updated in October 2019 with new corporate branding and more modern OS conventions.</em></p> </div> <p><a class="external-link" target="_blank" href="https://itunes.apple.com/nz/app/barfoot-thompson/id545234218">In the App Store</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem deviceset"> <div class="device js--device -tablet -landscape" data-device-type="tablet"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.7505882352941177" src="/assets/resized/sm/upload/yb/oc/ms/cm/IMG_0175-0-850-0-0.jpg?k=cfe715fea9" srcset="/assets/resized/sm/upload/yb/oc/ms/cm/IMG_0175-0-1700-0-1274-crop-1.jpg?k=93b2ebdd43 2x" alt="Detail image for Barfoot & Thompson 2" /> </div> </div> </div> </div> </figure> <figure class="mediaitem deviceset"> <div class="device js--device -tablet -landscape" data-device-type="tablet"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.7505882352941177" src="/assets/resized/sm/upload/8d/ln/c2/by/IMG_0173-0-850-0-0.jpg?k=cb0b3b2258" srcset="/assets/resized/sm/upload/8d/ln/c2/by/IMG_0173-0-1700-0-1274-crop-1.jpg?k=439cba254c 2x" alt="Detail image for Barfoot & Thompson 3" /> </div> </div> </div> </div> </figure> <figure class="mediaitem deviceset"> <div class="device js--device -tablet -landscape" data-device-type="tablet"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.7505882352941177" src="/assets/resized/sm/upload/ta/en/8h/jn/IMG_0174-0-850-0-0.jpg?k=797c11fe65" srcset="/assets/resized/sm/upload/ta/en/8h/jn/IMG_0174-0-1700-0-1274-crop-1.jpg?k=4d8cd09640 2x" alt="Detail image for Barfoot & Thompson 4" /> </div> </div> </div> </div> </figure> <figure class="mediaitem -iphonex deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phonex"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <div class="notch"> <svg width="670" height="100" viewBox="0 0 670 100" xmlns="http://www.w3.org/2000/svg"><path d="M670 1.008C648 1.387 648 14.334 648 27v1c0 27.794-21.206 63-70 63H92c-48.794 0-70-35.206-70-63v-1C22 14.334 22 1.387 0 1.008V0h670v1.008z" fill="#001122" fill-rule="evenodd"/></svg> </div> <img data-aspect-ratio="2.1642512077294684" src="/assets/resized/sm/upload/72/mj/pu/s1/IMG_1930-0-850-0-0.jpg?k=aad91f3b28" alt="Detail image for Barfoot & Thompson 5" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phonex"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <div class="notch"> <svg width="670" height="100" viewBox="0 0 670 100" xmlns="http://www.w3.org/2000/svg"><path d="M670 1.008C648 1.387 648 14.334 648 27v1c0 27.794-21.206 63-70 63H92c-48.794 0-70-35.206-70-63v-1C22 14.334 22 1.387 0 1.008V0h670v1.008z" fill="#001122" fill-rule="evenodd"/></svg> </div> <img data-aspect-ratio="2.1642512077294684" src="/assets/resized/sm/upload/vs/fp/gw/vn/IMG_1929-0-850-0-0.jpg?k=6e4766bb51" alt="Detail image for Barfoot & Thompson 5" /> </div> </div> </div> </div> </figure> <figure class="mediaitem -iphonex deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phonex"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <div class="notch"> <svg width="670" height="100" viewBox="0 0 670 100" xmlns="http://www.w3.org/2000/svg"><path d="M670 1.008C648 1.387 648 14.334 648 27v1c0 27.794-21.206 63-70 63H92c-48.794 0-70-35.206-70-63v-1C22 14.334 22 1.387 0 1.008V0h670v1.008z" fill="#001122" fill-rule="evenodd"/></svg> </div> <img data-aspect-ratio="2.1642512077294684" src="/assets/resized/sm/upload/al/mr/x7/b0/IMG_1932-0-850-0-0.jpg?k=6a2453c5b9" alt="Detail image for Barfoot & Thompson 6" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phonex"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <div class="notch"> <svg width="670" height="100" viewBox="0 0 670 100" xmlns="http://www.w3.org/2000/svg"><path d="M670 1.008C648 1.387 648 14.334 648 27v1c0 27.794-21.206 63-70 63H92c-48.794 0-70-35.206-70-63v-1C22 14.334 22 1.387 0 1.008V0h670v1.008z" fill="#001122" fill-rule="evenodd"/></svg> </div> <img data-aspect-ratio="2.1642512077294684" src="/assets/resized/sm/upload/iv/cd/7j/pr/IMG_1933-0-850-0-0.jpg?k=06c6b02fd6" alt="Detail image for Barfoot & Thompson 6" /> </div> </div> </div> </div> </figure> </section> <section class="page-section projects-more-of-type"> <h3 class="moreoftypetitle">More iOS work</h3> <div class="project-list"> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#402F50"> <a class="repositioning" href="/work/zoomy/"> <h3 class="name">Zoomy</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(17,17,17)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/nr/kk/gs/vm/z2-0-330-0-0.jpg?k=203e1024f9" srcset="/assets/resized/sm/upload/nr/kk/gs/vm/z2-0-660-0-1172-crop-1.jpg?k=d861f7bf1e 2x" alt="Mobile image for Zoomy" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#F93F3F"> <a class="repositioning" href="/work/food-lovers-guide-to-paris/"> <h3 class="name">Food Lover鈥檚 Guide to Paris</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(0,2,34)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/a0/fd/qj/if/map-0-330-0-0.jpg?k=3ad4fc49f9" srcset="/assets/resized/sm/upload/a0/fd/qj/if/map-0-660-0-1172-crop-1.jpg?k=48fad935aa 2x" alt="Mobile image for Food Lover鈥檚 Guide to Paris" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#42CB82"> <a class="repositioning" href="/work/vend-counter/"> <h3 class="name">Vend Counter</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(17,34,51)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/gk/bj/2m/uy/vendc-1-0-330-0-0.jpg?k=ab868331b3" srcset="/assets/resized/sm/upload/gk/bj/2m/uy/vendc-1-0-660-0-1172-crop-1.jpg?k=60407d3ecd 2x" alt="Mobile image for Vend Counter" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#445566"> <a class="repositioning" href="/work/letterboxd-for-ios/"> <h3 class="name">Letterboxd for iOS</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(32,40,48)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/ve/xq/lg/yl/lb-app-0-330-0-0.jpg?k=815ed7945d" srcset="/assets/resized/sm/upload/ve/xq/lg/yl/lb-app-0-660-0-1172-crop-1.jpg?k=19c2f600cb 2x" alt="Mobile image for Letterboxd for iOS" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#34AD40"> <a class="repositioning" href="/work/workflowmax/"> <h3 class="name">WorkflowMax</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(51,68,85)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/9t/0z/ii/u4/wfm-5-0-330-0-0.jpg?k=366b76e438" srcset="/assets/resized/sm/upload/9t/0z/ii/u4/wfm-5-0-660-0-1172-crop-1.jpg?k=bbd10c4d63 2x" alt="Mobile image for WorkflowMax" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#34AD40"> <a class="repositioning" href="/work/vend-register/"> <h3 class="name">Vend Register</h3> <div class="device js--device -tablet -landscape" data-device-type="tablet" 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-440-0-0.jpg?k=10bf6821f8" srcset="/assets/resized/sm/upload/s7/yr/m1/ko/vend-sale-0-880-0-660-crop-1.jpg?k=06b90b1f7b 2x" alt="Tablet image for Vend Register" /> </div> </div> </div> </div> </a> </div> </article> </div> <a class="moreoftypetitle -allworklink" href="/work/">All<span class="extendedtext"> work</span></a></h3> </section> </div> </div> </article> <div class="adjacent-project-navigation"> <a class="arrow -previous" href="/work/aa-roadservice/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/zoomy/" data-target="1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> </div> <footer class="site-footer"> <div class="constraint"> <div class="copyright">© Cactuslab, est. 2001 <a class="backtotop js--backtotop -is-hidden">↑</a> </div> </div> </footer> </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 · Work · Barfoot & Thompson