storecreation.html

<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>Store Creation (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/OC3UqadhQfw" 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> November 2016</span>
          <br />
          <ul class="tags">
            <li><a href="#">Angular 1.x</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3/Sass</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>
              At InkSoft our direct customers, garment printers, are able to create their own websites. This can be a website to sell
              their own merchandise, use for fundraisers, or just to create simple one page eCommerce stores. One pain point our
              customers expressed to us was how long it takes to create a store in our legacy system. We wanted to tackle this
              problem head on and redesign the Store Creation process from the ground up to get store creation process time down to
              15 minutes from beginning to end.

            </p>
          </div>
          <div class="col-sm-12">
            <h5 class="small-header">
              <span>Process and Solution</span>
            </h5>
            <p>
              We wanted to take this opportunity to build an AngularJS app outside the .NET environment so that our front-end
              developers didn’t have to mess with the .NET environment, and to allow us to start utilizing the Angular framework
              technology in our apps. We had previously just been using jQuery in our apps. After doing some research on the popular
              JS frameworks out there we landed on Angular because of its popularity, growth, wide adoption, and backing by Google.
            </p>
            <p>
              After the designs were final and the framework decision was made, I started building out the UI. The most fun part
              about building this UI and the most challenging was the page transitions between each step. Using AngularJS’s built in
              Directives .ng-enter and .ng-leave in combination with css animations and key-frames, we were able to achieve the slide
              in and out animation of each step in the store creation. We achieved our goal of getting our customers to create a
              store in less than 15 minutes. Our Customer Support team and our customers especially, were beyond stoked on the new
              UI/UX of Store Creation 😄
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

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