portfolio/mattecentrum.html at main · 961028/portfolio · GitHub

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
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>Mattecentrum - Emil Holmsten</title>
		<link
			rel="icon"
			type="image/svg+xml"
			href="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20fill%3D%27none%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20fill%3D%27%232149b5%27%20d%3D%27M13%205H7v2H5v2H3v6h2v2h2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2V9h-2V7h-2V5h-6v2h-2v2h-2V7h-2z%27%2F%3E%3C%2Fsvg%3E"
		/>
		<script>
			const theme = localStorage.getItem("theme") || "light";
			document.documentElement.setAttribute("data-theme", theme);
			if (localStorage.getItem("fontScale") === "large") {
				document.documentElement.setAttribute(
					"data-font-scale",
					"large",
				);
				document.documentElement.style.setProperty(
					"--font-scale",
					"1.15",
				);
			}
		</script>
		<link
			rel="stylesheet"
			href="styles.css"
		/>
	</head>

	<body>
		<nav>
			<a
				href="index.html"
				aria-label="Go to home page"
			>
				<svg
					class="eh-logo"
					xmlns="http://www.w3.org/2000/svg"
					width="35"
					height="27"
					fill="none"
					viewBox="0 0 35 27"
				>
					<path
						class="logo-bg"
						fill="#f9f7f1"
						d="M0 0h35v27H0z"
					/>
					<path
						fill="currentColor"
						d="M2 2h15v1H2zm0 18h15v1H2zM2 4h15v1H2zm0 18h15v1H2zm0-10h11v1H2zm0-6h15v1H2zm0 18h15v1H2zm0-10h11v1H2zm0-4h5v1H2zm0-2h5v1H2zm0 8h5v1H2zm0 2h5v1H2zM24 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 6h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zM18 2h1v23h-1zm10 0h1v23h-1zm-8 0h1v23h-1zm10 0h1v23h-1zm-8 0h1v23h-1zm10 0h1v23h-1zm-8 10h1v3h-1zm2 0h1v3h-1zM10 8h1v3h-1zM8 8h1v3H8zm4 8h1v3h-1zm0-8h1v3h-1zm-2 8h1v3h-1zm-2 0h1v3H8zm6-8h1v11h-1zm2 0h1v11h-1z"
					/>
					<path
						fill="currentColor"
						fill-rule="evenodd"
						d="M0 27V0h35v27zm34-1H1V1h33z"
						clip-rule="evenodd"
					/>
				</svg>
			</a>
		</nav>
		<div class="toolbar">
			<button
				class="font-size-toggle"
				aria-label="Toggle large font size"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="font-size-toggle plus"
				>
					<path
						fill="currentColor"
						d="M13 7h5v16h-2v2h6v-2h-2V7h5v2h2V5H11v4h2zm-5 6H5v2H3v-4h12v4h-2v-2h-3v10h2v2H6v-2h2zm19-2h-2v3h-3v2h3v3h2v-3h3v-2h-3z"
					/>
				</svg>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="font-size-toggle minus"
				>
					<path
						fill="currentColor"
						d="M20 7h5v2h2V5H11v4h2V7h5v16h-2v2h6v-2h-2zm-10 6h3v2h2v-4H3v4h2v-2h3v10H6v2h6v-2h-2zm20 1h-8v2h8z"
					/>
				</svg>
			</button>
			<button
				class="theme-toggle"
				aria-label="Toggle dark mode"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="theme-toggle sun"
				>
					<path
						fill="currentColor"
						d="M9 13h2v6H9zm4-2V9h6v2zm0 12v-2h6v2zm8-10h2v6h-2zM2 15h4v2H2zm24 0h4v2h-4zM17 2v4h-2V2zm0 24v4h-2v-4zM7 7h2v2H7zm4 4h2v2h-2zm8 0h2v2h-2zm0 8h2v2h-2zm-8 0h2v2h-2zM5 5h2v2H5zm20 20h2v2h-2zm-2-2h2v2h-2zm2-16v2h-2V7zm2-2v2h-2V5zM7 25v2H5v-2zm2-2v2H7v-2z"
					/>
				</svg>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="theme-toggle moon"
				>
					<path
						fill="currentColor"
						d="M24 10h2v10h-2zm-2-2h2v2h-2zm0 12h2v2h-2zm-8-4h2v2h-2zm-6 6h2v2H8zm12 0h2v2h-2zm0-16h2v2h-2zm-4 2h2v8h-2zm-6 16h10v2H10zm-2-4h6v-2H6v4h2zm8-14h4V4h-6v4h2z"
					/>
				</svg>
			</button>
		</div>
		<main class="flow">
			<div class="image-frame hero">
				<img
					src="images/mattecentrum/hero.png"
					alt="Mattecentrum brand concept showing updated visual direction"
					loading="eager"
					width="1280"
					height="600"
				/>
			</div>

			<h1
				id="mattecentrum-title"
				class="project-title"
				style="view-transition-name: mattecentrum"
			>
				Mattecentrum Redesign
			</h1>
			<p>
				Mattecentrum is a non-profit organization providing free math
				support to students across Sweden through digital tutoring,
				local study centers, and educational content. This ongoing
				redesign focuses on improving access to core student services,
				simplifying navigation, and modernizing the visual identity to
				better fit the target audience.
			</p>

			<h2>Opportunities for improvement</h2>
			<ul>
				<li>Lack of hierarchy on the start page</li>
				<li>Complex navigation buried in sidebar</li>
				<li>Lack of features supporting task completion</li>
				<li>Visual design unfit for the target audience</li>
			</ul>

			<div class="image-frame">
				<img
					src="images/mattecentrum/original-startpage.png"
					alt="Original Mattecentrum startpage showing hero banner with “Gratis mattehjälp” headline, multiple call-to-action sections, and vertical sidebar navigation"
					loading="lazy"
					width="2560"
					height="1490"
				/>
			</div>
			<small class="image-description">
				Original Mattecentrum landing page with dense content and
				sidebar navigation.
			</small>

			<div class="image-frame">
				<img
					src="images/mattecentrum/original-livehjalpen.png"
					alt="Live video tutoring (Livehjälpen) scheduling page on Pluggakuten.se showing upcoming video help sessions with volunteer tutors, and session time listings"
					loading="lazy"
					width="1280"
					height="2084"
				/>
			</div>
			<small class="image-description">
				Original Live video tutoring (Livehjälpen) interface hosted on
				Pluggakuten.se showing upcoming video tutoring sessions.
			</small>

			<div class="image-frame">
				<img
					src="images/mattecentrum/original-raknestugor.png"
					alt="Original Mattecentrum Study centers (Räknestugor) page listing locations, reached from the sidebar navigation"
					loading="lazy"
					width="1280"
					height="2084"
				/>
			</div>
			<small class="image-description">
				Original Study centers (Räknestugor) overview page with a long
				list of locations and links to relevant information.
			</small>

			<h2>Designing for multiple audiences</h2>
			<p>
				Mattecentrum serves students, parents, teachers, principals,
				volunteers, institutional partners, and bussiness donors. Early
				in the project, these audiences were consolidated into four main
				groups: students, parents, teachers, and decision-makers.
			</p>
			<p>
				To reduce competition for attention on the start page,
				non-student content was moved to the top-level navigation. This
				allows the homepage to focus on student needs while still
				supporting all other user groups.
			</p>

			<h2>Student-first homepage structure</h2>
			<p>
				The redesigned homepage is structured around the primary student
				needs:
			</p>
			<ul>
				<li>Understanding the value proposition</li>
				<li>Accessing digital tutoring</li>
				<li>Finding local study centers</li>
				<li>Exploring educational content and resources</li>
			</ul>
			<p>
				Non-student audiences can access relevant content through the
				top-level navigation without disrupting the primary student
				flow.
			</p>

			<div class="image-frame">
				<img
					src="images/mattecentrum/new-startpage.png"
					alt="Low-fidelity wireframes showing the new Mattecentrum information architecture and content structure on the startpage"
					loading="lazy"
					width="1280"
					height="2084"
				/>
			</div>
			<small class="image-description">
				Early low fidelity prototype of the start page exploring new
				content structure and navigation hierarchy.
			</small>

			<h2>Live video tutoring integration</h2>
			<p>
				Key improvements include a date selector and clear emphasis on
				upcoming sessions to improve user engagement and ease of access.
			</p>

			<div class="image-frame">
				<img
					src="images/mattecentrum/new-livehjalpen.png"
					alt="Redesigned Mattecentrum Live video tutoring (Livehjälpen) page showing date selector, upcoming video tutoring sessions, and membership call-to-action"
					loading="lazy"
					width="1280"
					height="2084"
				/>
			</div>
			<small class="image-description">
				Updated video tutoring interface integrated into the
				Mattecentrum website, featuring a date selector and highlighted
				upcoming sessions.
			</small>

			<h2>Study centers (Räknestugor) improvements</h2>
			<p>
				The redesigned Study centers page introduces location search and
				highlighting the most recently visited center at the top of the
				list.
			</p>

			<div class="image-frame">
				<img
					src="images/mattecentrum/new-raknestugor.png"
					alt="Redesigned Study centers (Räknestugor) page with searchable location list, previously visited locations highlighted at the top of the list, and explanatory content panel"
					loading="lazy"
					width="1280"
					height="2084"
				/>
			</div>
			<small class="image-description">
				New Study centers (Räknestugor) overview layout adding location
				search, personalized recent locations, and contextual
				information about in-person tutoring.
			</small>

			<h2>Ongoing work</h2>
			<p>
				The project is ongoing, with further iterations planned based on
				usability testing and interviews with students as well as
				stakeholder feedback.
			</p>

			<div class="project-navigation">
				<a href="index.html">
					<span
						class="back-link-arrow"
						aria-hidden="true"
						><-</span
					><span class="link-text">Back home</span>
				</a>
				<a
					href="workspace.html"
					class="project-title"
				>
					<span
						class="link-text"
						style="view-transition-name: workspace"
					>
						Next project</span
					><span
						aria-hidden="true"
						focusable="false"
					>
						->
					</span>
				</a>
			</div>
		</main>
		<script src="theme.js"></script>
	</body>
</html>