CINXE.COM

<!DOCTYPE html> <html lang="en" id="html" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Suburban Mobility Authority for Regional Transportation | Gravity Works | Web Design & Mobile Development</title> <script> document.documentElement.className = document.documentElement.className.replace("no-js","js"); </script> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="https://use.typekit.net/zpn1nak.css"> <link rel="apple-touch-icon" sizes="76x76" href="/images/favicon-76.png"> <link rel="apple-touch-icon" sizes="120x120" href="/images/favicon-120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon-144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/images/favicon-152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon-180.png"> <link rel="shortcut icon" type="image/png" href="/images/favicon-16.png" sizes="16x16" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-32.png" sizes="32x32" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-57.png" sizes="57x57" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-76.png" sizes="76x76" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-96.png" sizes="96x96" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-120.png" sizes="120x120" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-128.png" sizes="128x128" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-144.png" sizes="144x144" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-152.png" sizes="152x152" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-180.png" sizes="180x180" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-195.png" sizes="195x195" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-196.png" sizes="196x196" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-228.png" sizes="228x228" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-270.png" sizes="270x270" /> <link rel="shortcut icon" type="image/png" href="/images/favicon-558.png" sizes="558x558" /> <meta name="theme-color" content="#096F85" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:type" content="website" /> <meta property="fb:pages" content="106410359404928" /> <meta name="twitter:site" content="@gravityworksdd" /> <meta name="twitter:site:id" content="98223083" /> <meta name="twitter:creator" content="@gravityworksdd" /> <meta name="twitter:creator:id" content="98223083" /> <meta name="description" content="We are a web agency building custom websites, mobile apps, and other software. Let us show you what a great web presence can do for your business." /> <meta name="twitter:description" content="We are a web agency building custom websites, mobile apps, and other software. Let us show you what a great web presence can do for your business." /> <meta name="og:image" content="https://www.gravityworksdesign.com/images/content/smart--desktop.jpg" /> <meta name="twitter:image" content="https://www.gravityworksdesign.com/images/content/smart--desktop.jpg" /> <meta name="og:image" content="https://www.gravityworksdesign.com/images/content/smart--desktop.jpg" /> <meta name="og:url" content="https://www.gravityworksdesign.com/projects/smart/" /> <meta name="twitter:url" content="https://www.gravityworksdesign.com/projects/smart/" /> <meta name="og:title" content="Suburban Mobility Authority for Regional Transportation | Gravity Works | Web Design & Mobile Development" /> <meta name="twitter:title" content="Suburban Mobility Authority for Regional Transportation | Gravity Works | Web Design & Mobile Development" /> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-T5K6NVBX');</script> </head> <body> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T5K6NVBX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <header class='hero ' role="banner"> <div class='hero__image ' style="background-image: url('/images/hero/smart-buses.jpg');"></div> <div class="container gutter"> <div class="header"> <div id="skip"> <a href="#content" class="skip-nav visually-hidden">Skip to Main Content</a> </div> <div class="flex-grid"> <div class="flex-grid-cell header__logo"> <a href="/"> <svg class="logo--gw" xmlns="http://www.w3.org/2000/svg" width="407" height="96" viewBox="0 0 407 96"> <g fill="#FFFFFF"> <path d="M20,35.143 C20,38.365 17.43,41 14.286,41 L5.714,41 C2.571,41 0,38.365 0,35.143 L0,5.857 C0,2.635 2.57,0 5.714,0 L14.286,0 C17.429,0 20,2.635 20,5.857 L20,11.713 L14.286,11.713 L14.286,5.857 L5.714,5.857 L5.714,35.143 L14.286,35.143 L14.286,25.186 L9.999,25.186 L9.999,19.327 L20,19.327 L20,35.143 Z M45,41 L38.941,41 L35.169,24.6 L30.712,24.6 L30.712,41 L25,41 L25,0 L39.286,0 C42.427,0 45,2.636 45,5.857 L45,18.742 C45,21.905 43.514,23.781 40.485,24.307 L45,41 Z M30.714,18.744 L39.286,18.744 L39.286,5.857 L30.714,5.857 L30.714,18.744 Z M64.432,29.285 L60.617,10.192 L56.568,29.285 L64.432,29.285 Z M73,41 L66.78,41 L65.606,35.143 L55.396,35.143 L54.222,41 L48,41 L56.803,0 L64.197,0 L73,41 Z M97,0 L88.158,41 L80.844,41 L72,0 L78.545,0 L84.499,31.804 L90.455,0 L97,0 Z M101,41 L107,41 L107,0 L101,0 L101,41 Z M131,5.857 L123.858,5.857 L123.858,41 L118.142,41 L118.142,5.857 L111,5.857 L111,0 L131,0 L131,5.857 Z M156,0 L147.317,25.186 L147.317,41 L141.567,41 L141.567,25.186 L133,0 L139.326,0 L144.498,18.743 L149.674,0 L156,0 Z M197,0 L190.058,41 L184.506,41 L179.471,11.362 L174.494,41 L168.942,41 L162,0 L166.338,0 L171.95,33.853 L177.561,0 L181.496,0 L187.05,33.853 L192.776,0 L197,0 Z M216.617,5.857 C216.617,4.977 216.033,4.393 215.154,4.393 L207.848,4.393 C206.971,4.393 206.385,4.977 206.385,5.857 L206.385,35.143 C206.385,36.019 206.971,36.607 207.848,36.607 L215.154,36.607 C216.033,36.607 216.617,36.019 216.617,35.143 L216.617,5.857 Z M221,35.143 C221,38.365 218.368,41 215.154,41 L207.848,41 C204.632,41 202,38.365 202,35.143 L202,5.857 C202,2.635 204.632,0 207.848,0 L215.154,0 C218.368,0 221,2.635 221,5.857 L221,35.143 Z M240.617,5.857 C240.617,4.977 240.033,4.393 239.154,4.393 L230.385,4.393 L230.385,19.446 L239.155,19.446 C240.033,19.446 240.617,18.86 240.617,17.982 L240.617,5.857 Z M240.791,23.604 L244.943,41 L240.266,41 L236.524,23.837 L230.385,23.837 L230.385,41 L226,41 L226,-2.21596866e-05 L239.154,0 C240.707673,-0.00428064374 242.198785,0.611773259 243.296368,1.71142196 C244.393952,2.81107065 245.007201,4.30333825 245,5.857 L245,17.982 C245,20.676 243.247,22.902 240.79,23.604 L240.791,23.604 Z M263.469,18.801 L274,41 L268.967,41 L261.011,23.487 L256.391,32.214 L256.391,41 L252,41 L252,0 L256.391,0 L256.391,23.955 L268.5,0 L273.356,0 L263.469,18.801 Z M291.617,29.285 C291.617,28.466 291.381,27.821 290.914,27.352 L278.99,15.463 C277.76,14.291 277.001,12.358 277.001,10.368 L277.001,5.857 C277.001,2.635 279.633,0 282.849,0 L290.155,0 C293.369,0 296.001,2.635 296.001,5.857 L296.001,11.713 L291.618,11.713 L291.618,5.857 C291.618,4.979 291.034,4.393 290.155,4.393 L282.849,4.393 C281.972,4.393 281.386,4.979 281.386,5.857 L281.386,10.367 C281.386,11.129 281.62,11.772 282.086,12.242 L294.014,24.131 C295.241,25.304 296.001,27.237 296.001,29.285 L296.001,35.143 C296.001,38.365 293.369,41 290.155,41 L282.849,41 C279.633,41 277.001,38.365 277.001,35.143 L277.001,29.285 L281.386,29.285 L281.386,35.143 C281.386,36.021 282.029,36.607 282.849,36.607 L290.155,36.607 C291.034,36.607 291.618,36.021 291.618,35.143 L291.618,29.285 L291.617,29.285 Z" transform="translate(111 27)"/> <g class="logo--gw__gear"> <path d="M95.42,40.509 C95.3186677,39.8516011 94.8305145,39.3203988 94.184,39.164 L89.184,37.957 C86.285,37.262 84.164,35.649 83.237,33.407 C82.305,31.169 82.654,28.527 84.226,25.979 L86.905,21.597 C87.248,21.037 87.215,20.313 86.824,19.777 C83.8664523,15.7088349 80.2881651,12.1305477 76.22,9.173 C75.6853946,8.78375522 74.9697462,8.75224621 74.403,9.093 L70.029,11.773 C68.434,12.749 66.765,13.258 65.189,13.258 C61.744,13.258 59.005,10.789 58.039,6.813 L56.844,1.813 C56.6828072,1.1696649 56.1522951,0.685232873 55.497,0.583 C50.5307159,-0.191948042 45.4742841,-0.191948042 40.508,0.583 C39.8547643,0.683957375 39.3275313,1.17008679 39.174,1.813 L37.968,6.813 C37.01,10.789 34.265,13.258 30.818,13.258 C29.244,13.258 27.575,12.748 25.978,11.773 L21.598,9.093 C21.0326296,8.75240597 20.3181735,8.78393189 19.785,9.173 C15.7145196,12.1272814 12.1369776,15.7068485 9.185,19.779 C8.79302484,20.3133943 8.76145308,21.0312572 9.105,21.598 L11.785,25.98 C13.35,28.528 13.693,31.17 12.765,33.408 C11.838,35.65 9.73,37.263 6.824,37.958 L1.82,39.164 C1.17420358,39.3216159 0.686605645,39.852214 0.584,40.509 C0.197671452,42.98869 0.00243022792,45.4943972 0,48.004 C0,50.513 0.201,53.034 0.585,55.502 C0.685,56.159 1.175,56.689 1.821,56.838 L6.825,58.043 C9.735,58.744 11.845,60.363 12.765,62.598 C13.69,64.838 13.351,67.478 11.786,70.03 L9.106,74.405 C8.76496025,74.9706112 8.79649259,75.685607 9.186,76.219 C12.1385455,80.2903807 15.7160121,83.8695348 19.786,86.824 C20.3188081,87.2179482 21.0384176,87.2457171 21.6,86.894 L25.98,84.224 C27.576,83.25 29.245,82.73 30.82,82.73 C34.266,82.73 37.006,85.21 37.969,89.184 L39.175,94.184 C39.3311746,94.8266532 39.856406,95.3136932 40.509,95.421 C42.979,95.801 45.5,96 48.011,96 C50.509,96 53.03,95.8 55.498,95.42 C56.1534979,95.3138773 56.6830346,94.8279773 56.845,94.184 L58.041,89.184 C59.006,85.21 61.745,82.73 65.19,82.73 C66.766,82.73 68.435,83.25 70.03,84.225 L74.404,86.895 C74.9668877,87.2458286 75.686772,87.2180951 76.221,86.825 C80.2939996,83.8723289 83.8730971,80.2925564 86.825,76.219 C87.215,75.689 87.244,74.964 86.905,74.405 L84.227,70.03 C82.661,67.475 82.307,64.838 83.238,62.598 C84.158,60.358 86.28,58.744 89.185,58.043 L94.185,56.838 C94.8304172,56.6855684 95.3191407,56.1573041 95.421,55.502 C95.801,53.033 96,50.513 96,48.004 C96,45.498 95.8,42.984 95.42,40.509 Z M92.336,53.919 L88.421,54.859 C84.465,55.814 81.541,58.115 80.205,61.344 C78.869,64.578 79.306,68.263 81.419,71.739 L83.531,75.174 C81.1205241,78.3139241 78.3073805,81.1230331 75.164,83.529 L71.729,81.429 C69.627,80.143 67.365,79.459 65.185,79.459 C60.225,79.459 56.166,82.974 54.851,88.424 L53.904,92.341 C49.9804595,92.8503155 46.0075405,92.8503155 42.084,92.341 L41.14,88.424 C39.825,82.974 35.764,79.459 30.806,79.459 C28.631,79.459 26.371,80.143 24.26,81.429 L20.825,83.529 C17.683161,81.1252932 14.8737068,78.315839 12.47,75.174 L14.56,71.739 C16.69,68.263 17.122,64.579 15.786,61.344 C14.445,58.114 11.53,55.814 7.576,54.858 L3.655,53.919 C3.39896403,51.9578007 3.27268942,49.9818369 3.277,48.004 C3.277,46.039 3.395,44.048 3.655,42.098 L7.575,41.155 C11.53,40.197 14.445,37.898 15.786,34.667 C17.122,31.438 16.69,27.743 14.561,24.277 L12.48,20.842 C14.8841639,17.6976697 17.6931238,14.8846748 20.834,12.476 L24.271,14.578 C26.381,15.873 28.641,16.558 30.814,16.558 C35.774,16.558 39.83,13.032 41.149,7.593 L42.096,3.677 C46.0191803,3.16214302 49.9928197,3.16214302 53.916,3.677 L54.86,7.593 C56.175,13.037 60.236,16.558 65.205,16.558 C67.376,16.558 69.629,15.877 71.74,14.578 L75.173,12.476 C78.3178497,14.8848264 81.1314219,17.6977262 83.541,20.842 L81.43,24.278 C79.312,27.743 78.88,31.438 80.216,34.668 C81.55,37.898 84.474,40.198 88.43,41.155 L92.345,42.098 C92.601,44.048 92.74,46.038 92.74,48.004 C92.724584,49.9820038 92.5896715,51.9572693 92.336,53.919 Z"/> <path d="M78.297,49 L59.705,49 C58.763,49 58,48.33 58,47.5 C58,46.67 58.763,46 59.705,46 L78.297,46 C79.239,46 80,46.67 80,47.5 C80,48.33 79.24,49 78.297,49"/> <path d="M68.28,46.939 C68.298,47.292 68.333,47.643 68.333,48 C68.333,59.213 59.213,68.333 47.999,68.333 C36.788,68.333 27.667,59.213 27.667,48 C27.667,36.787 36.787,27.667 47.999,27.667 C53.741,27.667 58.924,30.068 62.628,33.909 L65.416,31.533 C61.038,26.906 54.86,24 48,24 C34.766,24 24,34.765 24,48 C24,61.235 34.766,72 48,72 C61.234,72 72,61.235 72,48 C72,47.643 71.963,47.292 71.947,46.939 L68.28,46.939 Z"/> <path d="M48.5,18.707 C32.072,18.707 18.707,32.071 18.707,48.501 C18.707,64.929 32.072,78.293 48.5,78.293 C64.928,78.293 78.293,64.929 78.293,48.501 C78.293,32.071 64.928,18.707 48.5,18.707 M48.5,82 C30.027,82 15,66.973 15,48.5 C15,30.03 30.027,15 48.5,15 C66.973,15 82,30.029 82,48.5 C82,66.974 66.973,82 48.5,82"/> <path d="M70.598,26.532 C70.204,26.528 69.806,26.623 69.474,26.882 L47.471,43.882 L24.613,26.328 C24.3697282,26.1494096 24.084578,26.0364516 23.785,26 C23.289029,26.9797683 22.6906924,27.904257 22,28.758 C22.11,28.928 22.232,29.09 22.403,29.221 L46.37,47.625 C47.022746,48.128163 47.9330763,48.1265184 48.584,47.621 L71.69,29.767 C71.82,29.665 71.905,29.534 71.999,29.408 C71.4385892,28.4975713 70.9689994,27.534276 70.597,26.532 M71.812,66.804 L48.183,50.33 C47.5546405,49.8921061 46.7201956,49.8913083 46.091,50.328 L22.668,66.596 C22.326,66.834 22.119,67.178 22,67.546 C22.815,68.241 23.54,69.016 24.175,69.856 C24.3824527,69.8068007 24.5795147,69.7211362 24.757,69.603 L47.135,54.06 L69.717,69.807 C69.844,69.893 69.979,69.947 70.113,69.999 C70.6258375,68.9301661 71.2589303,67.9233237 72,66.998 C71.932,66.936 71.89,66.858 71.813,66.804"/> </g> </g> </svg> <span class="visually-hidden">Gravity Works Design + Development</span> </a> </div> <div class="flex-grid-cell header__menu"> <button class="menu-button__wrapper"> <div class="menu-button"> <span class="menu-bars"> <span class="menu-bar"></span> <span class="menu-text">Menu</span> <span class="menu-bar"></span> </span> </div> </button> </div> </div> </div> <div class="hero__content "> <a href="/projects/" class="text-meta color-white">Projects</a> <span> / </span> <a href="/industries/transit/" class="text-meta color-white">Transit</a> <h1 class="hero__title"> Taking Transit to the Next Level </h1> </div> </div> <nav class="nav-menu" aria-labelledby="nav-menu-title"> <div class="nav-menu__row"> <h2 id="nav-menu-title" class="visually-hidden">Navigation</h2> <ul class="main-menu"> <li> <a href="/about/">About</a> </li> <li> <a href="/projects/">Projects</a> </li> <li> <a href="/skills/">Skills</a> </li> <li> <a href="/contact/">Contact</a> </li> </ul> <div class="nav-menu__content"> <div class="nav-menu__phone">(517) 481-2218</div> <div class="nav-menu__address">7373 W. Saginaw Hwy<br />Lansing, MI 48917</div> <a href="https://goo.gl/maps/BvErLdpWfo62" target="_blank" rel="noopener" class="map-link"> <svg class="icon-svg icon-md map-link__icon"> <use xlink:href="#icon-map-marker"></use> </svg> Get Directions </a> <div class="soc-links"> <a href="https://www.facebook.com/gravityworksdd" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-facebook"></use> </svg> <span class="visually-hidden">Like Gravity Works on Facebook</span> </a> <a href="https://www.twitter.com/gravityworksdd" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-twitter"></use> </svg> <span class="visually-hidden">Follow Gravity Works on Twitter</span> </a> <a href="/cdn-cgi/l/email-protection#c6afa8a0a986a1b4a7b0afb2bfb1a9b4adb5a2a3b5afa1a8e8a5a9ab" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-mail"></use> </svg> <span class="visually-hidden">Email Gravity Works</span> </a> <a href="https://www.linkedin.com/company/gravityworks/" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-linkedin"></use> </svg> <span class="visually-hidden">Follow Gravity Works on LinkedIn</span> </a> <a href="https://medium.com/a-few-words-from-gravity-works" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-medium"></use> </svg> <span class="visually-hidden">Follow Gravity Works on Medium</span> </a> </div> <div class="nav-menu__contact"> <strong>Careers</strong> <div> <a href="/cdn-cgi/l/email-protection#b9d3d6dbcaf9decbd8cfd0cdc0ced6cbd2cadddccad0ded797dad6d4"><span class="__cf_email__" data-cfemail="a4cecbc6d7e4c3d6c5d2cdd0ddd3cbd6cfd7c0c1d7cdc3ca8ac7cbc9">[email protected]</span></a> </div> </div> <div class="nav-menu__contact"> <strong>General Inquiries</strong> <div> <a href="/cdn-cgi/l/email-protection#51383f373e1136233027382528263e233a2235342238363f7f323e3c"><span class="__cf_email__" data-cfemail="751c1b131a35120714031c010c021a071e061110061c121b5b161a18">[email protected]</span></a> </div> </div> </div> </div> </nav> </header> <main id="content" role="main"> <div class="container gutter"> <div class="intro flex-grid md-flex-grid--1of3 region--space-md"> <div class="intro__content flex-grid-cell flex-grid-cell--2of3"> <h2 class="ts-h3">Suburban Mobility Authority for Regional Transportation</h2> <p>For more than 50 years, SMART has offered convenient, reliable and safe transportation for Metro Detroit鈥檚 largest counties鈥揗acomb, Wayne, and Oakland. To continue expanding their trusted reputation, SMART worked with us to build a new website with scheduling and real-time tools. We also helped them cater to an important growing audience, mobile users.</p> </div> <div class="intro__sidebar flex-grid-cell"> <div class="highlights" id="highlights"> <h2 class="text-meta">Highlights</h2> <ul class="highlights__list"> <li class="highlights__list-item">Real-Time Bus Tracking</li> <li class="highlights__list-item">Interactive Schedules</li> <li class="highlights__list-item">Dedicated Mobile App</li> </ul> <a href="http://www.smartbus.org" target="_blank" rel="noopener" class="button-link"><span>www.smartbus.org</span></a> </div> </div> </div> </div> <div class="container"> <div class="number-block-row" id="number-block-row"> <div class="number-block"> <div class="number-block__figure">43</div> <div class="number-block__label">bus routes available for tracking</div> </div> <div class="number-block"> <div class="number-block__figure">11M</div> <div class="number-block__label">residents served by SMART</div> </div> <div class="number-block"> <div class="number-block__figure">5235</div> <div class="number-block__label">stops across all routes</div> </div> </div> </div> <div class="image--full-width" id="full-width-image-1"> <img class="image--full-width__image" src="/images//content/smart--desktop.jpg" alt="The SMART website viewed on a desktop" /> </div> <div class="results" id="results"> <div class="container"> <h3 class="results__heading">Results</h3> <div class="results__grid flex-grid flex-grid--flexcells md-flex-grid--1of3"> <div class="results__grid-cell flex-grid-cell flex-grid-cell--2of3"> The new website increased traffic and gave a boost to customer loyalty. Users now have access to accurate, timely information so they can feel confident about reaching their destination on time. As a result, the support center is receiving less calls about route information. SMART administrators have greater control over their messaging and are using the website to effectively attract new riders. Our technology solutions are helping SMART move in a bright, new direction. </div> <div class="results__grid-cell results__figure flex-grid-cell"> <div class="number-block number-block--aside"> <div class="number-block__figure">75%</div> <div class="number-block__label">increase in mobile sales</div> </div> <div class="results__side-content"> <p>Shortly after the project launched, SMART experienced a drastic increase in mobile usage. The SMART app has more than 70,000 downloads and a 4.2 rating in the Google Play Store.</p> </div> </div> </div> </div> </div> <div class="container gutter"> <div class="left-image-content rounded-image-content image-content flex-grid lg-flex-grid--1of2"> <div class="flex-grid-cell"> <img class="image--rounded" src="/images/content/smart--route-map.png" alt="A map with multiple routes and live data from the SMART website" /> </div> <div class="flex-grid-cell"> <h2>Real-Time Bus Tracking</h2><p>A scalable system was created to support peak times, and days where ridership spikes. We added real-time tracking throughout the site, bringing Schedules, Routes, and Plan a Trip tools together for a truly seamless experience.</p> </div> </div> </div> <div class="container gutter"> <div class="right-image-content image-content flex-grid lg-flex-grid--1of2"> <div class="flex-grid-cell"> <h2>Employment</h2><p>SMART employs more than 800 people throughout Southeast Michigan. The human resources team needed help to keep up with job postings. Oftentimes they were not consistent, and lacked the brand connection with SMART. We created a robust employment tool to streamline their hiring process.</p> </div> <div class="flex-grid-cell"> <img src="/images/content/smart--employment.jpg" alt="A group of employees whose clothes correlate with a variety of professions" /> </div> </div> </div> <div class="container"> <div class="left-phone-content phone-content flex-grid lg-flex-grid--1of2"> <div class="flex-grid-cell phone-content__grid-cell"> <div class="phone phone--full" id="phone--full"> <div class="screen" style="background-image: url('/images/content/smart--app-schedules.jpg');"></div> </div> </div> <div class="flex-grid-cell"> <h2>Schedules</h2><p>It's a challenging task to display large amounts of data without overwhelming the user. We built a powerful scheduling tool, converting each GTFS schedule into an easy-to-view format that includes all stops and arrival/departure times.</p><p>Our team has performed more than 10 usability studies to ensure that riders are getting maximum functionality from this tool. These studies have led to major changes and feature updates.</p> </div> </div> </div> <div class="features" id="features"> <div class="container"> <div class="flex-grid flex-grid--flexcells md-flex-grid--1of2"> <div class="flex-grid-cell feature"> <div class="feature__content"> <svg class="feature__icon icon-svg icon-lg"> <use xlink:href="#icon-dashboard"></use> </svg> <strong class="feature__name"> <span class="feature__line"></span> Personal Dashboard </strong> <p class="feature__text">Each rider has a personalized dashboard, allowing riders to favorite stops, set alert preferences and see real-time data catered to their needs.</p> </div> </div> <div class="flex-grid-cell feature"> <div class="feature__content"> <svg class="feature__icon icon-svg icon-lg"> <use xlink:href="#icon-graph"></use> </svg> <strong class="feature__name"> <span class="feature__line"></span> Real-Time Bus Visualization </strong> <p class="feature__text">We developed visual tracking tools to bring real-time data to life. By allowing riders to track the exact location of their bus along the route, we have created a truly integrated experience.</p> </div> </div> </div> </div> </div> <div class="container"> <h2 class="text-center">Process</h2> <div class="tictac-box" id="tictac"> <div class="tictac"> <svg class="icon-svg icon-lg tictac__icon"> <use xlink:href="#icon-phone"></use> </svg> <div class="tictac__name">Mobile-First Design</div> </div> <div class="tictac"> <svg class="icon-svg icon-lg tictac__icon"> <use xlink:href="#icon-research"></use> </svg> <div class="tictac__name">Research-Based Development</div> </div> <div class="tictac"> <svg class="icon-svg icon-lg tictac__icon"> <use xlink:href="#icon-accessibility"></use> </svg> <div class="tictac__name">Accessibility</div> </div> <div class="tictac"> <svg class="icon-svg icon-lg tictac__icon"> <use xlink:href="#icon-people"></use> </svg> <div class="tictac__name">User Testing</div> </div> </div> </div> <div class="right-image-content flush-image-content image-content flex-grid lg-flex-grid--1of2"> <div class="flex-grid-cell fic__content-cell"> <h2>Mobile First Design</h2><p>We began the project by reviewing Google Analytics data and interviewing SMART stakeholders. This initial research revealed an important trend in web traffic; riders were much more likely to check route information through their mobile phone. Our approach to designing the new website was to make it as simple as possible for mobile users to access data and information on-the-go.</p><h2>Research-Based Development</h2><p>All decisions made during the development process were backed by initial research. We reviewed Google Analytics, talked with project stakeholders, and listened to riders to fully understand the needs of all user audiences. This approach ensured that we were building tools to meet everyone's desired goals.</p> </div> <div class="flex-grid-cell fic__image-cell"> <img src="/images/content/smart--phone-aside.jpg" alt="A smartphone displaying a screen from the SMART app" /> </div> </div> <div class="split-content split-content--color-swap"> <div class="flex-grid md-flex-grid--1of2"> <div class="flex-grid-cell split-content__image-cell"> <img class='media-object__image split-content__image ' src="/images/content/smart--devices.jpg" alt="The SMART app being viewed on smartphones, with code in the background" /> </div> <div class="flex-grid-cell split-content__content-cell"> <h2 class="split-content__heading">Accessibility</h2> <p class="split-content__text">SMART serves a diverse ridership with different cognitive, physical, and cultural needs. It was important that the new website and mobile app was accessible to all riders. We followed WCAG Level A guidelines and integrated with Google Translate to offer multilingual support.</p> </div> </div> </div> <div class="split-content split-content--color-swap"> <div class="flex-grid md-flex-grid--1of2"> <div class="flex-grid-cell split-content__image-cell"> <img class='media-object__image split-content__image ' src="/images/content/gw-usability.jpg" alt="A group of people reviewing sets of note cards" /> </div> <div class="flex-grid-cell split-content__content-cell"> <h2 class="split-content__heading">User Testing</h2> <p class="split-content__text">To understand the needs of all audience groups, our team performed multiple in-person and online user tests. With each test, we reviewed the user鈥檚 ability to understand the interface and complete specific tasks. In-person and online tests included the site structure, online store, schedules, and bus tracking tools.</p> </div> </div> </div> <div class="testimonial" id="testimonial" style="background-image: url('');"> <div class="testimonial__content"> <span class="testimonial__line"></span> <div class="testimonial__quote">We didn't realize what a positive impact this mobile app would have on our riders and staff members. It's really helped us bring our transit experience into a new age.</div> <div class="testimonial__source"> <div class="testimonial__source-name">Beth Gibbons</div> <div class="testimonial__source-title">Manager of Communications & Education, SMART</div> </div> </div> </div> <div class="projects projects--related container gutter"> <h2 class="text-center">Related Projects</h2> <div class="flex-grid md-flex-grid--1of3"> <a href="/projects/cata" class="project flex-grid-cell"> <div class="project__background"> <img src="/images/hero/cata-hero.jpg" alt="" /> </div> <div class="project__logo"> <img src="/images/logos/cata.svg" alt="Capital Area Transit Authority logo" /> </div> <div class="project__name">CATA</div> <span class="project__line"></span> </a> <a href="/projects/guardian-industries/" class="project flex-grid-cell"> <div class="project__background"> <img src="/images/hero/guardian--hero.jpg" alt="" /> </div> <div class="project__logo"> <img src="/images/logos/guardian.svg" alt="Guardian Industries logo" /> </div> <div class="project__name">Guardian Industries</div> <span class="project__line"></span> </a> </div> </div> <div class="container gutter"> <div class="pagination flex-grid lg-flex-grid--1of2"> <div class="pagination__previous flex-grid-cell"> <a href="/projects/cata/" class="text-meta link--with-arrow"> <svg class="icon-svg icon-md"> <use xlink:href="#icon-arrow--shaped"></use> </svg> <span class="visually-hidden">Previous case study:</span> CATA </a> </div> <div class="pagination__next flex-grid-cell"> <a href="/projects/guardian-industries/" class="text-meta link--with-arrow"> Guardian Industries <span class="visually-hidden">Next case study:</span> <svg class="icon-svg icon-md"> <use xlink:href="#icon-arrow--shaped"></use> </svg> </a> </div> </div> </div> <div class="cta"> <div class="container"> <h2 class="cta__heading">Like What You See?</h2> <div class="cta__content cta__content--vertical flex-grid md-flex-grid--1of2"> <div class="flex-grid-cell">We love people who are passionate, communicative, and care about doing things the right way. Sound familiar? Let's start talking.</div> <div class="flex-grid-cell cta__button"> <a href="/contact" class="button-outline button--white button--large">Tell us about your project</a> </div> </div> </div> </div> </main> <footer class="footer" role="contentinfo" id="footer"> <div class="container"> <div class="footer__content"> <a href="/" class="footer__logo-link"> <svg class="icon-svg icon-lg footer__logomark" xmlns="http://www.w3.org/2000/svg" width="73" height="73" viewBox="0 0 73 73"> <g> <title>Gravity Works logomark</title> <path class="gear" d="M72.5594634,30.803671 C72.4822994,30.3013838 72.1105089,29.9015184 71.6194649,29.7808572 L67.8173816,28.8632712 C65.6132957,28.3343264 63.9998655,27.1080723 63.2955681,25.4033827 C62.5870618,23.7014991 62.8522256,21.6923506 64.0475669,19.7547569 L66.0846979,16.4225447 C66.3456527,15.9974246 66.320399,15.4460311 66.0229666,15.0391505 C63.7683733,11.9412454 61.0620195,9.23057851 57.9600246,6.97449548 C57.5559656,6.6770517 57.0045933,6.65600615 56.5780866,6.9141649 L53.2516144,8.95137421 C52.0394373,9.69358063 50.7697379,10.0808188 49.5715906,10.0808188 C46.9522217,10.0808188 44.8687923,8.20355564 44.1350323,5.18001153 L43.2258994,1.37778205 C43.1038399,0.890928311 42.6969749,0.514914472 42.201722,0.441956564 C38.4473401,-0.147318855 34.5610778,-0.147318855 30.8038899,0.441956564 C30.307234,0.517720546 29.904578,0.890928311 29.7895334,1.37778205 L28.8719826,5.18001153 C28.1438346,8.20355564 26.0561962,10.0808188 23.4354244,10.0808188 C22.23868,10.0808188 20.9689806,9.69358063 19.7554005,8.95137421 L16.4247194,6.9141649 C16.0010186,6.65600615 15.4482434,6.6770517 15.0455873,6.97449548 C11.9463984,9.2263694 9.23443266,11.9370363 6.98545126,15.0391505 C6.68380996,15.4460311 6.66557119,15.9932155 6.92372002,16.4225447 L8.962254,19.7547569 C10.1519834,21.6923506 10.4129382,23.7014991 9.70723785,25.4033827 C9.0029405,27.1080723 7.39933118,28.3343264 5.1896333,28.8632712 L1.384744,29.7808572 C0.897908979,29.9015184 0.520506611,30.3013838 0.444745541,30.803671 C0.152925123,32.6851432 0,34.5974822 0,36.5028061 C0,38.410936 0.152925123,40.3274841 0.444745541,42.2047473 C0.520506611,42.7042283 0.893700031,43.1068999 1.384744,43.2205458 L5.1896333,44.1367288 C7.40213715,44.6698828 9.00714945,45.901749 9.70723785,47.6008264 C10.4101322,49.304113 10.1519834,51.3118585 8.962254,53.2522583 L6.92372002,56.5788584 C6.66557119,57.0081876 6.68801891,57.5553719 6.98545126,57.9580434 C9.23443266,61.0573515 11.9463984,63.7722276 15.0455873,66.0226984 C15.4524523,66.3229483 16.0010186,66.3425908 16.4247194,66.0760138 L19.7554005,64.0458197 C20.9689806,63.3050163 22.23868,62.90936 23.4354244,62.90936 C26.0561962,62.90936 28.1396256,64.7950413 28.8719826,67.8171824 L29.7895334,71.6194119 C29.904578,72.1104747 30.311443,72.4752643 30.8038899,72.5594465 C32.6824839,72.848472 34.5989583,73 36.5084179,73 C38.4080566,73 40.3245311,72.848472 42.201722,72.5594465 C42.7011839,72.4752643 43.1038399,72.1104747 43.2258994,71.6194119 L44.1350323,67.8171824 C44.8687923,64.7950413 46.9522217,62.90936 49.5715906,62.90936 C50.7697379,62.90936 52.0394373,63.3050163 53.2516144,64.0458197 L56.5780866,66.0760138 C57.0088023,66.3425908 57.5559656,66.3229483 57.9600246,66.0226984 C61.0620195,63.7722276 63.7725823,61.0615606 66.0229666,57.9580434 C66.320399,57.5553719 66.3414437,57.0039785 66.0846979,56.5788584 L64.0475669,53.2522583 C62.8564345,51.3090525 62.5870618,49.304113 63.2955681,47.6008264 C63.9956565,45.8975399 65.6090867,44.6698828 67.8173816,44.1367288 L71.6194649,43.2205458 C72.1105089,43.1068999 72.4822994,42.7000192 72.5594634,42.2047473 C72.8484779,40.3274841 73,38.410936 73,36.5028061 C73,34.5974822 72.8484779,32.6851432 72.5594634,30.803671 M70.2136762,41.0009418 L67.2365467,41.7150874 C64.2285517,42.4418605 62.004824,44.1914472 60.9890644,46.6467615 C59.9733049,49.1062848 60.3058118,51.9081491 61.9122271,54.5514703 L63.5186424,57.1639247 C61.6849439,59.5518931 59.5496041,61.6845089 57.1561155,63.5168749 L54.5437615,61.9202191 C52.9457641,60.9423025 51.2257073,60.4217759 49.5673816,60.4217759 C45.7961639,60.4217759 42.7096018,63.0945608 41.7092751,67.2391313 L40.9895449,70.2177782 C38.0208333,70.6050163 34.9763607,70.6050163 32.0020372,70.2177782 L31.28371,67.2391313 C30.2833833,63.0945608 27.1954182,60.4217759 23.4256035,60.4217759 C21.7714868,60.4217759 20.0528329,60.9423025 18.4478206,61.9202191 L15.8354666,63.5168749 C13.4475899,61.6845089 11.3080412,59.5561022 9.48276061,57.1639247 L11.0723401,54.5514703 C12.6913822,51.9081491 13.0196802,49.1062848 12.0039207,46.6467615 C10.9839522,44.1914472 8.76723939,42.4418605 5.76064729,41.7150874 L2.77930889,41.0009418 C2.58148831,39.5109168 2.49169742,38.0082645 2.49169742,36.5028061 C2.49169742,35.008572 2.58148831,33.4946954 2.77930889,32.0116856 L5.76064729,31.2947338 C8.76723939,30.5665578 10.9839522,28.818374 12.0039207,26.3616567 C13.0196802,23.9063425 12.6913822,21.09606 11.0723401,18.461157 L9.48977552,15.8487027 C11.3150561,13.4565251 13.4560078,11.3211032 15.8424815,9.48733423 L18.4562385,11.085393 C20.0598478,12.0703248 21.7785017,12.5908514 23.4312154,12.5908514 C27.2038361,12.5908514 30.2875923,9.90964828 31.2907249,5.77349606 L32.0104551,2.79625216 C34.9805696,2.40480492 38.0250423,2.40480492 40.9979628,2.79625216 L41.71629,5.77349606 C42.7166167,9.91385739 45.8045818,12.5908514 49.5828144,12.5908514 C51.2341252,12.5908514 52.9471671,12.0731309 54.5521794,11.085393 L57.1631304,9.48733423 C59.555216,11.3211032 61.6933618,13.4565251 63.5256573,15.8487027 L61.920645,18.461157 C60.3100208,21.09606 59.9817228,23.9063425 60.9974823,26.3616567 C62.0118389,28.818374 64.2355666,30.5665578 67.2435617,31.2947338 L70.2206911,32.0116856 C70.4157057,33.4946954 70.5209294,35.008572 70.5209294,36.5028061 C70.5125115,38.0082645 70.4030789,39.5109168 70.2136762,41.0009418"/> <path class="letter-g letter-g--stem" d="M59.6838891,37 L45.317514,37 C44.5893034,37 44,36.5527157 44,36 C44,35.4472843 44.5893034,35 45.317514,35 L59.6838891,35 C60.4120997,35 61,35.4472843 61,36 C61,36.5527157 60.4120997,37 59.6838891,37"/> <path class="letter-g letter-g--circle" d="M51.2100378,35.6817661 C51.2237882,35.9545107 51.2499141,36.224429 51.2499141,36.5 C51.2499141,45.1430372 44.4090753,52.1736307 35.9993125,52.1736307 C27.5909247,52.1736307 20.7500859,45.1430372 20.7500859,36.5 C20.7500859,27.8569628 27.5909247,20.8263693 35.9993125,20.8263693 C40.3059471,20.8263693 44.1931935,22.6776411 46.9707803,25.6382629 L49.0622207,23.8067756 C45.7786181,20.2398976 41.1447233,18 35.9993125,18 C26.0742523,18 18,26.2982202 18,36.5 C18,46.7017798 26.0742523,55 35.9993125,55 C45.9257477,55 54,46.7017798 54,36.5 C54,36.224429 53.9724991,35.9545107 53.9601238,35.6817661 L51.2100378,35.6817661 Z"/> <path class="circle" d="M36.5,13.8218109 C23.9947989,13.8218109 13.821889,23.9944394 13.821889,36.5007055 C13.821889,49.0055606 23.9947989,59.1781891 36.5,59.1781891 C49.0052011,59.1781891 59.178111,49.0055606 59.178111,36.5007055 C59.178111,23.9944394 49.0052011,13.8218109 36.5,13.8218109 M36.5,62 C22.4385271,62 11,50.5617894 11,36.5007055 C11,22.4396215 22.4385271,11 36.5,11 C50.5614729,11 62,22.4396215 62,36.5007055 C62,50.5617894 50.5614729,62 36.5,62"/> <path class="letter-w letter-w--upper" d="M53.9344375,20.4110292 C53.6349206,20.408214 53.3326432,20.4814109 53.0800552,20.681295 L36.3581781,33.8173387 L18.9861974,20.2533742 C18.7943409,20.1041649 18.5776398,20.0337832 18.3567978,20 C17.9786059,20.7558996 17.5272602,21.4709779 17,22.1311584 C17.084196,22.2620684 17.1766736,22.3873479 17.3064182,22.4886975 L35.5203589,36.7100273 C35.7688061,36.9028732 36.0655625,37 36.3609386,37 C36.6563147,37 36.9544513,36.9028732 37.2028986,36.7072121 L54.7653554,22.9109878 C54.863354,22.8321603 54.9282264,22.7308106 55,22.6336839 C54.5748792,21.9312743 54.2173913,21.1866358 53.9344375,20.4110292"/> <path class="letter-w letter-w--lower" d="M54.8580999,50.6033494 L36.8993959,38.2467353 C36.4222222,37.9186714 35.7864543,37.9172988 35.3092806,38.2453626 L17.5077796,50.4468671 C17.2476295,50.6253119 17.0904265,50.8833705 17,51.1592735 C17.6190738,51.6808813 18.1699799,52.2615132 18.6527183,52.8915605 C18.8057478,52.8517536 18.9573861,52.7968475 19.0951126,52.7021345 L36.1022515,41.0455729 L53.2652023,52.8558715 C53.3611935,52.9203862 53.4641406,52.9615657 53.5656965,53 C53.9566172,52.1983712 54.4351821,51.4434125 55,50.7488506 C54.9485265,50.7021804 54.9165294,50.6431564 54.8580999,50.6033494"/> </g> </svg> </a> <div class="soc-links"> <a href="https://www.facebook.com/gravityworksdd" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-facebook"></use> </svg> <span class="visually-hidden">Like Gravity Works on Facebook</span> </a> <a href="https://www.twitter.com/gravityworksdd" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-twitter"></use> </svg> <span class="visually-hidden">Follow Gravity Works on Twitter</span> </a> <a href="/cdn-cgi/l/email-protection#e980878f86a98e9b889f809d909e869b829a8d8c9a808e87c78a8684" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-mail"></use> </svg> <span class="visually-hidden">Email Gravity Works</span> </a> <a href="https://www.linkedin.com/company/gravityworks/" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-linkedin"></use> </svg> <span class="visually-hidden">Follow Gravity Works on LinkedIn</span> </a> <a href="https://medium.com/a-few-words-from-gravity-works" class="soc-link" target="_blank" rel="noopener"> <svg class="icon-svg soc-link__icon"> <use xlink:href="#icon-medium"></use> </svg> <span class="visually-hidden">Follow Gravity Works on Medium</span> </a> </div> <a href="tel:5174812218" class="phone-link">(517) 481-2218</a> <div class="footer__address">7373 W. Saginaw Hwy <span>Lansing, MI 48917</span></div> <a href="https://goo.gl/maps/BvErLdpWfo62" target="_blank" rel="noopener" class="map-link"> <svg class="icon-svg icon-sm map-link__icon"> <use xlink:href="#icon-map-marker"></use> </svg> Get Directions </a> <small class="footer__copyright">© 2024 GRAVITY WORKS DESIGN LLC. All rights reserved.</small> </div> </div> </footer> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script src="/js/script.js"></script> </body> </html>