-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathattendance.html
333 lines (248 loc) · 16.9 KB
/
attendance.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nitesh Kumar's Portfolio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link href="css/base.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="name"><a href="index.html">Nitesh Kumar</a></div>
<ul class="nav">
<a href="mailto:hello@niteshk.com"><li>Email</li></a>
<a href="http://www.niteshk.com/Nitesh_Kumar_resume.pdf" target="blank"><li>Resume</li></a>
<a href="about"><li>About</li></a>
<a href="index"><li>Work</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="project-name">Design Exercise: Names and Faces</div>
<div class="project-desc">
This task was given to me by Google to assess my skills while interviewing for interaction designer role. I was given three tasks to choose from.
I chose this one because the problem was very open and interesting.
</div>
</div>
</div>
</div>
<div class="ff-jb">
<img class="banner" src="images/banners/ea-banner.png">
</div>
<div class="story">
<div class="container">
<div class="row">
<div class="heading col-md-8 col-md-offset-2">Problem Statement</div>
<p class="text col-md-8 col-md-offset-2">
At the beginning of each new semester or school year, teachers are faced with the challenge of remembering names for a large number of new students. Design an experience to help an educator match faces to names, with the goal of shortening the time needed to reach complete un-aided accuracy.
</p>
<div class="heading col-md-8 col-md-offset-2">Understanding the problem</div>
<p class="text col-md-8 col-md-offset-2">
Having been a college student myself, I have personally seen professors face this problem. In a class of about 60 or more students, it’s difficult for professors to remember the name and face of each and every student. This gives rise to problems like false attendance (proxy) and makes the whole experience of teaching non-personal.
</p>
<div class="heading col-md-8 col-md-offset-2">Initial approach and research</div>
<p class="text col-md-8 col-md-offset-2">
We know that one of the best ways to remember something is to do (or see) it over and over. I started by reading a few <a href = "http://cgi.stanford.edu/~dept-ctl/tomprof/posting.php?ID=752" target = "blank">articles</a>, trying to figure out potential ways (analog and digital) to form a habit or remember things.
</p>
<p class="text col-md-8 col-md-offset-2">I found that that it's easier to remember things if - </p>
<ol class="text col-md-8 col-md-offset-2">
<li>You can attach visual cues to the subject (like color or images).</li>
<li>You can break the group of subjects (here, students) into smaller groups.</li>
<li>You can fix the position of the subject and try to remember the subject by it's position.</li>
</ol>
<div class="heading col-md-8 col-md-offset-2">Who was I designing for?</div>
<p class="text col-md-8 col-md-offset-2">
I was designing for the scenario of a college in India. I limited my users to college students and professors.
</p>
<div class="heading col-md-8 col-md-offset-2">Potential Solutions</div>
<p class="text col-md-8 col-md-offset-2">
I jotted down different potential solutions and listed the characteristics of interactions between the professors and students
</p>
<div class="col-md-8 col-md-offset-2">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/ea1.png"><img class="story-img img-gallery-item" src="images/attendance/ea1.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Proposed Solutions</div>
<p class="text col-md-8 col-md-offset-2">
I decided to proceed in the direction of a digital application for taking attendance that makes the process more visual, aiding the memorization process.
</p>
<p class="text col-md-8 col-md-offset-2">
Let's call it E-Attendance.
</p>
<div class="col-md-8 col-md-offset-2">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/ea2.png"><img class="story-img img-gallery-item no-border" src="images/attendance/ea2.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">I chose to head in this direction for the following reasons:</div>
<ol class="text col-md-8 col-md-offset-2">
<li>Taking attendance happens regularly (if not everyday). It’s repetitive.</li>
<li>It Includes personal interaction between students and professors.</li>
<li>Professors and students do not need to find time to do it. It fits in their routine.</li>
<li>It consists matching of names with faces.</li>
</ol>
<div class="heading col-md-8 col-md-offset-2">Understanding the user</div>
<p class="text col-md-8 col-md-offset-2">
The next task was to figure out who exactly I was designing for. I needed to create users and give them characteristics to better understand why and how they would be using the product. I created personas of 4 users, 1 professor and 3 students. This helped me decide path on which to take the product and make sure I’m solving the exact problems that they are facing.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/personatable.png"><img class="story-img img-gallery-item no-border" src="images/attendance/personatable.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">How understanding the user altered my direction</div>
<p class="text col-md-8 col-md-offset-2">
Initially, I was thinking in the direction of creating an app for touchscreen devices. But after understanding the different kinds of users, I understood that not all professors will be comfortable with using a tablet everyday and I cannot ignore the students that do not have smartphones.
</p>
<p class="text col-md-8 col-md-offset-2">
Also, students may not open to sharing their smartphones with other students. Thus I decided to create a web-app, students will have to use only once a semester.
</p>
<div class="heading col-md-8 col-md-offset-2">Assumptions</div>
<p class="text col-md-8 col-md-offset-2">
I made the following assumptions —
</p>
<ol class="text col-md-8 col-md-offset-2">
<li>The solution will be implemented throughout the college by the college authorities. This will change the process of taking attendance.</li>
<li>Attendance is taken regularly in the college.</li>
<li>Professors may not be familiar or comfortable with touchscreen devices.</li>
<li>There is a working computer in every classroom or professors can use their laptops.</li>
<li>TThe college has good connectivity.</li>
<li>All the users know how to use a computer.</li>
</ol>
<div class="heading col-md-8 col-md-offset-2">Questions and constraints</div>
<p class="text col-md-8 col-md-offset-2">
To test if such a solution can actually be implemented in a college and to test how bullet-proof it is, I asked myself a bunch of questions while designing it, such as -
</p>
<div class="col-md-4 col-md-offset-2 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/ea3.png"><img class="story-img" src="images/attendance/ea3.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/ea4.png"><img class="story-img" src="images/attendance/ea4.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Brainstorming how it would work</div>
<p class="text col-md-8 col-md-offset-2">
Every student and professor will have an account on E-Attendance that they can log into by using their institute email ID.
</p>
<div class="heading col-md-8 col-md-offset-2">Student Flow</div>
<p class="text col-md-8 col-md-offset-2">
At the beginning of every semester, the students will register themselves for the courses. They will do it by uploading their picture by only capturing it at that moment with a webcam (so that it’s the most recent picture).
</p>
<div class="col-md-8 col-md-offset-2">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/studentflow.png"><img class="story-img img-gallery-item no-border small-img" src="images/attendance/studentflow.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Wireframes</div>
<p class="text col-md-8 col-md-offset-2">
I decided that simplicity is paramount for this project as it is going to be used by a wide variety of users. There should be little or no learning curve and everything must be obvious.
</p>
<p class="text col-md-8 col-md-offset-2">
I took the low fidelity sketches to the wireframe stage —
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/eawf.png"><img class="story-img img-gallery-item no-border" src="images/attendance/eawf.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Final Result</div>
<p class="text col-md-8 col-md-offset-2">
I then designed the UI mockups and prototyped them with framerjs. I kept the look rather simple and used only one color for all links and buttons.
</p>
<div class="mini-heading col-md-8 col-md-offset-2">Student view</div>
<div class="col-md-6 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/s1.png"><img class="story-img" src="images/attendance/s1.png"></a>
</div>
<div class="col-md-6 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/s2.png"><img class="story-img" src="images/attendance/s2.png"></a>
</div>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/s3.png"><img class="story-img" src="images/attendance/s3.png"></a>
</div>
<div class="mini-heading col-md-8 col-md-offset-2">Prototype version of student view</div>
<p class="text col-md-8 col-md-offset-2">
Here is the prototype video of the student’s view (private youtube video).
</p>
<div class = "video-container col-md-12">
<iframe src="https://www.youtube.com/embed/3VgpDbkwhxc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="mini-heading col-md-8 col-md-offset-2">Professor view</div>
<div class="col-md-6 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/p1.png"><img class="story-img" src="images/attendance/p1.png"></a>
</div>
<div class="col-md-6 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/p2.png"><img class="story-img" src="images/attendance/p2.png"></a>
</div>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/attendance/p3.png"><img class="story-img" src="images/attendance/p3.png"></a>
</div>
<div class="mini-heading col-md-8 col-md-offset-2">Prototype version of professor view</div>
<p class="text col-md-8 col-md-offset-2">
I prototyped the experience to demonstrate the flow and minute interactions. I demonstrated how the professors will actually take attendance. The “present” and “absent” buttons are green and red respectively and give the user visual cues.
</p>
<p class="text col-md-8 col-md-offset-2">
Also, when you click either of the buttons, their is prompt feedback (that waits for 2 seconds) with an option to undo your action.
</p>
<p class="text col-md-8 col-md-offset-2">
Here is the prototype video for the professor’s view (private youtube video).
</p>
<div class = "video-container col-md-12">
<iframe src="https://www.youtube.com/embed/TUVXS5pteak?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="heading col-md-8 col-md-offset-2">Conclusion</div>
<p class="text col-md-8 col-md-offset-2">
I designed an attendance web-app for colleges while taking into account the different types of users, constraints, assumptions and many “whys and hows”.
</p>
<p class="text col-md-8 col-md-offset-2">
It makes use of visual matching of the photo and the name with the corresponding student. This process will happen regularly throughout the semester and will help the professor remember the faces and names of the students in much less time.
</p>
<p class="text col-md-8 col-md-offset-2">
It was a great learning experience. There are a lot of things to consider when designing new experiences. I always question my approach and critique my own work so that I design something useful, easy to use and delightful.
</p>
<p class="text col-md-8 col-md-offset-2">
Thank you for reading.
</p>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="project-nav">
<a href="index" class="home-link">HOME</a>
<a href="framerjs" class="proj-nav-btn next"><span class="next-text">NEXT</span><i class="fa fa-long-arrow-right"></i></a>
<a href="metroapp" class="proj-nav-btn prev"><i class="fa fa-long-arrow-left"></i><span class="prev-text">PREVIOUS</span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 footer">
<div class = "social">
<a href="https://twitter.com/thatnitesh" target="blank">Twitter</a>
<span class="social-sep">-</span>
<a href="https://medium.com/@thatnitesh" target="blank">Medium</a>
<span class="social-sep">-</span>
<a href="https://www.instagram.com/thatnitesh/" target="blank">Instagram</a>
<span class="social-sep">-</span>
<a href="https://in.linkedin.com/in/nitesh-kumar-86631925" target="blank">LinkedIn</a>
<span class="social-sep">-</span>
<a href="mailto:hello@niteshk.com" target="blank">Email</a>
<br><br>
© 2017
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bottstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js "></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="fancybox/lib/fancybox-load.js"></script>
</body>
</html>