-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-samsam.html
235 lines (226 loc) · 8.54 KB
/
work-samsam.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Samsam - 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(".screenshots .carousel"), {
slidesToShow: 1,
duration: 1,
dots: ".screenshots .dots",
arrows: {
prev: ".screenshots .glider-prev",
next: ".screenshots .glider-next",
},
});
new Glider(document.querySelector(".wireframes .carousel"), {
slidesToShow: 1,
duration: 1,
dots: ".wireframes .dots",
arrows: {
prev: ".wireframes .glider-prev",
next: ".wireframes .glider-next",
},
});
});
</script>
<style>
section:nth-child(even) {
background-color: var(--tint-background);
}
.wireframes {
margin-top: 3rem;
}
.wireframes .carousel div {
padding: 0 1rem;
}
</style>
</head>
<body>
<nav></nav>
<header>
<h1>Samsam</h1>
<dl class="project-info">
<dt>Client</dt>
<dd>Sijthoff Media</dd>
<dt>Platform</dt>
<dd>Responsive website</dd>
<dt>Role</dt>
<dd>Interaction Design</dd>
</dl>
</header>
<section>
<div class="screenshots carousel-container">
<div class="carousel">
<div>
<img
src="images/work-samsam-digiboard1.png"
alt="Samsam in the class"
/>
</div>
<div>
<img
src="images/work-samsam-tablet.png"
alt="Samsam website on tablet"
/>
</div>
<div>
<img
src="images/work-samsam-digiboard2.png"
alt="Samsam in the class"
/>
</div>
<div>
<img
src="images/work-samsam-notebook.png"
alt="Samsam website on a notebook computer"
/>
</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>
<p>
Samsam is an editorially independent educational magazine. A crossmedia
platform where children can get to know everything about the world and
their role within it. “Playing, looking, investigating and
learning” are central. At IJsfontein I led the design of a new,
modern digital platform that stimulates curiosity and encourages
exploration of the content.
</p>
<p>
Each team member installs the app which is linked to the team-specific
programme with assignments and content chosen by the coach. The users
complete a daily reflection which over time provides an insight into
what gives them energy, and what takes it away. The app also facilitates
assignments in four categories: perspective, autonomy, connection and
growth.
</p>
</section>
<section>
<h2>Responsive & future-proof</h2>
<p>
The platform is designed to be future-proof and flexible. Using
responsive-design techniques, I worked on a flexible grid with layout
adjustments that optimizes the site for tablet, desktop and digiboard
(digital whiteboard). I defined the interaction design in a series of
responsive components which give the content editors a modular, scalable
system in which to create content that is less restricting than a
typical template-based CMS.
</p>
<p>
The content can be filtered in different ways. Select a subject or
filter by clicking on the world map. Teachers have there own section
with lesson ideas and an archive of teaching material. After testing the
site with schoolchildren, I did some further design to make the
connection between the map, filters and content thumbnails more obvious.
It was also interesting to see from analytics data how the search field
is a popular starting point. We improved the search functionality with
instant (as you type) results, and suggestions for misspelled words to
help children find countries with difficult spelling.
</p>
<div class="wireframes carousel-container">
<div class="carousel">
<div>
<img
src="images/work-samsam-wireframe1.png"
alt="Samsam wireframe"
/>
</div>
<div>
<img
src="images/work-samsam-wireframe2.png"
alt="Samsam wireframe"
/>
</div>
<div>
<img
src="images/work-samsam-wireframe3.png"
alt="Samsam 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.samsam.net" target="_blank">Visit the site at www.samsam.net<i class="fas fa-external-link-alt"></i></a>
</div>
</section>
<section>
<h2>User-generated content</h2>
<div class="videoWrapper">
<div class="videoSizer">
<iframe src="https://player.vimeo.com/video/551432414?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="ReportersClub"></iframe>
</div>
</div>
<p>
After launch of the new publishing platform, Samsam approached us to
think about ideas for how we can engage kids and schools. I helped
facilitate several workshops and creative sessions which lead to the
Reportersclub concept.
</p>
<p>
The idea is to provide school classes with a tool that goes beyond just
another social network or user-generated-content platform. The site
provides specific features that help kids work together in teams, and
challenges them with subjects to investigate in the form of "Missions".
</p>
<p>
As an interaction designer is was exciting to work on complex
collaborative tools and make them accessible, yet sufficiently rich in
possibilities for self-expression, for the younger users. I prototyped
the site and mobile app using Axure while working together with
developers with an agile approach. I also helped out with some of the
visual design tasks during the later stages of production.
</p>
<div class="links">
<a class="secondary-button" href="https://www.patrickrushton.com/prototypes/samsam-reportersclub-prototype/#p=introduction" target="_blank">Open the Axure prototype<i class="fas fa-external-link-alt"></i></a>
</div>
</section>
<section id="more-work" class="inverse"></section>
</body>
</html>