-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
385 lines (317 loc) · 18.8 KB
/
index.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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> -->
<style>
@import url(''https://fonts.googleapis.com/css2?family=Lato&display=swap'');
body {
background-image: linear-gradient(to right, #FFF9F4, #FFF9F4);
font-family: 'Lato', sans-serif !important;
}
.cropped {
object-fit: cover;
height: 275px;
}
</style>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>DH110 2023S UX project by Haryn Shin</title>
</head>
<body class="m-5" style="background-color:#FFF9F4">
<div class="jumbotron">
<h2 class="display-4">Bondily:</h2>
<h2 class="lead">Enhancing Family Connection Through a Shared Journal</h2>
<h2 class="lead">DH110 2023S UX project by Haryn Shin</h2>
<hr class="my-4">
</div>
<div class="card">
<div class="card-header">
Project Description
</div>
<div class="card-body">
<p class="card-text">The current project "Bondily" aims to enhance the connections among family members by
providing a shared journaling space where they can comfortably share their life, thoughts, and emotional
experiences with each other through journaling. Through such a shared, collaborative journaling app, family
members can form their own private journaling space and interact with each other on a deeper level.</p>
</div>
</div>
<hr class="my-4">
<img width="1000" height="650" src="framee.svg" class="card-img-top" alt="...">
<h3 class="display-6 py-5">Introduction</h3>
<hr class="my-4">
<p>This project will assist users in connecting with their family members, particularly those whom
users are physically distant or away from, by providing them with a fun and creative way to keep
the family bonds strong: writing a collaborative, shared digital journal. Currently, most users
seem to communicate with their family members through calls and texts remotely, but conversations
in these forms could often only reach so far. The activity of keeping a shared journal between close
family members could not only provide an alternative way for families to stay in touch but also foster
an environment for greater emotional connections, even when they may be far apart in distance.
<p>Through this UX project, I hope to provide family members, especially those who are physically away
from one another, with a way to share their emotional experiences and little things in life with each
other through a form of a journal. The 'Bond' in Bondily comes from the word 'Bond' which represents a
relationship between people or groups based on shared feelings, interests, or experiences, and
'ily' comes from the last 3 characters in the word 'Family' to form 'Bondily', which conveys my aim of
fostering greater emotional connections among family members through my product.
<h2 class="display-6 py-5">Design Statement</h2>
<hr class="my-4">
<div class="card">
<div class="card-header">
Design Statement
</div>
<div class="card-body">
<p class="card-text">The key question that guided my project is:
How can I design a user-friendly app that could strengthen the bonds among physically distant family members?
</p>
<p class="card-text"> Through my extensive research and design process detailed in below sections, I identified
my target users, their current challenges in terms of connecting with family members, and designed and prototyped
my product to address user challenges and provide a creative solution.
</div>
</div>
<h3 class="display-6 py-5">Competitor Analysis</h3>
<hr>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img class="cropped" src="./a1_pic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Heuristic Evaluation</h5>
<p class="card-text">
As a competitor analysis, I conducted a heuristic evaluation on two apps that aimed to achieve similar goals to mine.
The first is Waffle, a collaborative journal app that is intended to be used by with those whom users are close.
The app allows a group of members to create a shared journaling space where each member can share their thoughts
and experiences. The second app is eFamily, which allows a group of users to form a "family" with the goal of
having them stay in touch with each other effortlessly. The app allows each user to share their "moments" as
well as create a collaborative family album that consists of photos and videos of family memories, history,
and more. The evaluations are based on the 10 Usability Heuristics for User Interface Design developed by
Jakob Nielsen. The severity of the violation of each heuristic for each app is rated on a scale of 0-4.
</p>
<p class="card-text">
Based on this heuristic evaluation, I identified key potential issues that I should take into consideration when designing my product:
<ul>
<li> The ambiguity of icon usage that does not necessarily follow the standard conventions.</li>
<li> The confusing two-part settings page.</li>
<li> Insufficient ways for users to get help and a lack of documentation.</li>
</ul>
</p>
<center>
<a class="btn btn-dark" href="https://github.com/harynshin/DH110-HARYNSHIN/blob/main/Assignments/A1_heuristic_evaluation.md" role="button">Read more about Heuristic Evaluation</a>
</center>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img class="cropped" src="./a2_pic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Usability Testing</h5>
<p class="card-text">
Through usability testing, I aimed to learn about how usable the Waffle app is, especially for novel users, and
find what issues there are within the app that could impede the app's user experience. Creating tasks for
the usability test based on key issues found during the heuristic evaluation, I observed how the participant
user interacted and navigated through different sections of the app as well as the challenges they encountered
while completing the tasks.
</p>
<p class="card-text">
My user was able to complete all of the tasks with relative ease throughout the usability testing process,
which mostly indicated that the Waffle app was user-friendly and nicely built even for novel users.
Nevertheless, I was able to find some usability issues that existed in the app such as confusing icon
usage, lack of documentation, and duplicate settings system.
</p>
<center>
<a class="btn btn-dark" href="https://github.com/harynshin/DH110-HARYNSHIN/blob/main/Assignments/A2_Pilot_UT.md" role="button">Read more about Usability Testing</a>
</center>
</div>
</div>
</div>
</div>
<br>
<h3 class="display-6 py-5">User Research</h3>
<hr>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img class="cropped" src="./a3_pic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Contextual Inquiry</h5>
<p class="card-text">
In this stage, rather than focusing on the app, I focused the research on the user themselves, learning
about their goals, challenges with the current ways they try to achieve their goals, and their thought
process behind each action they make when using different mobile applications. Through this process,
I was able to gain significant insights into who my target user groups would be and what aspects I
should consider when designing my product based on their current challenges.
</p>
<p class="card-text">
Some insightful findings I gathered from the contextual inquiry are:
<ul>
<li> The user's difficulty in their current method of connection (calling/ texting /FaceTiming)
involved the differences in time zones, the limitations in technology, and the necessity to
use multiple different apps to cater to what each of their family members was most comfortable using. </li>
<li> The user finds a shared journal with their family members useful for remembering or
reflecting on past events.</li>
<li> Some concerns that the user had about the idea of keeping a shared journal included the
difficulty of consistently writing the journal entries and getting used to the digital
format of the journal, especially for older people like parents.</li>
</ul>
</p>
<center>
<a class="btn btn-dark" href="https://github.com/harynshin/DH110-HARYNSHIN/blob/main/Assignments/A3_Contextual_Inquiry.md" role="button">Read more about Contextual Inquiry</a>
</center>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img class="cropped" src="./a4_pic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">UX Storytelling</h5>
<p class="card-text">
By identifying my target users through insights gained during the contextual inquiry step, I derived two personas:
</p>
<p class="card-text">
1) Jongseok Park: a small coffee shop owner in Korea with two daughters who are currently studying abroad; his goal is to connect with his daughters and provide greater emotional support even when they are physically apart.
</p>
<p class="card-text">
2) Rachel Woods: a Master/Ph.D. student whose goal is to make and record more valuable memories with her family.
</p>
<p class="card-text">
Through UX storytelling – creating personas and their scenarios – I learned more about my target
audience by empathizing with the user's perspective. It allowed me to experience from the user's
perspective and essentially "live" my user's world as if I personally knew them. Conducting UX
storytelling further allowed me as a UX designer to focus on users' needs, goals, behaviors,
and motivations by getting away from potential biases and personal opinions in creating the product.
Creating journey maps for the two personas, I was able to understand potential frustrations in users’
current situations and derive solutions using my product.
</p>
<center>
<a class="btn btn-dark" href="https://github.com/harynshin/DH110-HARYNSHIN/blob/main/Assignments/A4_persona_scenario.md" role="button">Read more about UX Storytelling</a>
</center>
</div>
</div>
</div>
</div>
<br>
<h3 class="display-6 py-5">Design Process</h3>
<hr>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img class="cropped" src="./a5_pic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Low-Fidelity Prototype</h5>
<p class="card-text">
Designing the low-fidelity prototype, I visualized the abstract idea of my product by creating basic
outlines and structures and testing their functionalities with a user by observing potential
issues and difficulties in navigating through the app. Deriving various user tasks, I was able
to identify potential issues that could arise in each part of the app and revise them accordingly
based on the user’s feedback and insights.
</p>
<p class="card-text">
Conducting a low-fidelity prototype testing with a participant user,
I identified a few issues such as the ambiguity of certain icons,
readability issues with some buttons, infinite scrolling problems, and
the unnecessary two-step process of achieving a certain task. Based on this
feedback, I revised the prototype to eliminate sources of confusion and make the
transition easier and smooth.
</p>
<center>
<a class="btn btn-dark" href="https://github.com/harynshin/DH110-HARYNSHIN/blob/main/Assignments/A5_lowfi_prototype.md" role="button">Read more about Low-Fidelity Prototype</a>
</center>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img class="cropped" src="./a6_pic.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Interface Design System</h5>
<p class="card-text">
In this interface design process, I converted one of the low-fidelity screens into a high-fidelity screen,
testing out different design schemes and selecting the design that best suits the project in terms of
accessibility and the app's value propositions. This involved making different colors, shapes, and
typographic variations and performing accessibility checks such as color-contrast tests. </p>
<p class="card-text">
Testing the initial interface design system with a participant user, I gathered user feedback and revised the screen
accordingly. By doing so, I derived a design scheme for the app that thoroughly follows the interface
design principles but also best demonstrates the functionalities and the features I aimed to present
in my product.
</p>
<center>
<a class="btn btn-dark" href="https://github.com/harynshin/DH110-HARYNSHIN/blob/main/Assignments/A6_interface_design_system.md" role="button">Read more about Interface Design</a>
</center>
</div>
</div>
</div>
</div>
</div>
<br>
<h3 class="display-6 py-5">Interactive Prototype</h3>
<hr>
<div class="row row-cols-1 row-cols-md-1 g-0"
<div class="col">
<div class="card">
<div class="card-header">
High-Fidelity Prototype
</div>
<div class="card-body">
<p>
The final step of this project was to create a high-fidelity prototype for all screens that
supported my user tasks. By doing so, I was able to test out the functionality of the
various components, features, and aspects of the screens. Being a high-fidelity interactive
prototype, this closely demonstrates what the end product would look like as well as how the
user will be navigating through different aspects of the app.
</p>
<p>
Through prototype testing with a participant user, I gathered insights on potential issues and
revised the prototype in a way that provides more user freedom in performing tasks, better
alignments, and fixes minor design details for a better user experience.
</p>
<center>
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="700" height="550" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F4twDn9DJpKNgK0MMNSx9Yk%2FDH110-PROJECT%3Ftype%3Ddesign%26node-id%3D147-22284%26scaling%3Dscale-down%26page-id%3D147%253A22283%26starting-point-node-id%3D147%253A22284" allowfullscreen></iframe>
</center>
<center>
<a class="btn btn-dark" href="https://github.com/harynshin/DH110-HARYNSHIN/blob/main/Assignments/A7_HighFiPrototype.md" role="button">Read more about High-Fidelity Prototype</a>
</center>
</div>
</div>
<h3 class="display-6 py-5">Pitch Video</h3>
<hr>
<div class="card">
<div class="card-header">
Pitch Video
</div>
<div class="card-body">
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iqb7JtgiBMc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</center>
</div>
</div>
<h3 class="display-6 py-5">Conclusion</h3>
<hr class="my-4">
<p> Having the opportunity to conduct the entire UX project was a very rewarding experience, delving into each process in detail and progressing toward building an app.
Throughout this project, I learned so much from conducting user research and interviews to designing and prototyping a mobile application. For each step of this project,
I learned that there is much more to designing a product than just the sole design process – besides the designing stage, conducting user research was crucial in identifying
who our target users are, the struggles that they face, and how my product can assist them in providing a solution to their challenges. Processes such as usability testing
and contextual inquiry helped me learn about my target users’ goals and their tendencies in performing each action while interacting with technology. I am grateful for the
opportunity to conduct tests with multiple user participants, whether that be in prototype testings or cognitive walkthroughs, which provided me great insights into identifying
potential issues and sources of improvements I could revise in order to create a better user experience for my product. Though each step in the project took a great amount of
time as it required hands-on interviews, conducting thoughtful analyses, and creating functional designs, I am proud of how this project came along as well as the skills and
knowledge I gained.
</p>
<p>
In future projects, I hope to try conducting multiple rounds of usability and prototype tests, which could help me gather more insights and thereby better tailor my designs
to various user groups. Moreover, I would like to try out different design schemes to explore various design components that I have yet to experience and expand the realm
of my creativity as a UX designer.
</p>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<!--
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>