-
Notifications
You must be signed in to change notification settings - Fork 0
/
UX_IQS.html
206 lines (203 loc) · 14.4 KB
/
UX_IQS.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,500,600,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=EB+Garamond:400,600">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="assets/css/Navbar.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body id="page-top">
<section id="ad-challenge" style="padding-bottom: 120px;">
<picture><img src="assets/img/IQS_Index.jpg" style="width: 100%;padding: 0;"></picture>
<div class="container my-auto text-center" style="padding-top: 0px;max-width: 900px;">
<div class="row" style="margin-bottom: 50px;">
<div class="col">
<h5 style="margin-top: 100px;">PROCUCT & SOLUTION</h5>
<h2 class="text-left mb-1">Design and Evaluation of a <span>COVID-19 Literature Search Engine</span> that Supports <span>Collaborative Information Seeking</span> </h2>
</div>
</div>
<div class="row">
<div class="col">
<h5>TOPIC<br></h5>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;margin-top: 20px;">+ Information Science</p>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;">+ Online Teamwork</p>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;">In a design perspective</p>
<div style="height: 40px;"></div>
<h5>MY ROLE<br></h5>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;margin-top: 20px;">+ Researcher</p>
</div>
<div class="col">
<h5>METHOD<br></h5>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;margin-top: 20px;">+ <span style="font-weight: bold;">Research Method:</span> Prototyping, semi-structured interview, survey, SUS scale, heuristic evaluation, usability test (convenience sampling)</p>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;">+ <span style="font-weight: bold;">Data Analysis Method:</span> Qualitative coding (open coding - focused coding - thematic coding), statistical calculation (mean & standard deviation), affinity grouping</p>
</div>
<div class="col">
<h5>TOOL<br></h5>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;margin-top: 20px;">+ <span style="font-weight: bold;">Data Collection Tool:</span> Google Form, WebEx audio and screen recording, Miro</p>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;">+ <span style="font-weight: bold;">Data Analysis Tool:</span> NVivo, Excel, Qcamap.org</p>
<div style="height: 40px;"></div>
<h5>Final outcome<br></h5>
<p style="text-align: left;margin-bottom: 0px;font-size: 14px;margin-top: 20px;">Please view the site with a <a href="https://www.uc.edu/about/ucit/services/connectivity-fac-staff/vpn.html">UC VPN</a>. Though I'll also show the images here. Continuously updated: <a href="http://10.23.10.219:8080/">http://10.23.10.219:8080/<br></a></p>
</div>
</div>
</div>
</section>
<section id="about" class="content-section bg-light">
<div class="container text-center" style="max-width: 900px;">
<div class="row">
<div class="col">
<h5>Introduction of the topic and domain | Literature review</h5>
<h2 class="text-left mb-1">Collaborative Information Seeking (CIS) can help clinical/medical research teams</h2>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col">
<picture><img src="assets/img/IQS_Previous%20Studies.png" style="width: 100%;"></picture>
</div>
</div>
<div style="height: 40px;"></div>
<div class="row" style="margin-top: 30px;">
<div class="col">
<p class="text-left"><span>Expected Outcome :</span> Information Query System (IQS) interaction and user interface design.</p>
<p class="text-left"><span>Research Method :</span> User study that learn the big picture of online teamwork, instead of the traditional calculation of algorithm efficiency.</p>
</div>
</div>
</div>
</section>
<section id="about" class="content-section bg-light">
<div class="container text-center" style="max-width: 900px;">
<div class="row">
<div class="col">
<h5>Research question</h5>
<h2 class="text-left mb-1">How might a <span>user interface design</span> for the literature collection and review task bridge <span>perceptual gaps</span> between clinical/medical research team members?</h2>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col">
<p class="text-left"><span>Q1: How can CIS complement the interaction and user interface design to assist bridging the perceptual gap between team members?</span></p>
<p class="text-left">Q1-1: What is the literature collection and review process like in a clinical/medical team?<br>Q1-2: How to understand the roles in the clinical/medical literature collection and review?<br>Q1-3: How to improve innovation efficiency by providing awareness?<br></p>
<p class="text-left"><span>Q2: How might we improve the proposed prototype system?</span></p>
<p class="text-left">Q2-1: What are the usability issues?<br>Q2-2: How might we fix them?<br></p>
</div>
</div>
</div>
</section>
<section id="about-1" class="content-section bg-light">
<div class="container text-center" style="max-width: 900px;">
<div class="row">
<div class="col">
<h5>method</h5>
<h2 class="text-left mb-1"><span>An Iterative Process:</span> Prototyping - Evaluation</h2>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-lg-12">
<picture><img src="assets/img/IQS_Method.png" style="width: 100%;"></picture>
</div>
</div>
<div style="height: 40px;"></div>
<div class="row" style="margin-top: 30px;">
<div class="col">
<p class="text-left"><span>Data Collection</span></p>
<picture><img src="assets/img/IQS_MethodData.png" style="width: 100%;"></picture>
</div>
</div>
</div>
</section>
<section id="about-3" class="content-section bg-light" style="box-shadow: 0px 0px;">
<div class="container text-center" style="max-width: 900px;">
<div class="row">
<div class="col">
<h5>Design: prototype 0</h5>
<h2 class="text-left mb-1">The Best Guess of A Search Engine Infrastructure</h2>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-lg-12">
<p class="text-left"><span>Design : </span><em>BootStrap Studio: HTML framework + CSS</em></p><img src="assets/img/IQS_P0.jpg" style="width: 100%;">
<p class="text-left">Please view the detail of the <a href="#">flow map that on the right side</a> in another link, which describe in more of a design perspective.</p>
<div style="height: 40px;"></div>
<p class="text-left"><span>Implementation : </span><em>Clickable with back-end algorithm </em></p><img src="assets/img/IQS_P0I.png" style="width: 100%;">
</div>
</div>
</div>
</section>
<section id="about-4" class="content-section bg-light">
<div class="container text-center" style="max-width: 900px;">
<div class="row">
<div class="col">
<h5>evaluation: prototype 0</h5>
<h2 class="text-left mb-1"><span>Heuristic Evaluation</span>: To Fix Minor Usability Issues</h2>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-lg-12">
<p class="text-left">To prevent the participants from focusing on less important issues in the following lab evaluation, I decided to have a heuristic evaluation to <span>the implemented prototype 0</span> which contains back-end algorithm.</p>
<div style="height: 40px;"></div>
<p class="text-left"><span>The key findings are:</span></p>
<ul>
<li>The gap between the design deliverable and the front-end implementation.</li>
<li>Pure technical issues. </li>
<li>Neglecting general human reactions. </li>
<li>Less consideration of using scenarios. </li>
<li>Dilemma of introducing specialty of the IQS.</li>
</ul>
<div style="height: 40px;"></div>
</div>
</div>
</div>
</section>
<section id="about-2" class="content-section bg-light">
<div class="container text-center" style="max-width: 900px;">
<div class="row">
<div class="col">
<h5>Reflect</h5>
<h2 class="text-left mb-1">How might I <span><strong>Do Better</strong></span>?</h2>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col">
<p class="text-left"><span>· Persona</span></p>
<p class="text-left">The personas above are only approximations that are close to real users as possible, but they are still my best guesses due to resource and time constraints.</p>
<p class="text-left">If I have colleagues working on market research and data science, I'd like to communicate with them and work together to build <span>a more accurate set of personas</span>. In this way, the persona will <span>reflect more authentic information generated by users</span>, and will help our design hit the business target that exactly from the real world. The steps would be:</p>
<ul>
<li><span>Market opportunity:</span> Identify an unsaturated market that our company could handle. Get a blurry sense of the product we are going to design by setting up a general user pool with a distinct business target.</li>
<li><span>Competitive products:</span> What are the services and needs they already cover?</li>
<li><span>Collect data from real users:</span> Recruit participants <span>based on the description of the general user pool</span>. Collect user's demographic information, behavioral facts, and information on consumption. The research method can be: interview, focus group, cultural prob, and questionnaire.</li>
<li><span>Data analysis:</span> 1) Indicate key variables to describe users according to business objectives and set typical user characteristics as metrics for each variable. 2) Count all participants into the metric to mark how many users have each characteristics. 3) Line up characteristics to generate persona by category (extreme persona & general persona, could be more than one).</li>
<li><span>Presentation:</span> Write down values and core needs by user category, we can also include other information to enrich the user image.</li>
<li><span>Validation:</span> Find out actual users who match the values and core needs of each type of persona and ask them what they think about our result. The method can be interview and focus group.</li>
</ul><img>
</div>
</div>
</div>
</section>
<div class="footer-dark" style="padding: 25px 0px;background-color: #212529;">
<footer>
<div class="container">
<div class="row">
<div class="col">
<p class="copyright" style="padding-top: 0;opacity: 0.50;">© Fangyu Zhou 2020 Selection</p>
<p class="copyright" style="padding-top: 0;opacity: 0.50;"><small>Made with </small><a class="text-white" href="#">Bootstrap Studio</a><small> & </small><a class="text-white" href="#">GitHub Pages</a></p>
<p class="copyright" style="padding-top: 0;opacity: 0.50;">Originally shared the tool set I used to make this portfolio on <a class="text-white" href="https://www.1point3acres.com/bbs/forum.php?mod=viewthread&tid=655401&page=1#pid12509928" target="_blank">1Point3Acres</a><br></p>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="assets/js/stylish-portfolio.js"></script>
</body>
</html>