-
Notifications
You must be signed in to change notification settings - Fork 1
/
we-intervene-project.html
393 lines (393 loc) · 15.2 KB
/
we-intervene-project.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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>We Intervene Project</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta
name="description"
content="Explore Steven Liu's work as a digital designer, specializing in UX/UI design and project management. Dive into the We Intervene project, an education-tech startup empowering student support staff with data-driven decisions for enhanced student success. Discover Steven's skills in user research, prototyping, and visual design, aimed at creating a parent login portal for streamlined resource management and effective communication in the education sector." />
<meta
name="keywords"
content="Steven Liu, digital designer, UX design, UX/UI design, product design, user experience, innovative projects, user research, prototyping, visual design, proof-of-concept, user flows, information architecture, personas, affinity maps, education-tech, student success, parent portal, resource management, communication, C&C analysis, competitive analysis, comparative analysis, A/B testing, project management" />
<meta name="author" content="Steven Liu" />
<link rel="canonical" href="https://www.stevenliudesign.com/index.html" />
<link rel="stylesheet" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="nav flex">
<div class="container">
<a href="index.html" class="logo">Steven Liu Design</a>
<div class="nav-menu desktop">
<ul>
<li><a href="index.html">HOME</a></li>
<li>
<a href="mailto:[email protected]?subject=Portfolio%20Mail"
>CONTACT</a
>
</li>
<li>
<a
href="https://www.dropbox.com/scl/fi/5t53ycs0imfh98oe4ukv4/Steven-Liu-Resume.pdf?rlkey=lcgvawp9u4vxpsjikkdm8eqjx&dl=0"
target="_blank"
rel="noopener noreferrer"
>RESUME</a
>
</li>
</ul>
</div>
<div class="toggle mobile">
<span class="top"></span>
<span class="mid"></span>
<span class="bot"></span>
</div>
<div class="nav-overlay">
<ul>
<li><a href="index.html">HOME</a></li>
<li>
<a href="mailto:[email protected]?subject=Portfolio%20Mail"
>CONTACT</a
>
</li>
<li>
<a
href="https://www.dropbox.com/scl/fi/5t53ycs0imfh98oe4ukv4/Steven-Liu-Resume.pdf?rlkey=lcgvawp9u4vxpsjikkdm8eqjx&dl=0"
target="_blank"
rel="noopener noreferrer"
>RESUME</a
>
</li>
</ul>
</div>
</div>
</div>
<div class="banner hidden">
<img
src="image/we_intervene_banner.jpg"
alt="Library - Banner"
loading="lazy" />
</div>
<div class="intro">
<div class="container">
<div class="overview">
<div class="split">
<div class="section">
<h4 class="hidden">CLIENT</h4>
<p class="hidden">We Intervene</p>
</div>
<div class="section">
<h4 class="hidden">MY ROLE</h4>
<ul>
<li class="hidden">UX/UI Designer</li>
</ul>
</div>
</div>
<div class="section">
<h4 class="hidden">SUMMARY</h4>
<h2 class="hidden">
<span class="highlight">We Intervene</span>, an education-tech
startup, empowers student support staff with data-driven
decisions, enhancing student success.
</h2>
</div>
</div>
<div class="project-image hidden">
<img
src="image/we_intervene_hero.jpg"
alt="We Intervene - Mockup"
loading="lazy" />
</div>
<div class="brief">
<div class="header hidden">
<h4>THE BRIEF</h4>
<div class="divider"></div>
</div>
<div class="split">
<div class="section">
<h2 class="hidden">BUSINESS GOALS</h2>
<p class="hidden">
Create a <span class="highlight">parent login portal</span> to
streamline resource management, facilitate effective
<span class="highlight">communication</span>, and provide a
centralized platform for parents to oversee their students'
performance.
</p>
</div>
<div class="section">
<h2 class="hidden">PROBLEM</h2>
<p class="hidden">
Parents face challenges in effectively navigating and filtering
through school-related resources, worsened by
<span class="highlight">cognitive overload</span> due to the
sheer volume of information. This struggle is intensified by
their demanding schedules, juggling work and parenting
commitments.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="research">
<div class="container">
<div class="header hidden">
<h4>RESEARCH PROCESS</h4>
<div class="divider"></div>
</div>
<div class="section">
<h2 class="hidden">METHODS USED</h2>
<ul>
<li class="hidden">User Interviews</li>
<li class="hidden">User Flow</li>
<li class="hidden">C&C Analysis</li>
<li class="hidden">Information Architecture</li>
<li class="hidden">A/B Testing</li>
<li class="hidden">Prototype Testing</li>
</ul>
<p class="hidden">
I interviewed staff and parents at a partnered school to understand
their typical process of parent communication. Additionally, a
comprehensive
<span class="highlight">Competitive and Comparative analysis</span>
was done to identify market gaps and opportunities.
</p>
</div>
<div class="section">
<h2 class="hidden">C&C ANALYSIS</h2>
<div class="c-n-c">
<img
src="image/we_intervene_C&C_asset1.jpg"
alt="Competitor - School Messenger"
class="hidden"
loading="lazy" />
<img
src="image/we_intervene_C&C_asset2.jpg"
alt="Competitor - Pupil Path"
class="hidden"
loading="lazy" />
<img
src="image/we_intervene_C&C_asset3.jpg"
alt="Competitor - Panorama Education"
class="hidden" />
<img
src="image/we_intervene_C&C_asset4.jpg"
alt="Competitor - Class Dojo"
class="hidden"
loading="lazy" />
<img
src="image/we_intervene_C&C_asset5.jpg"
alt="Competitor - Naviance"
class="hidden"
loading="lazy" />
<img
src="image/we_intervene_C&C_asset6.jpg"
alt="Competitor - PowerSchool (Previously Kinvolved)"
class="hidden"
loading="lazy" />
</div>
<p class="hidden">
After examining six competitors within the educational technology
space, most of them lacked dedicated
<span class="highlight">parent dashboards</span> and comprehensive
<span class="highlight">extracurricular program resources</span>.
</p>
</div>
</div>
<div class="container hidden">
<h2>USER FLOW</h2>
</div>
<div class="img-container">
<img
src="image/we_intervene_user_flow.png"
alt="User Flow - Finding a college resource"
class="zoomable hidden"
loading="lazy" />
</div>
<div class="container mobile hidden">
<img
src="image/we_intervene_animated_asset2.gif"
alt="We Intervene - Finding a college resource on Mobile"
loading="lazy" />
</div>
<div class="container desktop hidden">
<img
src="image/we_intervene_animated_asset1.gif"
alt="We Intervene - Finding a college resource on Desktop"
loading="lazy" />
</div>
<div class="container">
<div class="section focus">
<h2 class="hidden">KEY FOCUS AREAS</h2>
<ul>
<li class="hidden">
How do parents currently search for and access school-related
resources for their students?
</li>
<li class="hidden">
What difficulties do parents encounter while navigating between
different student support software?
</li>
<li class="hidden">
How do parents currently manage their time between work, parenting
commitments, and supporting their students’ success?
</li>
</ul>
</div>
</div>
</div>
<div class="needs">
<div class="container">
<div class="header hidden">
<h4>USER NEEDS</h4>
<div class="divider"></div>
</div>
<div class="split">
<div class="section">
<h2 class="hidden">FILTERING</h2>
<p class="hidden">
The primary challenge for parents is the abundance of resources,
many of which are irrelevant to their specific student’s needs.
They need a way to sift through the information overload and find
relevant resources.
</p>
</div>
<div class="section">
<h2 class="hidden">CALENDAR SYNC</h2>
<p class="hidden">
Parents raised concerns about the difficulty of navigating their
busy schedules, indicating a need for a more streamlined approach
to receive reminders for their student’s events. Many parents
would benefit from their student’s events syncing with their
calendars.
</p>
</div>
<div class="section">
<h2 class="hidden">MOBILE FRIENDLY</h2>
<p class="hidden">
Many parents voiced that they typically review their
communications while on the move, resorting to their computers
only when they know what they need to do. They want a
user-friendly mobile experience, with the flexibility of desktop
functionality when needed.
</p>
</div>
<div class="section">
<h2 class="hidden">LEARNING CURVE</h2>
<p class="hidden">
Parents, already overwhelmed with information, find it challenging
to learn a new platform solely for supporting their students. A
straightforward user onboarding process would greatly aid their
adaptation, minimizing the learning curve required.
</p>
</div>
</div>
<div class="prototype">
<div class="desktop-center">
<div>
<img
src="image/we_intervene_animated_asset3.gif"
alt="We Intervene - Desktop User Onboarding"
loading="lazy"
class="hidden" />
<p class="hidden">User onboarding</p>
</div>
</div>
<div class="img-row">
<div>
<img
src="image/we_intervene_animated_asset4.gif"
alt="We Intervene - Mobile User Onboarding"
loading="lazy"
class="hidden" />
<p class="hidden">Mobile onboarding</p>
</div>
<div>
<img
src="image/we_intervene_animated_asset5.gif"
alt="We Intervene - Mobile Resources"
loading="lazy"
class="hidden" />
<p class="hidden">Resources</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom -->
<div class="work">
<div class="container">
<div class="header hidden">
<div class="header-row">
<h4>PREVIOUS</h4>
<h4>UP NEXT</h4>
</div>
<div class="divider"></div>
</div>
<div class="card-container">
<div class="project-card">
<a href="for-goodness-cakes-project.html">
<img
src="image/for_goodness_cakes_project_card.jpg"
alt="For Goodness Cakes Project"
class="project-image hidden"
loading="lazy" />
</a>
<p class="project-title hidden">Custom Bakery Landing Page</p>
<p class="project-type hidden">Mobile - Website</p>
</div>
<div class="project-card">
<a href="loreal-project.html">
<img
src="image/loreal_project_card.jpg"
alt="L'Oreal Project"
class="project-image hidden"
loading="lazy" />
</a>
<p class="project-title hidden">
AI-Enabled Product Recommendation App
</p>
<p class="project-type hidden">Tablet</p>
</div>
</div>
</div>
</div>
<div class="jump-top flex">
<span class="triangle"></span>
</div>
<div class="footer">
<div class="container">
<div class="divider"></div>
<div class="section">
<p class="hidden">© STEVEN LIU DESIGN</p>
<div class="links">
<a
href="mailto:[email protected]?subject=Portfolio%20Mail"
class="hidden"
>EMAIL</a
>
<a href="https://www.linkedin.com/in/steven-v-liu/"
target="_blank"
rel="noopener noreferrer"
class="hidden"
>LINKEDIN</a
>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script defer src="js/scroll.js"></script>
<script defer src="js/nav.js"></script>
<script defer src="js/matchHeight.js"></script>
<script defer src="js/top.js"></script>
<script defer src="js/topMargin.js"></script>
<script defer src="js/zoom.js"></script>
</body>
</html>