checkout.html

<!-- https://www.youtube.com/watch?v=2yYNH_yh76k  -->
<section class="section section-diff">
    <div class="container">

      <div class="project-nav">
        <a href="#" class="project-close"><i class="fa fa-times-circle-o"></i></a>
      </div>

      <div class="project-title"><h1>Checkout Experience (InkSoft)</h1></div>

      <div class="project-wrap">
        <div class="browser-window">
          <div class="browser-header">
            <ul class="header-btns">
              <li><span class="browser-header-circle red"></span></li>
              <li><span class="browser-header-circle yellow"></span></li>
              <li><span class="browser-header-circle green"></span></li>
            </ul>
          </div>
          <div class="fit-vid">
            <iframe width="720" height="auto" src="https://www.youtube.com/embed/2yYNH_yh76k" frameborder="0" allowfullscreen></iframe>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-4 col-md-3">
          <h5 class="small-header">
            <span>Project info</span>
          </h5>
          <div class="project-info">
            <span><small>Employer:</small> InkSoft</span>
            <span><small>Date:</small> December 2016</span>
            <br/>
            <ul class="tags">
              <li><a href="#">Angular 2.x</a></li>
              <li><a href="#">JavaScript</a></li>
              <li><a href="#">HTML5</a></li>
              <li><a href="#">CSS3/Less</a></li>
              <li><a href="#">UI/UX Design</a></li>
            </ul>
            <br/>
            <a href="https://stores.inksoft.com/egt/shop/home" class="btn btn-primary" target="_blank">Launch Application</a>
          </div>
        </div>

        <div class="col-sm-8 col-md-9">
          <div class="row">
            <div class="col-sm-12 portfolio-copy">
              <h5 class="small-header">
                <span>Background</span>
              </h5>
              <p>
                The mission was to re-design and unify the InkSoft stores Checkout process from the ground up. At the beginning of this
                project, InkSoft had a variety of Store themes and various different Checkout experiences that were tied to each theme.
                Rebuilding a new Checkout experience marked the beginning of building a stand alone Angular application that would live
                outside our .NET environment. This would allow our Front-end developers more freedom while separating the front from
                the back. The mission was to design and build one Checkout experience to rule them all, one that our customers would be
                directed to from any theme in our system. The main goal was to increase checkout conversions and get our customers
                selling more merch from their stores.

              </p>
            </div>
            <div class="col-sm-12">
              <h5 class="small-header">
                <span>Process and Solution</span>
              </h5>
              <p>
                The process started out with the Stakeholders, myself, the Product Owner, and the Lead Designer brainstorming the
                desired outcome of redesigning our Checkout experience. It was a hefty project with a lot of moving parts, so a lot of
                research was necessary to make the right decisions. The main goal for redesigning our Checkout was to increase
                successful purchases from our customers stores, unify the Checkout app so we could sunset all our other legacy Checkout
                apps, implement our own internal UI library, and start to separate our front-end from our back-end applications
                leveraging the Angular 2.x framework. The first step included market research on different eCommerce store checkout
                experiences and comparing different user flows and user experiences. We researched various form layouts, responsive
                checkouts, and conversion strategies, as we wanted this Checkout experience to be seamless and provide our customers
                with a rich application experience using modern web technologies.

              </p>
              <p>
                The Design Team and I had another side project in parallel with Checkout, which was designing an internal UI library
                that Design and Devs could use for various other projects moving forward. The goal was to have a consistent and
                cohesive design language to use throughout our system. One of the challenges was not having the time to code one from
                scratch, so while the Design Team built out all the components in Sketch, the Development Team’s responsibility was to
                find an existing UI framework to use and further customize. After weighing various options we decided on Bootstrap for
                many reasons, but I'll save that story for another time of our IUI library project. Then once we settled on our UI
                components design, a UI framework, and the workflow and interactions of the checkout, it was time to start building.
              </p>
              <p>
                Another major decision we had to make was whether to use the latest version of Angular 1.x or to use Angular 2 beta.
                Angular 2 was still in beta and we didn't want to end up losing a lot of time if beta ended up having a ton of bugs or
                the Angular team ended up making a bunch of changes between that current time and the official release. However, if we
                chose Angular 1.x and the official release shortly followed, we would end up spending a lot of time later on down the
                road re-factoring the entire app to Angular 2. So we decided to roll the dice and use Angular 2! While the Back-end
                team and Sr. Front-end Developer figured out a solution for how .NET was going to communicate with the Angular app, I
                started architecting and building out the checkout application UI.. We were able to deliver the new Checkout experience
                on time to our customers and exceed our goal of increasing successful checkout conversions by more than 30%. Not only
                did we meet the stakeholders goals, but this also paved the way for the future of Front-end development at InkSoft 😄👌
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/main.js"></script>
  </section>