Files
front/src/page-customer-story.html
2021-12-28 13:34:18 +01:00

352 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}">
<head>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Customer Story | Front - Multipurpose Responsive Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="@@autopath/favicon.ico">
<!-- Font -->
<link href="@@vars.themeFont" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<!-- bundlecss:vendor [@@autopath] -->
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
</head>
<body>
<!-- ========== HEADER ========== -->
@@include("@@autopath/partials/navbar/main-with-topbar.html", {
"topbarcategory": "demos",
"topbarlink": "main",
"category": "company",
"subcategory": "",
"link": "page-customer-story.html"
})
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Hero -->
<div class="bg-dark" style="background-image: url(@@autopath/assets/svg/components/wave-pattern-light.svg);">
<div class="container content-space-2 content-space-lg-3">
<div class="w-lg-65 text-center mx-lg-auto">
<span class="badge bg-warning text-dark rounded-pill mb-3">Customer success story</span>
<h1 class="text-white mb-0">Millions turn to Amazon for a great customer experience</h1>
</div>
</div>
</div>
<!-- End Hero -->
<!-- Content -->
<div class="container content-space-2 content-space-lg-0">
<div class="row">
<div class="col-lg-4 mt-lg-n10 mb-7 mb-lg-0">
<!-- Sticky Block -->
<div id="stickyBlockStartPoint">
<div class="js-sticky-block"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"targetSelector": "#header",
"breakpoint": "lg",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 20
}'>
<!-- Card -->
<div class="card">
<div class="card-header border-bottom text-center">
<img class="avatar avatar-xxl avatar-4x3" src="@@autopath/assets/svg/brands/amazon.svg" alt="Logo">
</div>
<div class="card-body">
<dl class="row">
<dt class="col-sm-4">Industry</dt>
<dd class="col-sm-8">E-commerce</dd>
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-4">Location</dt>
<dd class="col-sm-8">Seattle, Washington, U.S.</dd>
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-4">Goals</dt>
<dd class="col-sm-8">Build campaigns that bring in quality leads who convert from free to paid.</dd>
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-4">Type</dt>
<dd class="col-sm-8">B2C</dd>
</dl>
<!-- End Row -->
<hr class="my-4">
<div class="mb-3">
<h4>Products used</h4>
</div>
<dl class="row">
<dt class="col-sm-4 mb-2 mb-sm-0">
<div class="svg-icon text-primary">
@@include("@@autopath/assets/vendor/duotone-icons/fin/fin008.svg")
</div>
</dt>
<!-- End Col -->
<dd class="col-sm-8">
<h5 class="mb-0">Amazon wallet</h5>
<p class="mb-0">Send targeted currencies to the right people at the right time.</p>
</dd>
<!-- End Col -->
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-4 mb-2 mb-sm-0">
<div class="svg-icon text-primary">
@@include("@@autopath/assets/vendor/duotone-icons/elc/elc004.svg")
</div>
</dt>
<!-- End Col -->
<dd class="col-sm-8">
<h5 class="mb-0">Amazon Fire TV</h5>
<p class="mb-0">Amazon Fire TV is a digital media player and its microconsole remote.</p>
</dd>
<!-- End Col -->
</dl>
<!-- End Row -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- Sticky Block -->
</div>
<!-- End Col -->
<div class="col-lg-8 content-space-t-lg-2">
<div class="ps-lg-4">
<h2 class="h3">It's difficult to imagine life pre-Internet, before the web so closely threaded together individuals around the world.</h2>
<p>It takes work to stand out from the pack—work that Amazon is proud to make much easier. Founded in 2003, the company provides people with the tools and templates to build, host, and promote their online brand. Even Amazon is built on Amazon.</p>
<p>"The key thing we try to do every day is give people a place on the Internet to call home, to say, 'This is a place I manage, and this is how I want to present myself online to my customers,' or to anyone else they want to touch,"" explained Vice President of Customer Operations Raphael Front.
<p>Naturally, Amazon wants its customers to feel at ease in their digital home and works hard behind the scenes to create a customer experience that is easy and intuitive, turning even the least Internet-savvy among us into designers of beautiful spaces. To cultivate a support atmosphere that's inviting, Amazon's customer service team has implemented a full suite of integrated support channels through Front Support, Guide, Chat, and Talk.</p>
<div class="my-4">
<img class="img-fluid rounded-2" src="@@autopath/assets/img/900x450/img13.jpg" alt="Image Description">
</div>
<p>Before switching to Front in 2015, Amazon used a few different platforms for support, but felt they needed a single omnichannel solution to provide a more fluid customer experience and to keep pace with the company's growth. Front' Customer Operations organization, comprised of 340 people in leadership, operations, product solutions, content and community, and quality assurance, also needed a more efficient way to manage email and help articles.</p>
<p>"I don't think there was even anyone else that we considered," he said. "Front was like a no brainer—instead, we spent our time thinking through our support configuration."</p>
<p>Amazon's overall strategy focuses on three areas, Front explained, noting that what the team offers is, in fact, another Amazon product. "It's not just that we have a help center or live chat," he said, "but that we're offering coaching and mentorship and helping our customers to become brand advocates. We're here to help our customers succeed online, and that's something we hear back from our customers. They just love our support channels."</p>
<div class="my-4">
<img class="img-fluid rounded-2" src="@@autopath/assets/img/900x450/img12.jpg" alt="Image Description">
</div>
<p>That effort shows, as the team has created 900 help center articles and claims a 95 percent success rate through its investment in self-service, meaning that help center visitors are served without needing to switch to an assisted channel. The number of tickets not created, as a result, is significant, especially considering that Amazon's help center has bypassed 15.5 million visits and now averages two million visits each month. Front quantified a 27 percent increase in knowledge usage and noted that headcount on the Customer Operations team has remained relatively stable since the end of 2015 through mid-2018.</p>
<!-- End Sticky End Point -->
<div id="stickyBlockEndPoint"></div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Content -->
<!-- Testimonials -->
<div class="container content-space-b-2 content-space-lg-3">
<div class="text-center mb-5">
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/illustrations/oc-person-2.svg" alt="Illustration">
</div>
<!-- Blockquote -->
<figure class="w-md-75 text-center mx-md-auto">
<blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Front so far. The documentation is outstanding - clear and detailed. ”</blockquote>
<figcaption class="blockquote-footer text-center">
Martin
<span class="blockquote-footer-source">Product Manager</span>
</figcaption>
</figure>
<!-- End Blockquote -->
</div>
<!-- End Testimonials -->
<!-- Card Grid -->
<div class="container content-space-b-2 content-space-b-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Related stories</h2>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-sm-6 col-md-4 mb-5 mb-md-0">
<!-- Card -->
<div class="card h-100">
<img class="card-img-top" src="@@autopath/assets/img/480x320/img13.jpg" alt="Image Description">
<div class="card-body">
<div class="mb-3">
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/amazon.svg" alt="Logo">
</div>
<p class="card-text">Amazon launched their enterprise platform and built a powerful user experience.</p>
</div>
<div class="card-footer pt-0">
<a class="card-link" href="@@autopath/page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-5 mb-md-0">
<!-- Card -->
<div class="card h-100">
<img class="card-img-top" src="@@autopath/assets/img/480x320/img17.jpg" alt="Image Description">
<div class="card-body">
<div class="mb-3">
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/mapbox.svg" alt="Logo">
</div>
<p class="card-text">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
</div>
<div class="card-footer pt-0">
<a class="card-link" href="@@autopath/page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<!-- Card -->
<div class="card h-100">
<img class="card-img-top" src="@@autopath/assets/img/480x320/img16.jpg" alt="Image Description">
<div class="card-body">
<div class="mb-3">
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/forbes.svg" alt="Logo">
</div>
<p class="card-text">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
</div>
<div class="card-footer pt-0">
<a class="card-link" href="@@autopath/page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card Grid -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== FOOTER ========== -->
@@include("@@autopath/partials/footer/main-dark.html")
<!-- ========== END FOOTER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Sign Up -->
@@include("@@autopath/partials/modal/signup.html")
<!-- Go To -->
@@include("@@autopath/partials/layouts-components/go-to.html")
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory @@deleteLine:build -->
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [@@autopath] -->
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
<script src="@@autopath/assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<!-- JS Front -->
<!-- bundlejs:theme [@@autopath] -->
<script src="@@autopath/assets/js/hs.core.js"></script>
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF HEADER
// =======================================================
new HSHeader('#header').init()
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
// INITIALIZATION OF BOOTSTRAP DROPDOWN
// =======================================================
HSBsDropdown.init()
// INITIALIZATION OF GO TO
// =======================================================
new HSGoTo('.js-go-to')
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
new HSStickyBlock('.js-sticky-block', {
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
})
})()
</script>
</body>
</html>