-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathubiquity-new.html
182 lines (165 loc) · 10.8 KB
/
ubiquity-new.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
<!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';">Ubiquity Press</p>
<p style="margin: 10px 0px 10px; font-family: 'aperculight'; font-size: 18px;">Simplifying the conference planning process.</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, Mattin Delavar, Ellen Nguyen, Shirley Sun, Warren Lai (mentor) </p>
<p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Role:</a> User Research Lead</p>
<p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Timeline:</a> January - May 2019</p>
<p><a style="font-family: 'apercu-boldbold';">Deliverables:</a> Figma Prototypes, User Research Report</p>
<a href="https://www.figma.com/proto/K28vnWdpqeREFcQrfhQq0Htj/bi-x-u?node-id=1790%3A4759&viewport=425%2C210%2C0.033991944044828415&scaling=min-zoom" target="_blank"><button class="btn active btn-sm text-left text-dark border rounded-0 border-dark" type="button" style="padding: 10px 50px;color: #FBEC9E;margin: 30px 0px 10px 0px;">view protoype</button></a>
</div>
</div>
<div class="col-sm-6 text-right">
<img class="shadow" src="assets/img/ubiquity.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 >As a product design consultant for Berkeley Innovation, my team worked with British academic publisher, Ubiquity Press. The company was devloping a conference planning platform to help academic conferences manage submitted abstract/papers.</p>
<p>The goals for this project were to: conduct user research, redesign/refine existing features, and add functionalities to complete the product.</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;">We conducted three different research methods to motivate our 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>Spoke with 9 conference organizers and attendees to learn more about their needs.</p>
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Surveys</p>
<p >Wrote and sent surveys to 14 conference organizers and attendees, to gain better insight into current practices and painpoints.</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>Researched 11 exisiting platforms. Noted pros, cons, usability, and other features.</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/ubiquity-low-1.png" style="width: 700px;margin: 50px 0px 0px 0px;">
<img src="assets/img/ubiquity-low-2.png" style="width: 700px;margin: 0px 0px 0px 0px;">
<p style="margin: 20px 0px 0px 0px;">Initial sketches of the product.
<a href="assets/img/ubiquity-low-2.png" target="_blank"> <u>(view full image) </u> </a></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" style="font-family: 'aperculight';font-size: 15px;">
<img src="assets/img/ubiquity-mid.png" style="width: 700px;margin: 50px 0px 30px 0px;">
<p>
<a href="assets/img/ubiquity-mid.png" target="_blank"> <u>(view full image) </u> </a>
</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';">high fidelity</p>
</div>
<div class="col-9 text-left"><img src="assets/img/ubiquity-hi.jpg" 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';">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>