CINXE.COM
Cactuslab · Work · Vend Register
<!doctype html> <!--[if lte IE 9 ]><html lang="en" class="ie9 lte9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="js--html"><!--<![endif]--> <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: Vend Register"> <meta name="twitter:description" content="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."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/s7/yr/m1/ko/vend-sale-0-500-0-0.png?k=04f66b4b00"> <meta property="og:url" content="https://cactuslab.com/work/vend-register/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Vend Register at Cactuslab"> <meta property="og:description" content="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."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/s7/yr/m1/ko/vend-sale-0-500-0-0.png?k=04f66b4b00"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="375"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Vend Register </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: #34AD40; } .external-link { color: #34AD40; } .external-link:hover, .external-link:focus { border-color: #34AD40; } .project-media .mediaitem { background-color: #34AD40; } .project-media .deviceset { color: #FFFFFF; } </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">Vend Register</h1> </div> <div class="body"> <div class="rich-text"> <p><a rel="noopener noreferrer" href="http://www.vendhq.com" target="_blank">Vend</a>, a point-of-sale solutions provider, asked us to help design a new interface and experience for its flagship <a rel="noopener noreferrer" href="http://www.vendhq.com/register" target="_blank">iPad app</a>. Our challenge was to deliver this to a large customer base, many of whom had developed muscle memories from processing dozens of sales using the previous app every day. As well as sales and payments, the app had to support an onboarding process and in-app configuration of sales screens based on an existing product inventory pulled from the companion web app.</p> <p>Following a lengthy research and prototyping phase, we developed a new left-to-right flow through the product selection and payment screens (allowing the shopping cart to remain on-screen throughout the sale process), prioritising speed of operation above most other concerns. We worked closely with Vend’s design team, who provided the onboarding and other supporting screen designs. The app was built by an in-house team at Vend, and we continue to perform feature development and maintenance tasks.</p> </div> <p><a class="external-link" target="_blank" href="https://itunes.apple.com/us/app/vend-register-pos-point-sale/id920603929">In the App Store</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/vf/7j/xb/o5/Vend-3-0-1100-0-0.jpg?k=7db637b114" srcset="/assets/resized/sm/upload/vf/7j/xb/o5/Vend-3-0-2200-0-1550-crop-1.jpg?k=4407e6f3e9 2x" alt="Detail image for Vend Register" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/mh/36/z2/ii/Vend-2-0-1100-0-0.jpg?k=937f9887a1" srcset="/assets/resized/sm/upload/mh/36/z2/ii/Vend-2-0-2200-0-1550-crop-1.jpg?k=cb4b4907f8 2x" alt="Detail image for Vend Register" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/ad/qp/ig/nw/Vend-1-0-1100-0-0.jpg?k=531aebc520" srcset="/assets/resized/sm/upload/ad/qp/ig/nw/Vend-1-0-2200-0-1550-crop-1.jpg?k=ff2ce2e84e 2x" alt="Detail image for Vend Register" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/21/ij/mz/vu/Vend-4-0-1100-0-0.jpg?k=0ed68833d6" srcset="/assets/resized/sm/upload/21/ij/mz/vu/Vend-4-0-2200-0-1550-crop-1.jpg?k=81e6f9b85a 2x" alt="Detail image for Vend Register" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/ma/uf/1n/el/Vend-6-0-1100-0-0.jpg?k=c63114f3ef" srcset="/assets/resized/sm/upload/ma/uf/1n/el/Vend-6-0-2200-0-1550-crop-1.jpg?k=26b0962ecd 2x" alt="Detail image for Vend Register" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/sv/kv/w0/an/Vend-5-0-1100-0-0.jpg?k=27d7a16750" srcset="/assets/resized/sm/upload/sv/kv/w0/an/Vend-5-0-2200-0-1550-crop-1.jpg?k=d167625a9f 2x" alt="Detail image for Vend Register" /> </figure> </section> <section class="page-section project-recognition"> <div class="best-award -large -silver"> <div class="sticker"></div> <p class="detail">Silver at the 2015 Best Awards</p> </div> </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:#037CFD"> <a class="repositioning" href="/work/marine-field-guide/"> <h3 class="name">Marine Field Guide</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(0,75,205)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/ne/u0/8v/ej/IMG_7065-0-330-0-0.jpg?k=bd9d0f0d63" srcset="/assets/resized/sm/upload/ne/u0/8v/ej/IMG_7065-0-660-0-1172-crop-1.jpg?k=61a879dbb0 2x" alt="Mobile image for Marine Field Guide" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#326178"> <a class="repositioning" href="/work/essential-new-zealand/"> <h3 class="name">Essential New Zealand</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(2,49,72)"> <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/h4/7e/ug/IMG_7061-0-330-0-0.jpg?k=afe89655ce" srcset="/assets/resized/sm/upload/a0/h4/7e/ug/IMG_7061-0-660-0-1172-crop-1.jpg?k=aed393f5a1 2x" alt="Mobile image for Essential New Zealand" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#FBD240"> <a class="repositioning" href="/work/aa-roadservice/"> <h3 class="name">AA Roadservice</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(34,34,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/6a/rb/dp/e0/Reporting%20a%20breakdown-0-330-0-0.jpg?k=05122511f5" srcset="/assets/resized/sm/upload/6a/rb/dp/e0/Reporting%20a%20breakdown-0-660-0-1172-crop-1.jpg?k=728c293d4c 2x" alt="Mobile image for AA Roadservice" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#013672"> <a class="repositioning" href="/work/barfoot-thompson/"> <h3 class="name">Barfoot & Thompson</h3> <div class="device js--device -tablet -landscape" data-device-type="tablet" 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-440-0-0.jpg?k=6dbba56d85" srcset="/assets/resized/sm/upload/j9/wu/vx/r9/IMG_0175-0-880-0-660-crop-1.jpg?k=5933c76212 2x" alt="Tablet image for Barfoot & Thompson" /> </div> </div> </div> </div> </a> </div> </article> <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> </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/workflowmax/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/marine-field-guide/" data-target="1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> </div> <footer class="site-footer"> <div class="constraint"> <div class="copyright">©<!-- 2024 --> 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>