-
Notifications
You must be signed in to change notification settings - Fork 0
/
groupus.html
185 lines (120 loc) · 6.46 KB
/
groupus.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Group.us - hanning's Portfolio</title>
<meta name="description" content="hanning project work">
<meta name="keywords" content="hanning portfolio">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png" />
<!--Style-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style-responsive.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--Preloader-->
<div class="preloader" id="preloader">
<div class="item">
<div class="spinner">
</div>
</div>
</div>
<!--Header-->
<header id="fullscreen">
<div class="logo" id="full"><a class="" href="index.html">H</a></div>
</header>
<div class="clear"></div>
<!--Content-->
<div class="content" id="ajax-content">
<div class="text-intro">
<h1>Group.us</h1>
<div class="one-column">
<p style="font-size: 15px;">Role: User researcher, UX Designer</br/>When: 01.2016 to 04.2016</p>
</div>
<div class="two-column">
<p>During my course “Human-Centered Product Development” at the Tampere University of Technology, my team worked together for Group.us, a system made to help student find group for assignment in their courses. Through the application, students can check all courses which needed to perform group and find group online easily, most important, they can choose to join one which is best for them. Our work is to gain user insights, and give a solution in a user-centered design process. </p>
</div>
<div class="clear"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div align="center">
<h1>Voice from students</h1>
<p style="text-align:center;width:70%;">Nowadays, students use Moodle forum or talk during course to perform group for assignment, in this way, it takes time and ineffective sometimes. To get deeper understanding, we used interview and online survey to gain more insights from students.</p>
<br/><br/><br/>
<img src="img/groupus/2o.png" width="70%"><br/><br/><br/><br/>
</div>
<div align="center">
<h1>Persona</h1>
<p style="text-align:center;width:70%;">Based on research, we built personas to understand user better, and kept them in mind during the whole process of design.</p>
<br/><br/><br/>
<img src="img/groupus/per.png" width="70%"><br/><br/><br/><br/>
</div>
<div align="center">
<h1>Brainstorming</h1>
<p style="text-align:center;width:70%;">We used brainstorming inside of the group to produce more ideas and insights, also we had it by an online tool for brainstorming.</p>
<br/><br/><br/>
<img src="img/groupus/br.png" width="60%" height="px"><br/><br/><br/><br/>
</div>
<div align="center">
<h1>Model</h1>
<p style="text-align:center;width:70%;">The overall functionality model can be seen below.</p>
<br/><br/><br/>
<img src="img/groupus/model.png" width="70%"><br/><br/><br/><br/>
</div>
<div align="center">
<h1>Wireframe</h1>
<p style="text-align:center;width:65%;">We used Balsamiq to make low fidelity mockups, as it is an effective way to make prototypes and conduct usability testing and heuristic evaluation on it.</p>
<br/><br/><br/>
<img src="img/groupus/moc.png" width="80%"><br/><br/><br/><br/>
</div>
<div align="center">
<h1>Evaluation</h1>
<p style="text-align:center;width:70%;">Lastly we invited the students in university to participate in evaluation testing. We prepared the porotypes and questionnaire. Majority testers came up with new functionalities they wanted, however, we designed in iterative way with selecting feedback carefully to avoid “scope creep”. After redesign, we got better evaluation which revealed from the customer satisfied, and questionnaire.</p>
<br/><br/>
<img src="img/groupus/ev.png" width="70%"><br/><br/><br/><br/>
</div>
<div align="center">
</div>
<div class="prev-next">
<div class="prev-button"><a class="" href="gofun.html">Gofun - Gamify team coding</a></div>
<div class="next-button"><a class="" href="dt.html">Design Thinking Workshop</a></div>
</div>
</div>
</div>
<!--Home Sidebar-->
<div id="ajax-sidebar"></div>
<!--Footer-->
<footer>
<div class="footer-margin">
<div class="social-footer">
<a href="https://www.facebook.com/profile.php?id=100004258568097">Facebook</a>
<a href="https://www.linkedin.com/in/hanning-zhao-a29160119/">LinkedIn</a>
</div>
<div class="copyright">©2017 Hanning</div>
</div>
</footer>
<!--Scripts-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/modernizr.custom.42534.js" type="text/javascript"></script>
<script src="js/jquery.waitforimages.js" type="text/javascript"></script>
<script src="js/typed.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script src="js/jquery.jkit.1.2.16.min.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script>
$('#button, #buttons').on('click', function() {
$( ".opacity-nav" ).fadeToggle( "slow", "linear" );
// Animation complete.
});
</script>
</body>
</html>