forked from sandy-ali-basha/adsamy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
case-study.html
338 lines (326 loc) · 13.9 KB
/
case-study.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- for social media sharing links -->
<meta name="theme-color" content="#439299" />
<meta property="og:description" content="description" />
<meta property="og:title" content="Adsamy" />
<meta property="og:type" content="website" />
<meta property="og:url" content="website link" />
<meta property="og:image" content="website image" />
<!-- bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- scss -->
<link rel="stylesheet" href="./scss/main.css" />
<!-- css -->
<link rel="stylesheet" href="./css/style.css" />
<!-- swiper -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<title>ADSAMY | Case Study</title>
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- Navbar Include -->
<nav class="navbar sticky-top navbar-expand-lg bg-dark-blue text-white py-2" id="navbar_container"></nav>
<!-- --Navbar Include -->
<header
style="background: url(./imgs/Hero-Image.png) center/cover no-repeat;"
class="px-5 d-flex flex-column justify-content-center vh-50"
></header>
<section class="py-5 py-md-4 container px-4 px-md-0">
<h2 class="text-primary">Overview</h2>
<p>
Through dentsu X’s longstanding partnership with JCPenney, one of the
nation’s largest retailers, the opportunity to create a customized
holiday shopping experience for their customers came to light. JCPenney
worked with the dentsu teams to harness the power of Intelligent
Messaging, dentsu’s latest messaging experience solution.
</p>
<p>
Collaborating seamlessly, the team reimagined 1:1 customer experiences
during the busiest time of the year – the holiday season – with
astonishing results.
</p>
</section>
<section class="bg-dark-blue ">
<div
class="d-flex flex-column flex-md-row align-items-center justify-content-center gap-5 container py-5"
>
<div class="text-white">
<h2 class="text-white text-center mb-3 fw-bold">95%</h2>
<p class="text-center">
of conversations were from first-time messengers to JCPenney
</p>
</div>
<div class="text-white">
<h2 class="text-white text-center mb-3 fw-bold">95%</h2>
<p class="text-center">
of conversations were from first-time messengers to JCPenney
</p>
</div>
<div class="text-white">
<h2 class="text-white text-center mb-3 fw-bold">95%</h2>
<p class="text-center">
of conversations were from first-time messengers to JCPenney
</p>
</div>
</div>
</section>
<section class="py-5 container px-4 px-md-0">
<h3 class="fw-bold pb-2">The challenge</h3>
<p>
The holidays are overwhelming enough without the added stress and
confusion of finding the perfect gifts. And, having too many options can
initiate the phenomenon of “gifting paralysis”, making it nearly
impossible for shoppers to choose the right things for their loved ones.
JCPenney recognized this pain point and worked to create a solution that
would enhance customers’ holiday shopping experience, ensuring it’s as
personalized, easy, and merry as can be.
</p>
<h3 class="fw-bold pt-5 pb-2">The approach</h3>
<p>
Using the power of our Intelligent Messaging, the team created a way for
shoppers to chat with the GiftBot to generate personalized gift
recommendations for their friends and loved ones based on interest,
price, product rating, and more. The program leveraged both Facebook and
Instagram click-to-message advertising solutions to generate one-to-one
conversations and utilized push notifications to highlight key holiday
sale moments, a first amongst Meta’s retail partners.
</p>
</section>
<section>
<img src="./imgs/JCPenny.png" class="w-100 px-5" alt="" />
<div class="container px-4 px-md-0">
<p>
The program successfully achieved the team’s ultimate goal: providing
useful, easy-to-use tech, and even adding a little fun to the
customer’s shopping experience, courtesy of JCPenney.
</p>
<p>
With a data-driven approach to audience development, the team
leveraged powerful consumer insights to determine high interest
categories and products to generate maximum user-experience and
increase revenue during the all-important holiday season.
</p>
<p>
The team utilized a custom “Now, Near, Next” roadmap to connect with
JCPenney’s target audience: America’s diverse working families. The
approach seamlessly integrated paid media and CRM. JCP was one of a
handful of advertisers outside of the entertainment vertical to run
both click-to-messenger (CTM) and click-to-Instagram direct (CTD)
campaigns alongside “opt-in for marketing” messaging to drive valuable
first-party data collection for future CRM activities. This effort
gave the JCPenney team the ability to send recurring notifications and
subsequent holiday messaging along with customized offers available
exclusively to GiftBot users. Live links shared through the GiftBot
experience sent customers to specific categories (jewelry, home goods,
clothing, etc.) as well as the JCPenney offers page to avoid
duplication.
</p>
<h3 class="fw-bold mt-3">The outcome</h3>
<p>
By focusing on offering the audience a solution to a significant
holiday shopping pain point, JCPenney was able to acquire their next
best customer and drive efficient conversions.
</p>
<p>
By deploying a customized chat experience solution with an
audience-first approach and a mix of paid media and CRM activities,
JCPenney was able to bridge the gap between the physical and digital
world. With GiftBot, they were able to bring a store associate to life
on a digital platform for their shoppers. In a relatively short
timeframe, we were able to achieve incredible results tied to
JCPenney's goals:
</p>
<ul style="list-style-type: none;">
<li class="mb-2">
95% of all conversations came from people who messaged JCPenney for
the first time.
</li>
<li class="mb-2">
A 3.8x higher conversion rate vs. business-as-usual campaigns during
the same period.
</li>
<li class="mb-2">
30% average opt-in rate to future communications by participants who
messaged JCPenney for the first time.
</li>
</ul>
</div>
</section>
<section class="bg-dark-blue py-5">
<div class="swiper MoreSwiper py-5">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image5.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image1.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image2.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image3.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image4.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image5.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image5.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image4.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image3.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image2.jpg" class="w-100" />
</div>
<div class="swiper-slide">
<div class="text-hover ">
<div class="bg-white text-primary fw-bold px-3 py-1">VELUX</div>
<div class="p-3">
<h3 class="fw-bold mb-1 text-white">Envisioning the view</h3>
<a href="Read case">Read case</a>
</div>
</div>
<img src="./imgs/image1.jpg" class="w-100" />
</div>
</div>
</div>
</section>
<!-- Footer Include -->
<footer class="text-center mt-0 text-lg-start text-white" style="background-color: #1b2b44;" id="footer_container"></footer>
<!-- --Footer Include -->
<script
src="https://kit.fontawesome.com/5b9061b1a3.js"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- dynamic load fixed parts -->
<script src="./js/load_fixed_parts.js" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script>
var swiper = new Swiper(".MoreSwiper", {
slidesPerView: 1,
spaceBetween: 2,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 10,
},
768: {
slidesPerView: 4,
spaceBetween: 10,
},
1024: {
slidesPerView: 7,
spaceBetween: 10,
},
},
});
</script>
</body>
</html>