CINXE.COM
HabitatSeven | The Process | Data driven Web Applications for a Sustainable Planet
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="profile" href="https://gmpg.org/xfn/11"> <link rel="pingback" href="xmlrpc.php"> <title> HabitatSeven | The Process | Data driven Web Applications for a Sustainable Planet </title> <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../resources/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../resources/favicon/favicon-16x16.png"> <link rel="manifest" href="../resources/favicon/site.webmanifest.txt"> <link rel="mask-icon" href="../resources/favicon/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <!-- Google Tag Manager --> <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-TJWFSJX');</script> <!-- End Google Tag Manager --> <meta name="description" content="HabitatSeven is the digital pioneering company that creates progress by designing and developing data driven web applications for a sustainable planet." /> <link rel="canonical" href="" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> <meta property="og:title" content="HabitatSeven | Data driven Web Applications for a Sustainable Planet." /> <meta property="og:description" content="HabitatSeven is the digital pioneering company that promotes change." /> <meta property="og:url" content="" /> <meta property="og:site_name" content="HabitatSeven" /> <meta property="og:image" content="../resources/images/share-1024x538.png" /> <meta property="og:image:secure_url" content="../resources/images/share-1024x538.png" /> <meta property="og:image:width" content="1024" /> <meta property="og:image:height" content="538" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="HabitatSeven is the digital pioneering company that promotes change." /> <meta name="twitter:title" content="HabitatSeven | Data driven Web Applications for a Sustainable Planet" /> <meta name="twitter:site" content="@HabitatSeven_" /> <meta name="twitter:image" content="../resources/images/share-1024x538.png" /> <meta name="twitter:creator" content="@HabitatSeven_" /> <link rel='dns-prefetch' href='https://www.google.com' /> <link rel='dns-prefetch' href='https://s.w.org' /> <link rel="stylesheet" href="../resources/css/screen.css" media="all" /> <!-- <link rel="stylesheet" href="wp-content/cache/minify/e59d1-x36345.css" media="all" /> --> <!-- <script src="../resources/js/c7035-x36345.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="../resources/js/resize.js"></script> <link rel='https://api.w.org/' href='wp-json/index.json' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="../xmlrpc.php-rsd.xml" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="../wp-includes/wlwmanifest.xml" /> <link rel='shortlink' href='' /> </head> <body data-rsssl=1 class="page-template page-template-page-templates page-template-our-approach page-template-page-templatesour-approach-php page page-id-17 is-desktop"> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TJWFSJX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <!-- <script> const apiUrl = 'wp-json/api/v1'; </script> --> <div class="c-main-loader js-main-loader" style="background-color: #010e1b;"> <div class="c-main-loader__logo js-main-loader-logo"> <span class="js-main-loader-logo"> <img src="../resources/images/h7-logo-light.svg" alt="HabitatSeven"> </span> </div> <div class="c-main-loader__container js-main-loader-container"> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/theprocess-01.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/theprocess-02.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/theprocess-03.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/theprocess-04.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/theprocess-05.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/theprocess-06.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/theprocess-07.jpg');"></i> <i class="c-main-loader__image js-main-loader-image" style="background-image: url('../resources/images/thetechnology-01.jpg');"></i> </div> <i class="c-main-loader__curtain js-main-loader-curtain"></i> </div> <div class="c-page-transitions js-page-transitions"></div> <div class="c-work-transitions js-work-transition-layer"></div> <div class="c-navigation js-navigation"> <div class="c-navigation__menu js-menu"> <div class="c-navigation__logo js-navigation-logo"> <a href="/index.php" class="js-navigation-link" data-item="2"> <img src="/resources/images/h7-logo-dark.svg" alt="HabitatSeven"> </a> </div> <div class="c-navigation__menu-left"> <div class="navigation-links-wrapper"> <div class="navigation-links-wrapper__inner"> <ul class="navigation-links navigation-links--top"> <li class="navigation-links__item js-navigation-item"> <a data-item="homepage" href="/index.php" class="c-button c-button--text c-button--large js-navigation-link "> <span> Home </span> </a> </li> <li class="navigation-links__item js-navigation-item"> <a data-item="theprocess" href="/theprocess/" class="c-button c-button--text c-button--large js-navigation-link"> <span> Our Process </span> </a> </li> <li class="navigation-links__item js-navigation-item"> <a data-item="thework" href="/thework/" class="c-button c-button--text c-button--large js-navigation-link"> <span> Our Work </span> </a> </li> <li class="navigation-links__item js-navigation-item"> <a data-item="thetechnology" href="/thetechnology/" class="c-button c-button--text c-button--large js-navigation-link"> <span> Emerging Technology </span> </a> </li> </ul> <!-- <ul class="navigation-links navigation-links--bottom"> <li class="navigation-links__item js-navigation-item"> <a data-item="28" href="contact/" class="c-button c-button--text js-navigation-link js-start-a-project c-button--icon"> <span> <svg class="icon icon-mail"> <use xlink:href="/resources/images/symbol-defs.svg?#icon-mail"></use> </svg> </span> </a> </li> </ul>--> </div> </div> <ul class="c-contact-info c-contact-info--small"> <!-- <li class="c-contact-info__item js-navigation-contact-info"> <span class="u-b6"> t: </span> <a class="c-button c-button--text c-button--small" href="tel:+1 613 796 3554"> <span> +1 613 796 3554 </span> </a> </li> --> <li class="c-contact-info__item js-navigation-contact-info"> <span class="u-b6"> m: </span> <a class="c-button c-button--text c-button--bordered c-button--small" href="mailto:hello@HabitatSeven.com"> <span>hello@HabitatSeven.com</span> </a> </li> </ul> </div> <i class="c-menu-bg__cover js-menu-bg-cover"></i> </div> </div> <div id="barba-wrapper"> <div class="barba-container js-init-color" data-menu-item="theprocess" data-init-color="#e7efef" data-namespace="theprocess"> <div class="c-clip-element c-clip-element--logo js-clip-element "> <div class="c-logo c-logo--navigation js-menu-stage"> <a href="../" class="js-home js-exit-enter-el" data-item="2"> <i class="habitatseven habitatseven--dark"> <img src="../resources/images/h7-sign-dark.svg" alt=""> </i> <i class="habitatseven habitatseven--light"> <img src="../resources/images/h7-sign-light.svg" alt=""> </i> </a> </div> </div> <div class="c-clip-element c-clip-element--menu-trigger js-clip-element"> <div class="c-menu-trigger js-menu-trigger js-exit-enter-el"> <i class="c-menu-trigger__bar c-menu-trigger__bar--top"></i> <i class="c-menu-trigger__bar c-menu-trigger__bar--middle"></i> <i class="c-menu-trigger__bar c-menu-trigger__bar--bottom"></i> </div> </div> <div class="c-clip-element c-clip-element--email js-clip-element"> <div class="c-navigation-email js-menu-stage"> <a class="u-b6 js-exit-enter-el" href="mailto:hello@habitatseven.com">hello@habitatseven.com</a> </div> </div> <div class="c-secondary-navigation js-clip-element"> <div class="c-secondary-navigation__left js-exit-enter-el"> <!-- <ul class="c-secondary-navigation-links"> <li class="c-secondary-navigation-links__item js-menu-stage"> <span class="c-button c-button--text c-button--bordered c-button--small is-active"> <span> Process </span> </span> </li> <li class="c-secondary-navigation-links__item js-menu-stage"> <a href="../thetechnology/" class="c-button c-button--text c-button--bordered c-button--small"> <span> Technology </span> </a> </li> </ul> --> </div> <div class="c-secondary-navigation__right js-exit-enter-el"> <div class="careers_button"> <a href="/careers">Careers</a> </div> <a href="../contact/" class="c-button c-button--primary js-secondary-nav-cta"> <span> <!-- Start a project --> <svg class="icon icon-mail"> <use xlink:href="../resources/images/symbol-defs.svg?#icon-mail"></use> </svg> </span> </a> </div> </div> <div class="c-inpage-navigation c-inpage-navigation--our-approach js-inpage-navigation js-clip-element"> <ul class="c-inpage-links"> <li class="c-inpage-links__item js-menu-stage"> <span class="c-inpage-links__link js-inpage-link" data-scroll-nav="0"> 01 <span class="c-inpage-links__label"> Strategy </span> </span> </li> <li class="c-inpage-links__item js-menu-stage"> <span class="c-inpage-links__link js-inpage-link" data-scroll-nav="1"> 02 <span class="c-inpage-links__label"> Design </span> </span> </li> <li class="c-inpage-links__item js-menu-stage"> <span class="c-inpage-links__link js-inpage-link" data-scroll-nav="2"> 03 <span class="c-inpage-links__label"> Development </span> </span> </li> <li class="c-inpage-links__item js-menu-stage"> <span class="c-inpage-links__link js-inpage-link" data-scroll-nav="3"> 04 <span class="c-inpage-links__label"> Launch </span> </span> </li> <li class="c-inpage-links__item js-menu-stage"> <span class="c-inpage-links__link js-inpage-link" data-scroll-nav="4"> 05 <span class="c-inpage-links__label"> Evaluation </span> </span> </li> </ul> </div> <div class="o-page-wrapper o-page-wrapper--our-approach js-page-wrapper" id="page-wrapper"> <header class="c-header c-header--our-approach u-clearfix"> <div class="o-container"> <h1 class="u-a7 u-a7--fluid js-animation-stage-title"> Measure your impact by actions, not eyeballs </h1> <p class="u-a3 js-animation-stage-element"> We focus on helping to solve real world challenges with cutting-edge solutions that astonish. </p> </div> <div class="o-container u-clearfix"> <div class="our-approach-intro"> <div class="our-approach-intro__right"> <figure class="o-media-wrapper o-media-wrapper--4-3" data-parallax data-parallax-speed="1"> <i class="o-media-wrapper__mask" style="background-color: #e7efef" data-animation-set='{"x":"0"}' data-animation='{"x":"100%", "ease":"Expo.easeInOut"}' data-animation-duration="0.8" data-animation-trigger="0.65" data-animation-reverse="true"></i> <img src="../resources/images/theprocess-01.jpg" alt=""> </figure> </div> <div class="our-approach-intro__left js-animation-stage-element"> <p class="u-b2"> HabitatSeven uses user-centric methodologies that place stakeholders at the centre of the design and development process. We focus on building web-based tools that are focused on impacts and action. </p> </div> </div> </div> </header> <!-- <section class="o-section o-section--full-width-image u-clearfix"> <div class="c-full-width-image"> <figure class="o-media-wrapper o-media-wrapper--16-9"> <div data-group="6" class="canvas js-distort-canvas" data-displacement-map="../resources/images/clouds.png" data-image="../resources/images/theprocess-02.jpg" data-navigation-color="is-white"> </div> </figure> </div> </section> --> <div class="js-inpage-navigation-visible"> <section class="o-section o-section--our-approach o-section--our-approach-0 u-clearfix" data-scroll-index="0"> <div class="o-container"> <div class="our-approach"> <div class="our-approach__item"> <div class="our-approach__text"> <article class="c-article approach-text"> <span class="u-b6 approach-text__number" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 01 </span> <h3 class="u-a4" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Strategy </h3> <p class="u-b2" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Developing an overarching strategy is the first and most important step. This is where we help map out the goals, capacity and outcomes of your organization to the needs of the end users you are trying to reach. The result is a working plan in which the users’ needs are met with a technology and design solution that fulfills your organization’s mission critical, measurable outcomes. </p> <ul class="c-underlined-list u-b4"> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Stakeholder Research </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> User Requirements </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Project Planning </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Expectations Setting </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> User Engagement </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Content Strategy </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Expectations Setting </li> </ul> </article> </div> </div> </div> </div> </section> <section class="o-section o-section--our-approach o-section--our-approach-1 u-clearfix" data-scroll-index="1"> <div class="o-container"> <div class="our-approach"> <div class="our-approach__item"> <div class="our-approach__text"> <article class="c-article approach-text"> <span class="u-b6 approach-text__number" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 02 </span> <h3 class="u-a4" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Design </h3> <p class="u-b2" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> The end user is the foundation upon which we build all of the visual side of an application. It is what your user will see and interact with. Our goal is to create intuitive, easy to use interfaces that allows users to efficiently accomplish their tasks which, in turn, helps your organization achieve its’ outcomes.<br /> </p> <ul class="c-underlined-list u-b4"> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Art Direction </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Digital Identity </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Wireframes </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> User Experience </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> User Interface </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Prototyping </li> </ul> </article> </div> </div> </div> </div> </section> <section class="o-section o-section--our-approach o-section--our-approach-2 u-clearfix" data-scroll-index="2"> <div class="o-container"> <div class="our-approach"> <div class="our-approach__item"> <div class="our-approach__text"> <article class="c-article approach-text"> <span class="u-b6 approach-text__number" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 03 </span> <h3 class="u-a4" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Development </h3> <p class="u-b2" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Our developers focus on building applications that leverage the most appropriate emerging technologies to help you meet your organization’s measurable outcomes. They focus on building high-performing custom solutions that are easily scalable to deliver data, information and decision making insights.<br /> </p> <ul class="c-underlined-list u-b4"> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Full Stack Development </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> CMS Integration </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Geospatial Systems </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Database Development </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> AI/Machine Learning </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Data Visualization </li> </ul> </article> </div> </div> </div> </div> </section> <section class="o-section o-section--our-approach o-section--our-approach-3 u-clearfix" data-scroll-index="3"> <div class="o-container"> <div class="our-approach"> <div class="our-approach__item"> <div class="our-approach__text"> <article class="c-article approach-text"> <span class="u-b6 approach-text__number" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 04 </span> <h3 class="u-a4" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Launch </h3> <p class="u-b2" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Although we conduct a variety of tests throughout each phase of the process, the final stages prior to launch includes thorough testing and load balancing to ensure a seamless launch. The application is then transferred to an agreed upon hosting environment and readied for launch.<br /> <br /> </p> <ul class="c-underlined-list u-b4"> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Usability Testing </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Functionality Testing </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Search Engine Optimization </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Performance Testing </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Security Testing </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Hosting </li> </ul> </article> </div> </div> </div> </div> </section> <section class="o-section o-section--our-approach o-section--our-approach-4 u-clearfix" data-scroll-index="4"> <div class="o-container"> <div class="our-approach"> <div class="our-approach__item"> <div class="our-approach__text"> <article class="c-article approach-text"> <span class="u-b6 approach-text__number" data-animation-set='{"opacity":"0"}' data-animation='{"opacity":"1", "delay":"0.2", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> 05 </span> <h3 class="u-a4" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Evaluation </h3> <p class="u-b2" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Digital ink is never dry. Our philosophy is to launch early and launch often by continually improving upon an application based on user feedback and evaluation. The most successful applications should never be ‘done’ but rather constantly improved upon. A long-term evaluation and improvement strategy ensures that the application remains constantly relevant and continually contributes to your organizations outcomes. </p> <ul class="c-underlined-list u-b4"> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Program Evaluation </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Outcome Evaluation </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Stakeholder Research </li> <li class="c-underlined-list__item" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Learning Assessment </li> </ul> </article> </div> </div> </div> </div> </section> </div> <section class="o-section o-section--cta u-clearfix"> <div class="o-container"> <div class="c-cta"> <div class="c-cta__left"> <div class="c-cta__images-container js-cta-image-container" data-parallax data-parallax-speed="1"> <i class="c-cta__images-container-mask" data-animation-set='{"x":"0"}' data-animation='{"x":"100%", "ease":"Expo.easeInOut"}' data-animation-duration="0.8" data-animation-trigger="0.75" data-animation-reverse="true"></i> <figure class="o-media-wrapper o-media-wrapper--1-1 "> <img src="../resources/images/h7-contact-04.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-02.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-03.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-05.jpg" alt=""> </figure> <figure class="o-media-wrapper o-media-wrapper--1-1 js-cta-image"> <img src="../resources/images/h7-contact-01.jpg" alt=""> </figure> </div> </div> <div class="c-cta__right"> <h3 class="u-a6" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-1.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> Interested <span>in digging</span> deeper? </h3> <div data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <a href="../contact/" class="c-button c-button--text c-button--bordered js-cta-trigger"> <span> Discuss your project with us </span> </a> </div> </div> </div> </div> </section> <div class="c-footer-wrapper js-footer" data-navigation-color="is-white"> <div class="c-footer-wrapper js-footer" data-navigation-color="is-white"> <footer class="c-footer c-footer--bottom u-clearfix"> <div class="o-container"> <div class="c-footer__bottom"> <div class="footer-column footer-column--left"> <ul class="c-footer-links u-clearfix" data-animation-set='{"opacity":"0", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="0.85"> <li class="c-footer-links__item"> <a href="/index.php" class="c-button c-button--text c-button--small c-button--bordered"> <span> Home </span> </a> </li> <li class="c-footer-links__item"> <a href="/theprocess/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Our Process </span> </a> </li> <li class="c-footer-links__item"> <a href="/thework/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Our Work </span> </a> </li> <li class="c-footer-links__item"> <a href="/thetechnology/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Emerging Technology </span> </a> </li> <li class="c-footer-links__item"> <a href="/careers/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Careers</span> </a> </li> <li class="c-footer-links__item"> <a href="/contact/" class="c-button c-button--text c-button--small c-button--bordered"> <span> Contact</span> </a> </li> </ul> </div> <div class="footer-column footer-column--right"> <article class="c-footer__article"> <div class="c-main-loader__logo js-main-loader-logo"> <span class="js-main-loader-logo"> <img src="/resources/images/h7-logo-dark.svg" alt="HabitatSeven"> </span> </div> <ul class="c-contact-info"> <!-- <li class="c-contact-info__item"> <span class="u-b6"> t: </span> <a class="c-button c-button--small" href="tel: +1 613 796 3554"> <span> +16137963554 </span> </a> </li> --> <li class="c-contact-info__item"> <!-- <span class="u-b6"> m: </span> --> <a class="c-button c-button--text c-button--bordered c-button--small" href="mailto:hello@HabitatSeven.com"> <span><span class="green">hello</span>@HabitatSeven.com</span> </a> </li> </ul> </article> </div> </div> <div class="c-footer__bar"> <div class="footer-column footer-column--left"", "y":"50%", "skewY":"-2.5deg"}' data-animation='{"opacity":"1", "y":"0%", "skewY":"0deg", "ease":"Expo.easeOut"}' data-animation-duration="1.2" data-animation-trigger="1"> <p class="u-b4">© HabitatSeven. All rights reserved 2024</p> </div> <div class="footer-column"> <a href="/privacy-policy/" class="c-button c-button--text c-button--small c-button--bordered"> <span>Privacy Policy</span> </a> </div> </div> </div> </footer> </div> </div> </div> </div> <script src="/resources/js/kitchensink.js"></script> <script src="/resources/js/functionsahoy.js"></script> <script src="/resources/js/jqueryrules.js"></script> </body> </html>