-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
283 lines (238 loc) · 14.5 KB
/
index.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
<!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">
<title>The Valley</title>
<!-- Link to the css -->
<link rel="stylesheet" href="./css/style.css">
<!-- Link to the JavaScript script -->
<script src="./js/script.js" defer></script>
<!-- Link to jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<!-- Navigation starts here -->
<nav class="sticky-nav">
<div class="logo">
<img class="logo-valley-white" src="./img/logo-white.png" alt="The Valley logo">
</div>
<div class="navigation">
<input type="text" id="nav-checkbox">
<label for="nav-checkbox" class="nav-toggle">
<img src="./icons/Icon-Menu.png" alt="Open menu" class="open">
<img src="./icons/Icon-Close.png" alt="Close menu" class="close">
</label>
</div>
</nav>
<!-- Navigation ends here -->
<!-- Header case study starts here -->
<header class="case-study">
<img class="nike-img" src="./img/nike-mannequin.png" alt="Nike Team">
<div class="case-study-title">
<h6>Case study</h6>
<h3>Nike team</h3>
</div>
</header>
<!-- Header case study ends here -->
<!-- Section case introduction starts here -->
<section class="case-introduction">
<header class="introduction-content">
<h4>A long-term, creative partnership that turns athletes into designers</h4>
<div class="center-tags">
<ul class="tags">
<li>Strategy</li>
<li>Service design</li>
<li>Development</li>
<li>3D content</li>
</ul>
</div>
</header>
<p class="body-l-1 hidden">
Regardless of their level, a football player's kit is about confidence as much as it's about performance.
From junior to professional, it's your amour from self-doubt.
</p>
<p class="body-l-2 hidden">
A reminder that no matter where you are in the journey "from grassroots to greatness," you belong there.
And yet, this critical step in preparing the team's next season has been surprisingly traditional.
</p>
<h5 class="hidden">Turning Athletes into Designers</h5>
<p class="body-l-3 hidden">
The process began with one representative from the team meeting with a retailer armed with notes from players and management.
This customer then explains what they are looking for, pointing to samples that are not quite right while flipping through a pile of catalogs the retailer offers.
Hopefully, one of them is Nike.
</p>
<!-- Facts starts here -->
<div class="fact-and-figures">
<div class="hidden">
<div class="fact-1 show-cards">
<!-- <span class="num" data-val="180">000</span> -->
<h3 class="fact-title">180</h3>
<p class="fact-subtitle">Hi-res cameras</p>
<p class="fact-info">Using a camara rig to scan each final article of clothing, from shirts to socks resulting in 2Gb visual data that is highly flexible in 3D space.</p>
</div>
</div>
<div class="hidden">
<div class="fact-2">
<!-- <span class="num" data-val="80123">000</span> -->
<h3 class="fact-title">80.123 kg</h3>
<p class="fact-subtitle">Less paper waste per year</p>
<p class="fact-info">Not only were the paper catalogues difficult to stand out in and unwieldy to get to the client’s table, it is also quite the waste of paper.</p>
</div>
</div>
<div class="hidden">
<div class="fact-3">
<!-- <span class="num" data-val="1942">000</span> -->
<h3 class="fact-title">1942</h3>
<p class="fact-subtitle">Kit designs shares each month</p>
<p class="fact-info">From players to coaches, professionals to students. Everyone is creating kits to share in public or private channels, creating great exposure and conversion.</p>
</div>
</div>
</div>
<!-- Facts end here -->
</section>
<!-- Section case introduction ends here -->
<!-- Main content starts here -->
<main class="case-content">
<section class="create-your-kit">
<header class="create-your-kit-content">
<img class="create-your-kit-img hidden" src="./img/nike-create-your-kit.png" alt="Create your kit, Nike">
<p class="hidden">With a simplified customer-facing kit experience, we skipped photography and its limitations to embrace 3D models.</p>
</header>
<h5 class="hidden">Moving away from the hassle of paper catalogues</h5>
<p class="body-m-1 hidden">
These clients had a clear idea of what they wanted but had no accurate way to capture and communicate it.
To make matters worse, there were numerous ways their design could be misinterpreted.
Teams would verbally describe how they wanted their kits to look and hoped that every person in the assembly chain would understand.
</p>
<p class="body-m-2 hidden">
Catalogue photography struggled to capture how material genuinely looked, leading to misaligned expectations for the final product.
In the end, XX% of orders that did make it to Nike was returned for not matching the desired result.
</p>
</section>
<section class="image-gallery-nike">
<img class="customize-desktop hidden" src="./img/nike-3d-desktop.png" alt="Customize Nike shirt on the desktop">
<img class="customize-mobile hidden" src="./img/nike-3d-mobile.png" alt="Customize Nike shirt on mobile">
<p class="quote hidden">
‘The idea is strong as it's useful and personalised for teams and tailored to the needs of the various different sports.
The execution is incredibly strong, easy to use, clear UX, enough choice and the 3D visuals are just next level.’
</p>
<p class="signature hidden">Dutch Creativity Awards</p>
<h5 class="hidden">Developing a powerful 3D tool</h5>
<p class="body-m-1 hidden">
A software solution powerful enough to enable players and coaches to become designers,
yet light enough to run from niketeamfootball.com, would be the single solution to a list of problems.
With a simplified customer-facing kit experience, we skipped photography and its limitations to embrace 3D models.
We required 3D models so precise that you could almost touch the material to avoid new wave returns.
</p>
<p class="body-m-2 hidden">
In our search for the right partner, we met Smoke & Mirrors, specialists in scanning 3D fabrics.
With a rig of 180 cameras capturing hi-res data where each final article of clothing, from shirts to socks, contained more than 2Gb.
This method allowed for creating digital twins of Nike's materials, delivered in layers that enabled exceptionally flexible customization.
</p>
</section>
<section class="football-jersey-image-gallery">
<img class="football-jersey-back hidden" src="./img/football-shirt.png" alt="Football jersey">
<img class="football-jersey-front hidden" src="./img/football-shirt-worn.png" alt="Football jersey being worn">
<h5 class="hidden">A solution build to scale that creates digital twins</h5>
<p class="body-m-1 hidden">
With 40 individual colours, 20 unique jersey designs, we have given clients the power to control every variable.
Adding up model choice, colour combination, and material selection provides thousands of options before you even get to team and sponsor logos with player names.
Client accounts allow the designated designer to share the results with every team member before approaching a retailer.
Consequently, the true-to-life renders dramatically reduced returns by a projected XX%.
</p>
<p class="body-m-2 hidden">
Likewise, it significantly reduced the workflow, removing the need to photograph every colour.
For retailers, players and teams, it provides them with the latest Nike sport innovations and information.
The simplified experience secures trust that players will receive precisely the kits they design.
The signature Nike style for visuals means the kit configurator generates striking design assets that are applied throughout the customer journey—in social, shop experience, order confirmation and even aftercare.
</p>
</section>
<section class="image-gallery">
<div class="image-gallery-images">
<img class="player-playing-football hidden" src="./img/playing-football.png" alt="Player playing football">
<img class="team-playing-football hidden" src="./img/team.png" alt="Team practicing football">
<img class="duo-wearing-football-uniform hidden" src="./img/football-uniform-worn.png" alt="A duo wearing a football uniform">
</div>
<p class="quote hidden">
The signature Nike style for visuals means the kit configurator generates striking design assets that are applied throughout the customer journey—in social,
shop experience, order confirmation and even aftercare.
</p>
</section>
<section class="contact">
<header class="contact-content">
<h6 class="hidden">Want to know what digital can do for your service?</h6>
</header>
<div class="chairmen">
<div class="hidden">
<img class="auke" src="./img/auke-meijer.png" alt="Auke Meijer CFO/COO">
<h6 class="name">Auke Meijer</h6>
<h6 class="position">CFO/COO</h6>
<p class="mail">auke@thevalley.nl</p>
</div>
<div class="hidden">
<img class="philip" src="./img/philip-kok.png" alt="Philip Kok CEO">
<h6 class="name-2">Philip Kok</h6>
<h6 class="position-2">CEO</h6>
<p class="mail-2">philip@thevalley.nl</p>
</div>
<button class="contact-modal-button hidden"><h5 class="hidden">Contact us</h5></button>
</div>
</section>
<!-- Carousel starts here -->
<section class="carousel-section">
<header class="carousel-intro">
<h4 class="hidden">Serving up another case</h4>
</header>
<div class="space">
<div class="carousel hidden" data-carousel>
<div class="align-right hidden">
<button class="left" data-carousel-button="prev"><img src="./icons/Icon-Arrow-1.png" alt="Previous button"></button>
<button class="right" data-carousel-button="next"><img src="./icons/Icon-Arrow.png" alt="Next button"></button>
</div>
<ul class="hidden" data-slides>
<li class="slide" data-active>
<img class="the-valley-office" src="./img/the-valley-office.png" alt="The Valley office">
</li>
<li class="slide">
<img class="the-valley-bar" src="./img/the-valley-bar.png" alt="The Valley bar">
</li>
</ul>
</div>
</div>
<h6 class="hidden">How we create value</h6>
</section>
<!-- Carousel ends here -->
</main>
<!-- Main content ends here -->
<!-- Footer starts here -->
<footer>
<div class="footer-content">
<img class="hidden" src="./img/logo-white.png" alt="The Valley logo">
<h6 class="hidden">A production-ready consultancy that helps businesses thrive.</h6>
<ul class="contacts hidden">
<li class="title">Work with us</li>
<li>inquiries@thevalley.nl</li>
<li>(+31) 20 451 51 51 </li>
</ul>
<!-- Links to social media -->
<ul class="social-media hidden">
<li>Linkedin</li>
<li>Facebook</li>
<li>Instagram</li>
<li>GitHub</li>
</ul>
</div>
<hr class="line">
<div class="align-right">
<ul class="footer-end">
<li>Privacy policy</li>
<li>ISO certification</li>
<li>Inclusive by design</li>
</ul>
</div>
</footer>
<!-- Footer ends here -->
</body>
</html>