-
Notifications
You must be signed in to change notification settings - Fork 0
/
hack-the-library.html
177 lines (130 loc) · 9.16 KB
/
hack-the-library.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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Kelly Hsiao-Ching Su</title>
<meta name="generator" content="Jekyll v3.8.6" />
<meta property="og:title" content="Kelly Hsiao-Ching Su" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Kelly Hsiao-Ching Su" />
<script type="application/ld+json">
{"url":"/hack-the-library.html","headline":"Kelly Hsiao-Ching Su","@type":"WebPage","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/css/style.css?v=">
<script src="https://code.jquery.com/jquery-3.3.0.min.js" integrity="sha256-RTQy8VOmNlT6b2PIRur37p6JEBZUE7o8wPgMvu18MC4=" crossorigin="anonymous"></script>
<script src="/assets/js/main.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" integrity="sha256-3Jy/GbSLrg0o9y5Z5n1uw0qxZECH7C6OQpVBgNFYa0g=" crossorigin="anonymous"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<header class="header">
<h1>Kelly Hsiao-Ching Su</h1>
<p></p>
</header>
<div id="banner">
<!-- <a href="" class="button fork"><strong>View On GitHub</strong></a> -->
<a target="_blank" href="https://github.com/CApopsicle" id="github-logo"></a>
<a target="_blank" href="https://www.linkedin.com/in/hsiaochingsu" id="linkedin-logo"></a>
<div class="downloads">
<span>Downloads:</span>
<ul>
<li><a href="./Hsiao-Ching_Su_resume.pdf" class="button">RESUME</a></li>
<!-- <li><a href="" class="button">TAR</a></li> -->
</ul>
</div>
</div><!-- end banner -->
<div class="wrapper">
<nav>
<ul></ul>
</nav>
<section>
<a class="back-to-home" href="./">Back to Home</a>
<h2 id="hackthelibrary">HackTheLibrary</h2>
<h4 id="ntu-library-studying-area-seat-arrangement-system-reformation">NTU Library Studying Area Seat Arrangement System Reformation</h4>
<p>This project is an elegant redesign and implementation of the library’s seat arrangement system at National Taiwan University(NTU). Our interface aims to provide an intuitive way to choose seats in the studying area.</p>
<p>This Project is made and maintained by Hack Campus team, a group of NTU students who strive to change the campus by technologies.</p>
<p><img src="https://i.imgur.com/s26uxvk.png" alt="new interface" />
The new version interface</p>
<h3 id="the-early-design-research">The Early Design Research</h3>
<h3 id="the-problem">The Problem</h3>
<p>The old selecting seat system and rules of studying area is a poor design. The whole process goes like this:</p>
<p>We had an old PC displaying seat numbers like an Excel spreadsheet. The students could look at an incomplete paper map on the wall, and then, they are required to select a seat in our system and sign in by his student ID at the entrance of studying area. Once entered the studying area, he could only sit at the position he picked. If someone wishes to change his seat, he must re-select a place on the system and scan his ID again. These rules are designed to prevent students from saving seats.</p>
<p>However, many students did not follow these rules because re-selecting a seat on the system is very annoying. Moreover, if a student seats in the position that isn’t assigned to him, it will affect the next person who chooses this position. Most of the affected students would not complain, and he might end up occupy another seat that isn’t assigned to him, either. Therefore, one unruly behavior strikes like a propagation, and in the end, nobody is seating on the assigned seat.</p>
<p>To solve this problem, the Hack Campus team used the following design methods for the reformation. Visit here for a more detailed report.</p>
<p><img src="https://i.imgur.com/qaTGZAt.jpg" alt="The old system" />
The old system</p>
<h3 id="interview-and-affinity-diagram">Interview and Affinity Diagram</h3>
<p>We interviewed 6 students including light user to heavy user of the studying area, collecting their studying habits and selecting seat habits in the studying area. After the interviews, we used the Affinity Diagram to look for the patterns from our interview transcripts. We made assumptions according to the facts from the interviews:</p>
<ul>
<li>Most students use the studying area during midterms and finals.</li>
<li>When students find out that the position they chose is occupied, they tend not to seek for the administrator’s help because they don’t want to disturb others, and they do not want to waste their own studying time.</li>
<li>Students are too lazy to change seats on the system once they enter the studying area </li>
<li>There are some students care about where they sit a lot, and they tend to sit at some certain positions they like.</li>
<li>The primary disturbance in the studying area is because of people moving around for changing seats, filling their water bottle, going to restroom, etc. The secondary disturbance is about the environment: whether there are others sitting next to me, whether there is a strange person, and whether is a beautiful girl.</li>
</ul>
<h3 id="ideations-after-brainstorming">Ideations after brainstorming</h3>
<ol>
<li>Register a seat after searching an ideal seat in the studying room.</li>
<li>Read a detailed floor plan of the studying room at the entrance to assist seat-selecting before entering.</li>
</ol>
<h3 id="questionnaire">Questionnaire</h3>
<p>To verify our assumptions, we designed a questionnaire and sent it to all students in the university. We collected 758 valid questionnaires in the end.</p>
<p><img src="https://i.imgur.com/IAmSuvM.jpg" alt="The Questionnaire" />
The questionnaire</p>
<h3 id="the-facts">The Facts</h3>
<ul>
<li>
<p>47% of the user study at the studying area on only midterms and finals. (Let’s define them as light user)</p>
</li>
<li>The top 3 information users want to know from a selecting seat system are:
<ol>
<li>How many people are sitting at the same table?</li>
<li>Is this seat allowed to use computer?</li>
<li>Is this seat clean?</li>
</ol>
</li>
<li>The current system can not provide sufficient information about the seats for the users. 47% of them will not sit at the position they selected before they entered.</li>
<li>33% of the light user can not distinguish which area in the studying area is allowed to use laptop.</li>
<li>If selected a seat but it is occupied by the other, 73% of the user will not ask the other student to leave, instead, they will switch to an empty position.</li>
</ul>
<h3 id="feedbacks-onthe-ideations">Feedbacks on the ideations</h3>
<p>74% chose the first one: registering a seat after searching an ideal seat in the studying room, and 26% chose the second one: reading a detailed floor plan of the studying room at the entrance to assist seat-selecting before entering.</p>
<p><img src="https://i.imgur.com/5eWNmyV.jpg" alt="Ideation1" /></p>
<p><img src="https://i.imgur.com/OBOYsAw.jpg" alt="Ideation2" /></p>
<h3 id="our-design">Our design</h3>
<p><img src="https://i.imgur.com/85LhVPm.jpg" alt="Design1" /></p>
<p><img src="https://i.imgur.com/OjBwGRE.png" alt="Design2" />
Filters of the map: select the filters and the map will respond with the seats corresponds to the filters by changing the opacity.</p>
<p><img src="https://i.imgur.com/HloSjHE.png" alt="Design3" />
Panel for displaying last-time seat and recent seats after the a student scan his student ID card.</p>
<p><img src="https://i.imgur.com/QWNXsal.png" alt="Design4" />
The map view: (1) The map view replaces the spreadsheet-like interface, showing detailed floor plan and spatial information. (2) Use colors to represent status of the seats. Green is available, yellow is temporarily leave, and red means the seat is currently being used. (3) The SVG map enables zoom in and zoom out by the button or the scroller of the mouse.</p>
<h3 id="implementation">Implementation</h3>
<p>Built with…</p>
<ul>
<li>Angular.js 1 - web framework</li>
<li>MongoDB - database</li>
<li>Gulp, Bower - packaging, building, development tool</li>
<li>D3 - SVG interaction</li>
</ul>
<p><a href="./">Back to Home</a></p>
</section>
<footer>
<p><small>Project maintained by <a href="https://github.com/CApopsicle">CApopsicle</a></small></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://twitter.com/mattgraham">mattgraham</a></small></p>
</footer>
</div>
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'true', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>