-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstudent_organizations.html
190 lines (171 loc) · 11.7 KB
/
student_organizations.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>sona dolasia</title>
<link rel="icon" href="assets/img/logo.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- <link rel="stylesheet" href="assets/css/Transparent-Overlay-On-Image-On-Hover.css"> -->
<link rel="stylesheet" href="assets/webfontkit/stylesheet.css">
</head>
<body class="text-center" style="background:#FBEC9E;">
<div class="container">
<div class="row" style="padding: 100px 0px 0px 0px;">
<div class="col-sm-6">
<h1 class="text-left" style="font-size: 18px; color: #333333; font-weight: 100; font-family: 'apercu-boldbold';margin: 0px;"><a href="work.html">view work</a></h1>
</div>
<div class="col-sm-6">
<h1 class="text-right" style="font-size: 18px; color: #333333; font-weight: 100; font-family: 'apercu-boldbold';margin: 0px;"><a href="about.html">learn more</a></h1>
</div>
</div>
</div>
<h2 class="display-1" style="font-size: 100px;font-style: normal;margin-top: 100px"></h2>
<div class="container">
<div class="row" style="padding: 0px 0px 100px 0px;">
<div class="col-sm-6 text-left">
<p style="font-size: 36px; font-family: 'apercu-boldbold';">Student Organization Platform</p>
<p style="margin: 10px 0px 10px; font-family: 'aperculight'; font-size: 18px;">Matching students with campus organizations</p>
<div style="font-family: 'aperculight';font-size: 15px; margin: 50px 0px 10px;">
<p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Team:</a> Sona Dolasia </p>
<p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Timeline:</a> One week</p>
<p><a style="font-family: 'apercu-boldbold';">Deliverables:</a> Figma Prototypes, User Research Report</p>
</div>
</div>
<div class="col-sm-6 text-right">
<img class="shadow" src="assets/img/club.gif" style="height: 300px;margin: 0px 0px;">
</div>
</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="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="font-size: 24px;font-family: 'apercu-boldbold';">context</p>
</div>
<div class="col-sm-9 text-left" style="margin: 10px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<p >The prompt for Google's 2019 design challenge was: 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>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">research</p>
</div>
<div class="col-sm-9 text-left" style="margin: 40px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<!-- <p>We set out with two questions to focus our research:</p>
<ol style="padding: 0px 60px;">
<li style="padding: 0px;">How can we increase conversions and reduce the abandoned cart rate?</li>
<li style="padding: 5px 0px 0px 0px;">How can we improve the class registration process as a whole?</li>
</ol> -->
<p style="padding: 10px 0px 0px 0px;">I conducted three different research methods to motivate my designs:</p>
<div class="row" style="margin: 0px; padding:0px;">
<div class="col-md-6" style="margin: 0px; padding:0px 20px 0px 0px;">
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Interviews</p>
<p>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>
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Surveys</p>
<p >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 class="col-md-6" style="margin: 0px; padding:0px 20px 0px 0px;">
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Secondary Research</p>
<p>To get a better idea of existing student organization platforms, I began by analyzing platforms from different schools.</p>
</div>
</div>
</div>
</div>
</div>
<!-- INSIGHTS -->
<!-- <div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">insights</p>
</div>
<div class="col-9 text-left" style="margin: 35px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<p style="font-family: 'apercu-boldbold';margin:5px 0px;">Streamlining</p>
<p>Information needed to create a conference is presented in an unorganized and lengthy way.</p>
<p style="font-family: 'apercu-boldbold'; padding: 10px 0px 0px 0px; margin:5px 0px;">Customization</p>
<p>Organizers want to be able to customize their conference site to include various features and implement their branding.</p>
<p style="font-family: 'apercu-boldbold';padding: 10px 0px 0px 0px; margin:5px 0px;">Scheduling</p>
<p>Organizers need a simple and efficient way to schedule events at conferences. Attendees want to personalize their own schedule by interest.</p>
<p style="font-family: 'apercu-boldbold';padding: 10px 0px 0px 0px; margin:5px 0px;">Highlight Details</p>
<p>Key information about conferences is often hard to find. Attendees want to easily be able to see information about location, dates, deadlines, etc. quickly.</p>
<p style="font-family: 'apercu-boldbold';padding: 10px 0px 0px 0px; margin:5px 0px;">Mulifunctionality</p>
<p>Organizers want a platform that supports all aspects of running a conference (submissions, website, ticketing, etc).</p>
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">low fidelity</p>
</div>
<div class="col-sm-9 text-left" style="font-family: 'aperculight';font-size: 15px;">
<img src="assets/img/clubs-lo.png" style="width: 400px;margin: 50px 0px 0px 0px;">
<p style="margin: 20px 0px 0px 0px;">Initial sketches of the product.</p></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">mid fidelity</p>
</div>
<div class="col-sm-9 text-left">
<img src="assets/img/clubs-mid-1.png" style="width: 700px;margin: 50px 0px 0px 0px;">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">high fidelity</p>
</div>
<div class="col-9 text-left" style=";font-size: 15px;font-family: 'aperculight';">
<img class="shadow" src="assets/img/clubs-hi-1.png" style="width: 700px;margin: 50px 0px 0px 0px;">
<p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Homepage</p>
<p style="margin: 5px 0px 20px 0px;">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 0px 0px;">
<p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Organization Page</p>
<p style="margin: 5px 0px 20px 0px;">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 0px 0px;">
<p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Join Page</p>
<p style="margin: 5px 0px 20px 0px;">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 0px 0px;">
<p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Club Events Page</p>
<p style="margin: 5px 0px 20px 0px;">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 0px 0px;">
<p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">General Events Page</p>
<p style="margin: 5px 0px 20px 0px;">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>
<!-- <div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">reflection</p>
</div>
<div class="col-sm-8 text-left" style="margin: 50px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<p>Working with Berkeley Innovation as a consultant for the second time, I was able to apply everything I learned in my first semester and grow as a designer. In a team of entirely new consultants, I also felt like I got to share a bit of the Project Mentor role. I led the first sprint to help my team understand how our design process works.</p>
<p>The biggest challenge we faced was the scope of the project. It was ambitious, and it wasn't until we began creating user flows that we realized just how many screens we needed to develop. Given this, I wish we had more time to iterate on the screens and do more user testing. </p>
<img class="shadow" src="assets/img/ubiquity-team.jpg" style=" width:500px">
<p style="margin: 20px 0px 40px 0px;">All dressed up at the Berkeley Innovation banquet!</p>
</div>
</div>
</div> -->
<div class="container">
<div class="row" style="margin: 70px 0px 100px 0px; padding: 0px;">
<div class="col-md-6" >
<h5 class="text-left" style="padding: 0px; color: #333333; font-weight: 100; font-size: 18px;font-family: 'apercumono'; ">© sona dolasia, 2020</h5>
</div>
<div class="col-md-6">
<!-- <h5 class="text-right" style="padding: 0px; color: #ffffff;font-weight: 100; font-size: 20px;font-family: 'Apercu-Mono';">invert</h5> -->
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>