-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathubiquity.html
162 lines (149 loc) · 11.4 KB
/
ubiquity.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>ubiquity 📚</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:[email protected]" 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">ubiquity press</h1>
<h3 class="display-3 text-center header" style="margin: 10px 0px 10px;">simplifying the conference planning process</h3>
<h3 class="display-3 text-center caption" style="margin: 0px 0px 20px;">s/o berkeley innovation</h3><img class="shadow" src="assets/img/ubiquity.gif" style="height: 350px;margin: 20px 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 + <a href="https://mattind.me"><span style="text-decoration: underline;">mattin delavar</span></a> + <a href="https://www.linkedin.com/in/ellenjnguyen/"><span style="text-decoration: underline;">ellen nguyen</span></a> + <a href="https://www.linkedin.com/in/shirley-sun-0421/"><span style="text-decoration: underline;">shirley sun</span></a> + <a href="https://wrrn.squarespace.com"><span style="text-decoration: underline;">warren lai (pm)</span></a> </p>
<p class="body" style="margin: 0px 50px;font-weight: normal;padding: 10px 10px;"><em>role:</em> user reseach lead</p>
<p class="body" style="margin: 0px 50px;font-weight: normal;padding: 10px 10px;"><em>timeline:</em> jan - may 2019</p>
<p class="body" style="margin: 0px 90px 0px 50px;font-weight: normal;padding: 10px 10px;"><em>deliverables:</em> high fidelity prototypes in figma, user research report, competitive analysis</p>
<a href="https://www.behance.net/gallery/81130889/Ubiquity"><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></a>
</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;">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 class="text-left body" style="padding: 0px 10px;margin: 20px 0px 0px 50px;width: 700px;">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 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;">Spoke with 9 organizers and attendees to learn more about their needs.</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;">Researched 11 exisiting platforms. Noted pros, cons, usability, and other features.</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;">Sent to organizers and attendees, to gain better insight into current practices and painpoints.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<h5 class="text-right header" style="margin: 50px 0px 10px 0px;">insights</h5>
</div>
<div class="col-8 text-left">
<p class="text-left subheader" style="padding: 0px 10px;margin: 50px 0px 10px 50px;width: 700px;">🚤 streamlining</p>
<p class="text-left body" style="padding: 0px 10px;margin: 0px 0px 10px 50px;width: 700px;">Information needed to create a conference is presented in an unorganized and lengthy way.</p>
<p class="text-left subheader" style="padding: 0px 10px;margin: 30px 0px 10px 50px;width: 700px;">🎨 customizationn</p>
<p class="text-left body" style="padding: 0px 10px;margin: 0px 0px 10px 50px;width: 700px;">Organizers want to be able to customize their conference site to include various features and implement their branding. </p>
<p class="text-left subheader" style="padding: 0px 10px;margin: 30px 0px 10px 50px;width: 700px;">📆 scheduling</p>
<p class="text-left body" style="padding: 0px 10px;margin: 0px 0px 10px 50px;width: 700px;">Organizers need a simple and efficient way to schedule events at conferences. Attendees want to personalize their own schedule by interest.</p>
<p class="text-left subheader" style="padding: 0px 10px;margin: 30px 0px 10px 50px;width: 700px;">🔆 highlight details</p>
<p class="text-left body" style="padding: 0px 10px;margin: 0px 0px 10px 50px;width: 700px;">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 class="text-left subheader" style="padding: 0px 10px;margin: 30px 0px 10px 50px;width: 700px;">🛠 multifunctional</p>
<p class="text-left body" style="padding: 0px 10px;margin: 0px 0px 10px 50px;width: 700px;">Organizers want a platform that supports all aspects of running a conference (submissions, website, ticketing, etc).</p>
</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/ubiquity-low-1.png" style="width: 700px;margin: 50px 0px 10px 60px;">
<img src="assets/img/ubiquity-low-2.png" style="width: 700px;margin: 10px 0px 10px 60px;"><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">
<img src="assets/img/ubiquity-mid.png" style="width: 700px;margin: 50px 0px 10px 60px;">
</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 src="assets/img/ubiquity-hi.jpg" style="width: 700px;margin: 50px 0px 10px 60px;">
</div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class="header" style="margin: 50px 0px 10px 0px;">reflection</h5>
</div>
<div class="col-9 text-left">
<p class="body" style="margin: 50px 0px 10px 60px;padding: 0px 0px;width: 700px;">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.</p>
<p class="body" style="margin: 20px 0px 10px 60px;padding: 0px 0px;width: 700px;">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 class="body" style="margin: 20px 0px 10px 60px;padding: 0px 0px;width: 700px;">The scope of this project was ambitious, and it wasn't until we began creating user flows that we realized just how many screens we needed to develop. </p>
<p class="body" style="margin: 20px 0px 10px 60px;padding: 0px 0px;width: 700px;">I wish we'd had more time to iterate on all the screens, but given the time restraint, I'm proud of the work we did. </p>
<img class="shadow" src="assets/img/ubiquity-team.jpg" style="margin: 20px 0px 10px 60px; width:500px">
<p class="body" style="margin: 5px 0px 10px 60px;padding: 0px 0px;width: 700px;">All dressed up at the Berkeley Innovation banquet!</p>
</div>
</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>