-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstudent-orgs.html
More file actions
134 lines (124 loc) · 9.06 KB
/
student-orgs.html
File metadata and controls
134 lines (124 loc) · 9.06 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>student orgs 💛</title>
<link rel="icon" href="assets/img/cowboy.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="text-center" style="height: 400px;margin: 20px 0px ;">
<div></div>
<div>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-6">
<h5 class="text-left header" style="padding: 20px;"><a href="index.html">by: sona dolasia</a></h5>
</div>
<div class="col-sm-4">
<h5 class="text-right body" style="padding: 30px;"><span style="text-decoration: underline;"><a href="about.html">about</a></span> <span style="text-decoration: underline;"><a href="index.html">work</a></span> <span style="text-decoration: underline;"><a href="mailto:dolasia@berkeley.edu" target="_top">contact</a></span></h5>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</div>
<h1 class="text-center">💛</h1>
<h1 class="text-center">student organization platform</h1>
<h3 class="display-3 text-center header" style="margin: 10px 0px 10px;">matching students with campus organizations</h3>
<h3 class="display-3 text-center caption" style="margin: 0px 0px 20px;">s/o google design challenge</h3><img class="shadow" src="assets/img/club.gif" style="height: 350px;margin: 10px 0px;">
<div class="text-center" style="padding: 0px 0px;">
<!-- <h5 class="text-center" style="margin: 0px 0px 0px 0px;font-size: 24px;">details</h5> -->
<div class="row">
<!-- <div class="col-md-6 text-right text-sm-right text-md-right text-lg-right text-xl-right" style="padding: 0px;">
<p class="text-left body" style="margin: 0px 0px 0px 170px;font-weight: normal;padding: 10px 0px;width: 400px;"><em>overview:</em> designing a collaborative code editor based in the google drive suite for computer science education </p>
</div> -->
<div class="col-3">
<h5 class="text-right" style="margin: 50px 10px 10px 0px;font-size: 24px;">details</h5>
</div>
<div class="col-8 text-left">
<p class="body" style="margin: 50px 0px 10px 50px; font-weight: normal;padding: 0px 10px;"><em>team:</em> sona dolasia </p>
<p class="body" style="margin: 0px 50px;font-weight: normal;padding: 10px 10px;"><em>timeline:</em> one week</p>
<p class="body" style="margin: 0px 90px 0px 50px;font-weight: normal;padding: 10px 10px;"><em>deliverables:</em> user research, ideation, sketches, wireframes, usability testing, prototyping</p>
<!-- <button class="btn active btn-sm text-left text-dark border rounded-0 border-dark body" type="button" style="padding: 10px 50px;color: rgb(33,37,41);margin: 30px 0px 10px 60px;">view full case study</button> -->
</div>
</div>
<!-- </div><button class="btn active btn-sm text-left text-dark border rounded-0 border-dark body" type="button" style="padding: 10px 50px;color: rgb(33,37,41);margin: 40px 0px 0px 0px;">view full case study</button> -->
<!-- <h5 class="text-center" style="margin: 50px 0px 10px 0px;font-size: 24px;">the short story</h5>
<h6 class="text-center body" style="margin: 0px 0px 10px 0px;">a 6 minute abridged case study</h6> -->
<div class="row">
<div class="col-3">
<h5 class="text-right" style="margin: 50px 10px 10px 0px;font-size: 24px;">context</h5>
</div>
<div class="col-8">
<p class="text-left body" style="padding: 0px 10px;margin: 50px 0px 10px 50px;width: 700px;">Design an experience for new students to browse, search, and propose new student organizations. Provide your overall process, a wireframe flow, and one to two screens at higher fidelity.</p>
</div>
</div>
<div class="row">
<div class="col-3">
<h5 class="text-right header" style="margin: 50px 0px 10px 0px;">research</h5>
</div>
<div class="col-8 text-left" style="margin: 0px 0px 0px 50px;">
<div class="row" style="width: 700px;margin: 50px 0px 0px 0px">
<div class="col-md-4">
<p class="text-left subheader" style="padding: 10px 0px 0px 0px;width: 350px;">🎤 interviews</p>
<p class="text-left body" style="padding: 5px 0px 0px 0px;width: 200px;">I spoke to 6 students at calapalooza, my school’s spring club fair, which was the perfect place to learn about experiences with student orgs. </p>
</div>
<div class="col-md-4">
<p class="text-left body subheader" style="padding: 10px 0px 0px 0px;width: 350px;margin:0px;">📚 secondary research</p>
<p class="text-left body" style="padding: 5px 0px 0px 0px;width: 200px;">To get a better idea of existing student organization platforms, I began by analyzing platforms from different schools.</p>
</div>
<div class="col-md-4">
<p class="text-left body subheader" style="padding: 10px 0px 0px 0px;width: 350px;margin:0px;">📝 surveys</p>
<p class="text-left body" style="padding: 5px 0px 0px 0px;width: 200px;">I sent out an online survey and gathered 13 responses regarding different student’s experiences with finding and getting involved with student organizations.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class="header" style="margin: 50px 0px 10px 0px;">low fidelity</h5>
</div>
<div class="col-8 text-left"><img src="assets/img/clubs-lo.png" style="width: 400px;margin: 50px 0px 10px 50px;"><p class="body" style="margin: 20px 0px 10px 60px;">initial sketches of the product</p></div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class="header" style="margin: 50px 0px 10px 0px;">mid fidelity</h5>
</div>
<div class="col-9 text-left">
<div class="row" style="width: 700px;">
<img class="shadow" src="assets/img/clubs-mid-1.png" style="width: 600px;margin: 50px 0px 10px 70px;">
</div>
</div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class="header" style="margin: 50px 0px 10px 0px;">high fidelity</h5>
</div>
<div class="col-9 text-left">
<img class="shadow" src="assets/img/clubs-hi-1.png" style="width: 700px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;font-weight: 600;">homepage</p><p class="body" style="margin: 10px 0px 10px 60px;width:700px">Has all of the organizations with a picture, short blurb and up to three tags describing it. The search bar would open up in a column on the right with tags that you can filter by. </p>
<img class="shadow" src="assets/img/clubs-hi-2.png" style="width: 700px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;font-weight: 600;">organization page</p><p class="body" style="margin: 10px 0px 10px 60px;width:700px">Contains its own four subpages with information about the organization itself, how to join, upcoming events, and a list of the current members. </p>
<img class="shadow" src="assets/img/clubs-hi-3.png" style="width: 700px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;font-weight: 600;">join page</p><p class="body" style="margin: 10px 0px 10px 60px;width:700px">Contains all of the recruitment information, with an application link, timeline, and a header graphic.</p>
<img class="shadow" src="assets/img/clubs-hi-4.png" style="width: 700px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;font-weight: 600;">club events page</p><p class="body" style="margin: 10px 0px 10px 60px;width:700px">Contains all past and upcoming events by the organization.</p>
<img class="shadow" src="assets/img/clubs-hi-5.png" style="width: 700px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;font-weight: 600;">events page</p><p class="body" style="margin: 10px 0px 10px 60px;width:700px">Contains all the upcoming events from all organizations. If you click on search, the right column bar will open allowing you to filter by tag and interest.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col" style="margin: 100px 0px 30px 0px;">
<h5 class="display-4 text-left header" style="padding: 20px;">© sona dolasia, 2019</h5>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>