-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-ns.html
298 lines (287 loc) · 9.83 KB
/
work-ns.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>NS - UX Portfolio Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/normalize.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
/>
<link href="css/glider.css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-7367689-2"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-7367689-2");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/glider-js/1.7.7/glider.min.js"></script>
<script src="js/global.js"></script>
<script>
window.addEventListener("load", function () {
new Glider(document.querySelector(".rwd .carousel"), {
slidesToShow: 1,
duration: 1,
dots: ".rwd .dots",
arrows: {
prev: ".rwd .glider-prev",
next: ".rwd .glider-next",
},
});
new Glider(document.querySelector(".spoordeel .carousel"), {
slidesToShow: 1,
duration: 1,
dots: ".spoordeel .dots",
arrows: {
prev: ".spoordeel .glider-prev",
next: ".spoordeel .glider-next",
},
});
new Glider(document.querySelector(".mijn-ns .carousel"), {
slidesToShow: 1,
duration: 1,
dots: ".mijn-ns .dots",
arrows: {
prev: ".mijn-ns .glider-prev",
next: ".mijn-ns .glider-next",
},
});
});
</script>
<style>
section:nth-child(odd) {
background-color: var(--tint-background);
}
.rwd {
margin-top: 3rem;
}
/* .wireframes .carousel div {
padding: 0 1rem;
} */
</style>
</head>
<body>
<nav></nav>
<header>
<h1>Nederlandse Spoorwegen</h1>
<dl class="project-info">
<dt>Client</dt>
<dd>Nederlandse Spoorwegen</dd>
<dt>Platform</dt>
<dd>Website, mobile apps & ticket machines</dd>
<dt>Role</dt>
<dd>Lead UX Designer</dd>
</dl>
<p>
While working at LBi, I took on the role of user-experience lead for the
NS with responsibility for several new projects as well as the continued
(agile) development of NS’s web tools, mobile applications and ticket
touchscreens that are used daily by thousands of train travellers. The
following is a selection of those projects.
</p>
<img src="images/work-ns-illustration.svg" alt="NS illustration" />
</header>
<section>
<h2>Responsive web design pilots</h2>
<p>
I led a pilot project to evaluate the technique of designing for
multiple devices with the aim of providing an optimal user experience
across different screen sizes. I choose one of the most complex, and
most used parts of the NS website: the journey planner.
</p>
<p>
I selected four breakpoints at which the layout would be optimized based
on typical device screen sizes and orientations. Then for each of the
steps in planning a journey, I created wireframes to illustrate how the
layout would adjust. Working together with a visual designer and two
front-end developers we created a working proof-of-concept in order to
evaluate the effect of the technique on the user experience, technical
performance and production workflow.
</p>
<div class="rwd carousel-container">
<div class="carousel">
<div>
<img
src="images/work-ns-rwd1.png"
alt="NS responsive web design wireframe"
/>
</div>
<div>
<img
src="images/work-ns-rwd2.png"
alt="NS responsive web design wireframe"
/>
</div>
<div>
<img
src="images/work-ns-rwd3.png"
alt="NS responsive web design wireframe"
/>
</div>
</div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
<div role="tablist" class="dots"></div>
</div>
</section>
<section>
<h2>E-commerce site</h2>
<div class="videoWrapper">
<div class="videoSizer">
<iframe
src="https://player.vimeo.com/video/554650794?title=0&byline=0&portrait=0&speed=0&badge=0&autopause=0&player_id=0&app_id=58479"
width="1600"
height="900"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
title="Spoordeelwinkel"
></iframe>
</div>
</div>
<p>
Spoordeelwinkel is the new webshop from NS which offers package deals of
a day-trip together with a train ticket. Deals are presented in
categories: a day out, weekend away, fun & active, culture & music, and
leisure.
</p>
<p>
The customer chooses an offer, purchases online and receives a voucher
for entrance together with an e-ticket for their train journey. I was
responsible for the concept and UX for the site, defining the optimal
shopping and checkout flow. The following wireframes are an extract from
the interaction design document.
</p>
<div class="spoordeel carousel-container">
<div class="carousel">
<div>
<img
src="images/work-ns-spoordeel-1.png"
alt="Spoordeelwinkel wireframe"
/>
</div>
<div>
<img
src="images/work-ns-spoordeel-2.png"
alt="Spoordeelwinkel wireframe"
/>
</div>
<div>
<img
src="images/work-ns-spoordeel-3.png"
alt="Spoordeelwinkel wireframe"
/>
</div>
<div>
<img
src="images/work-ns-spoordeel-4.png"
alt="Spoordeelwinkel wireframe"
/>
</div>
<div>
<img
src="images/work-ns-spoordeel-5.png"
alt="Spoordeelwinkel wireframe"
/>
</div>
<div>
<img
src="images/work-ns-spoordeel-6.png"
alt="Spoordeelwinkel wireframe"
/>
</div>
<div>
<img
src="images/work-ns-spoordeel-7.png"
alt="Spoordeelwinkel wireframe"
/>
</div>
</div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
<div role="tablist" class="dots"></div>
</div>
<div class="links">
<a class="secondary-button" href="https://www.ns.nl/spoordeelwinkel" target="_blank">Visit the site at ns.nl/spoordeelwinkel<i class="fas fa-external-link-alt"></i></a>
</div>
</section>
<section>
<h2>Mijn NS & ticket machines</h2>
<p>In my role as UX lead for the NS, I was responsible for continued development and improvement of the NS website, mobile app (NS Reisplanner) and the yellow & blue ticket touchscreens. My role was to gather requirements from stakeholders, define user flows and interface designs and present solutions to the client and development teams.</p>
<div class="mijn-ns carousel-container">
<div class="carousel">
<div>
<img
src="images/work-ns-mijn-ns1.png"
alt="Mijn NS wireframe"
/>
</div>
<div>
<img
src="images/work-ns-mijn-ns2.png"
alt="Mijn NS wireframe"
/>
</div>
<div>
<img
src="images/work-ns-mijn-ns3.png"
alt="Mijn NS wireframe"
/>
</div>
<div>
<img
src="images/work-ns-mijn-ns4.png"
alt="Mijn NS wireframe"
/>
</div>
<div>
<img
src="images/work-ns-ticket1.jpg"
alt="NS ticket machine wireframe"
/>
</div>
<div>
<img
src="images/work-ns-ticket2.jpg"
alt="NS ticket machine wireframe"
/>
</div>
</div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
<div role="tablist" class="dots"></div>
</div>
</section>
<section id="more-work" class="inverse"></section>
</body>
</html>