-
Notifications
You must be signed in to change notification settings - Fork 0
/
curriculet.html
308 lines (265 loc) · 12.7 KB
/
curriculet.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Bowen Li is a product manager and UX designer. He recently graduated with a Master's degree in Human-Computer Interaction at Stanford University."/>
<meta name="keywords" content="bowenli, bowen, li, interaction designer, user experience, user interface, human centered design, stanford, design, interaction, interface"/>
<meta name="robots" content="NOODP"/>
<script src="https://use.typekit.net/znq2wga.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel=stylesheet href="css/style.css">
<link rel=stylesheet href="css/p.css">
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Bowen Li - Curriculet</title>
</head>
<body class="page">
<div class="header">
<div class="navigation container">
<div class="logo"><a href="/">Bowen Li</a></div>
<div class="menu"><a href="mailto:bowen[at]bowenli.com">Contact</a></div>
</div>
</div>
<section class="container">
<div class="nudge"> </div>
</section>
<section class="container">
<div class="gutter"></div>
<div class="content">
<div class="pagetitle">Curriculet Data Project</div>
<div class="tags">
<span>User Experience</span>
<span>User Research</span>
<span>Visual Design</span>
<span>Product Management</span>
</div>
</div>
</section>
<section class="container">
<div class="gutter">Introduction</div>
<div class="content">
<div class="info">
<div class="description">
<p>Curriculet is a digital reading platform that allows English teachers to teach full length books, news articles, and rich web media with curriculum embedded inside the reading. It tracks student progress and assesses student competency through the national educational standards for reading comprehension.</p>
<p>As the Head of Product and only designer, I shaped how the product works on every level. The following case study will be around Curriculet’s data & analytics functionality.</p>
<p>Designing a data product for English teachers is breaking new ground in education. The vast majority of English teachers still use tools and traditions that are hundreds of years old. My challenge as a designer was to work within this established tradition, while still providing undeniable value that helps teachers.</p>
</div>
</div>
<div class="pimage">
<img src="img/curriculet/intro_th.png" alt="">
</div>
</div>
</section>
<section class="container">
<div class="gutter">User</div>
<div class="content">
<div class="info">
<div class="description">
<p>The primary user for the data project was English teachers for middle and high school.</p>
<p>Secondary users include principals and school administrators.</p>
</div>
</div>
<div class="pimage">
</div>
</div>
</section>
<section class="container">
<div class="gutter">Research</div>
<div class="content">
<div class="info">
<div class="description">
<p>Curriculet’s customers ranged from some of the most prestigious schools in the nation to small rural schools. To build a product that would work for a wide range of teachers, I needed to understand a range of workflows, motivations, and feelings around teaching.</p>
<p>To do my initial user research, I chose two very different teachers to focus on: A 10th grade English teacher at a charter school who was very data driven, and a 9–12th grade teacher at a small religious school who was feeling overwhelmed with all the data presented every day to teachers.</p>
<p>I spent many hours on the phone and in the classroom. I talked to students, teachers, and school administrators to understand the holistic view of how our product would be used in the context of the educational system. I supplemented my deep dives with additional video calls with teachers around the country.</p>
</div>
</div>
<div class="slideshow" id="research-slideshow">
<div><img src="img/curriculet/research_09_th.png"></div>
<div><img src="img/curriculet/research_10_th.jpg"></div>
<div><img src="img/curriculet/research_08_th.png"></div>
<div><img src="img/curriculet/research-001.jpg"></div>
<div><img src="img/curriculet/research-002_th.jpg"></div>
<div><img src="img/curriculet/research-003.jpg"></div>
<div><img src="img/curriculet/research-004.jpg"></div>
<div><img src="img/curriculet/research-005.jpg"></div>
<div><img src="img/curriculet/research-006.jpg"></div>
<div><img src="img/curriculet/research_07_th.jpg"></div>
</div>
</div>
</section>
<section class="container">
<div class="gutter">Key Findings</div>
<div class="content">
<div class="title"></div>
<div class="info">
<div class="description">
<p>As I talked to teachers, I discovered that almost all teachers have a few recurring moments in the school year where data is most important. These would be the times when Curriculet's data would make the most impact, and would shape the focus of the design.</p>
<p>
Additionallly, some key themes were repeated throughout the schools that I talked to:
<ul>
<li>Teachers are increasingly expected by the school to make data-driven decisions and present quantitative reasons for assessing students.</li>
<li>Some English teachers embrace this and have set up their own systems for tracking student progress.</li>
<li>However, many English teachers find numbers to be intimidating. While they recognize the importance of data and can see that digital tools are bringing additional insight into education, they don’t feel comfortable diving into a screen full of data.</li>
</ul>
</p>
</div>
</div>
<div class="slideshow" id="sketch-slideshow">
<div><img src="img/curriculet/scans_01_th.png"></div>
<div><img src="img/curriculet/scans_02_th.png"></div>
<div><img src="img/curriculet/scans_03_th.png"></div>
<div><img src="img/curriculet/scans_04_th.png"></div>
<div><img src="img/curriculet/scans_05_th.png"></div>
<div><img src="img/curriculet/scans_06_th.png"></div>
<div><img src="img/curriculet/scans_07_th.png"></div>
<div><img src="img/curriculet/scans_08_th.png"></div>
</div>
</div>
</section>
<section class="container">
<div class="gutter">Metrics</div>
<div class="content">
<div class="info">
<div class="description">
<p>The overall goal of Curriculet was to increase reading and language arts comprehension for the students while making teacher's lives easier. All our designs and features were built to support that mission.</p>
<p>For the data project, we expected to tighten the feedback loop for teachers and students on student performance and progress. This would manifest through usage of the data pages and occasional drilldown into specific areas. Because Curriculet is not a grading system, we expected that final input of grades would happen on the school's own LMS.</p>
</div>
</div>
<div class="pimage">
</div>
</div>
</section>
<section class="container">
<div class="gutter">Designs and Iteration</div>
<div class="content">
<div class="title"></div>
<div class="info">
<div class="description">
<p>Aside from presenting the raw data that teachers need for their gradebook, I designed higher order informational screens to help teachers make decisions about their students. This included “traffic light” indicators on an individual student, as well as the breakdown of concepts taught by classroom. This allows the teacher to quickly recognize where to focus instructional material vs individual time.</p>
<p>Because the teacher is trying to keep track of over 20 Literacy Standards for every student in the classroom, across dozens of assignments - having a rolled up view is crucial to making sense of the data.</p>
</div>
</div>
<div class="slideshow" id="designs-slideshow">
<div><img src="img/curriculet/c_i_initial_01.png"></div>
<div><img src="img/curriculet/c_i_initial_02.png"></div>
<div><img src="img/curriculet/c_i_initial_03.png"></div>
<div><img src="img/curriculet/c_i_initial_04.png"></div>
<div><img src="img/curriculet/c_i_initial_05.png"></div>
<div><img src="img/curriculet/c_i_initial_06.png"></div>
</div>
</div>
</section>
<section class="container">
<div class="gutter">Information Architecture</div>
<div class="content">
<div class="info">
<div class="description">
<p>The information architecture of this product was set up around showing the appropriate data for the appropriate task. Our user wants to access the information on different time scales: weekly, monthly, and quarterly - each level representing a more engaged and comprehensive session. Weekly users must be able to quickly distill information and turn it around to use in classroom teaching, while monthly and quarterly access patterns show the need to be able to drill down deep into the data.</p>
</div>
</div>
<div class="pimage">
<img src="img/p/c_d_flow.png" alt="">
</div>
</div>
</section>
<section class="container">
<div class="gutter">Final Designs</div>
<div class="content">
<div class="info">
<div class="description">
<p>The final design incorporates all of the data Curriculet collects, broken down by individual students and by class averages:</p>
<ul>
<li>Question and quiz scores</li>
<li>Reading time</li>
<li>Words Read</li>
<li>Standards ELA Literacy: Reading Informational Text</li>
<li>Standards ELA Literacy: Reading Literature</li>
</ul>
</div>
</div>
<div class="slideshow" id="final-slideshow">
<div><img src="img/p/export/c_d_d1a.png"></div>
<div><img src="img/p/export/c_d_d1b.png"></div>
<div><img src="img/p/export/c_d_d1c.png"></div>
<div><img src="img/p/export/c_d_d2a.png"></div>
<div><img src="img/p/export/c_d_d3a.png"></div>
<div><img src="img/p/export/c_d_d4a.png"></div>
<div><img src="img/p/export/c_d_d5a.png"></div>
</div>
</div>
</section>
<section class="container">
<div class="gutter"></div>
<div class="content">
<div class="pagetitle">More Wireframes</div>
</div>
</section>
<section class="container">
<div class="gutter"></div>
<div class="content">
<div class="info">
<div class="description">
<p>The Data project was one of hundreds of features I designed at Curriculet.</p>
<p>Here is a sampling of some of the others.</p>
</div>
</div>
<div class="pimage">
<div><img src="img/curriculet/assignments-modal.png"/></div>
<div><img src="img/curriculet/curri-info-page.png"/></div>
<div><img src="img/curriculet/front-page.png"/></div>
<div><img src="img/curriculet/iPad1.png"/></div>
<div><img src="img/curriculet/iphone-screens.png"/></div>
<div><img src="img/curriculet/th-licenses.png"/></div>
<div><img src="img/curriculet/screen_reader_OE - Overlay.png"/></div>
<div><img src="img/curriculet/screen_reader_Question Quiz.png"/></div>
<div><img src="img/curriculet/screen_reader_Reader.png"/></div>
<div><img src="img/curriculet/th-wireframe-_-my-library.png"/></div>
</div>
</div>
</section>
<section class="container">
<div class="content">
<div class="title">Learn More</div>
<div class="info">
<div class="description bottomcontact">
<p>Questions? Comments? Get in touch with me.</p>
<p><a href="mailto:bowen[at]bowenli.com">Contact</a></p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">Copyright © 2018 by <a href="mailto:bowen[at]bowenli.com">Bowen Li</a></div>
</footer>
<!-- Slideshow -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
var slide_attr = {
arrows: true,
dots:true,
fade: true,
infinite: true,
accessibility: false,
centerMode: true,
autoplay: false,
autoplaySpeed: 4000
};
$("#research-slideshow").slick(slide_attr);
$("#sketch-slideshow").slick(slide_attr);
$("#designs-slideshow").slick(slide_attr);
$("#final-slideshow").slick(slide_attr);
});
</script>
<!-- GA -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-10971196-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>