-
Notifications
You must be signed in to change notification settings - Fork 0
/
mindfulmates.html
283 lines (264 loc) · 15.7 KB
/
mindfulmates.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MindfulMates | Pu Thavikulwat</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- & Put this in every page to use scrolling animation -->
<script defer src="layout.js"></script>
<link rel="stylesheet" href="css/layout.css">
<!-- & Put this in every page to use scrolling animation -->
<!-- & Put this in every page to populate navbar -->
<script src="navbar.js"></script>
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="css/case-study.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Assistant:wght@400;700&family=Darker+Grotesque:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- & Put this in every page to populate navbar -->
<link rel="icon" type="image/png" href="img/favicon_pu.png">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ML1WFK5FFS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ML1WFK5FFS');
</script>
<body>
<!-- & Put this in every page to populate navbar -->
<div id="nav-placeholder"></div>
<!-- & Put this in every page to populate navbar -->
<img src="img/mindfulmates/mindfulmates_poster_big_2.png" class="hide-long header-img" alt="Mindfulmates cover photo">
<section class="content-container">
<div class="project-info hide">
<div class="timeline">
<h2>Timeline</h2>
<div class="detail">
<h3>3 months (October - December 2022)</h3>
</div>
</div>
<div class="team">
<h2>Team</h2>
<div class="detail">
<h3>Hawa Ali Drammeh</h3>
<h3>Yerim Heo</h3>
<h3>Katelyn Mei</h3>
</div>
</div>
<div class="tools">
<h2>Tools</h2>
<div class="detail">
<h3>Figma, Blender</h3>
</div>
</div>
</div>
<div class="two-column section">
<div class="title">
<h2>My Contribution</h2>
</div>
<div class="desc hide">
<h3>Ideation, User Research, Storyboarding, Prototyping, and Usability Testing.</h3>
</div>
</div>
<div class="two-column section">
<div class="title">
<h2>Problem Statement</h2>
</div>
<div class="desc hide">
<h3>Poor communication can lead to misunderstandings, conflicts, and frustrations that may render one’s relationship unhealthy.</h3>
</div>
</div>
</section>
<section class="content-container">
<h2>Solution at a glance</h2>
<h3> </h3>
<h3>MindfulMates is a pair of palm-sized robots that allow people in relationships to have an <b>easy and entertaining way</b> to communicate to each other how they are feeling even when they are not physically together.</h3>
<h3> </h3>
<img class="hide" src="img/mindfulmates/checkin.png" alt="Mindfulmates check-in">
<h3> </h3>
<img class="hide" src="img/mindfulmates/take_time_off.png" alt="Mindfulmates take time off">
</section>
<section class="content-container-v2">
<h2>Who are we competing with?</h2>
<h3> </h3>
<h3 class="hide">I did extensive research on existing products and found one that has the most similar idea to ours: Lovebox</h3>
<h3> </h3>
<img class="hide" src="img/mindfulmates/lovebox.png" alt="Lovebox">
<h3> </h3>
<h3 class="hide">While Lovebox appears to be similar to MindfulMates on the first glance, it does not address the problem of poor communication, that is, couples having difficulty communicating to each other how they are feeling right now.</h3>
<h3> </h3>
<h3 class="hide">Lovebox is an interactive and creative messaging device whereas MindfulMates is a product that addresses poor communication by creating good check-in and conflict response habits.</h3>
</section>
<section class="content-container">
<h2>User Research</h2>
<h3> </h3>
<h3 class="hide">Before designing a solution, we hoped to understand how poor communication arises in couples’ daily interactions. We decided to conduct surveys and interviews on people who are/were in a relationship between the ages of 18-30. We gathered a total of 100 survey responses and completed 6 user interviews.</h3>
<h3> </h3>
<div class="desc">
<h3><b>Research Questions</b></h3>
<ul>
<li class="hide">How frequently do you have conflicts with your partner?</li>
<li class="hide">When conflicts arise, what is your initial reaction to it?</li>
<li class="hide">What steps do you and your partner take to resolve conflicts when they happen?</li>
<li class="hide">What was your most recent conflict with your partner? What happened? What do you think was the cause of the conflict?</li>
<li class="hide">What do you wish would've happened differently in the conflict or to prevent it from happening in the first place?</li>
<li class="hide">Do conflicts happen more often online or in-person? Why do you think that is?</li>
</ul>
<h3> </h3>
<h3><b>Research Insights:</b></h3>
<h3>Based on our survey and interview results, we found the following three insights:</h3>
<ol>
<li><b>Poor communication and misunderstanding are the most common cause of conflicts</b>
<ul>
<li>Some common examples of poor communication and misunderstanding between couples that we saw from the user research are: failing to validate their partner’s feelings, having different expectations from their partner, and misinterpreting what their partner meant.</li>
</ul>
</li>
<li><b>Online communication is confusing</b>
<ul>
<li>Many couples reported that conflicts happen more online because it is harder to read the tone of the other while texting.</li>
</ul>
</li>
<li><b>Shutting down / stonewalling</b>
<ul>
<li>The common theme we see among couples is <u><a href="https://www.gottman.com/blog/the-four-horsemen-the-antidotes/#:~:text=The%20Antidote%20to%20Stonewalling,you%20to%20calm%20down.">shutting down / stonewalling</a></u> to their partner after a conflict. Many couples just want to take a break and reflect before they can address the problem with their partner. Taking time off to reflect is a healthy way to address problems, but many couples try to do that by shutting down / stonewalling without informing their partners first. This can lead to even more frustrations for the other side.</li>
</ul>
</li>
</ol>
</div>
</section>
<section class="content-container">
<h2>Who are our users</h2>
<h3> </h3>
<h3 class="hide">Although we gained a lot of insights from our user research, the question we still needed to answer was:</h3>
<h3> </h3>
<h3 class="hide"><b>Who is really going to benefit from our design?</b></h3>
<h3> </h3>
<h3 class="hide">Using the results from our interviews and surveys, we created two User Personas that represent our target audience and their needs:</h3>
<img class="hide" src="img/mindfulmates/sarahsam.png" alt="Sarah and Sam persona">
<img class="hide" src="img/mindfulmates/lilypoppy.png" alt="Lily and Poppy persona">
<h3> </h3>
<div class="persona-btn-container">
<a href="resources/persona.pdf" class="persona-button">User Persona (PDF)</a>
</div>
</section>
<section class="content-container">
<h2>Paper Prototype</h2>
<h3> </h3>
<h3 class="hide">With our two main goals in mind, <b>1. Checking in with your partner</b> and <b>2. Telling your partner you need some time off</b>, we first started implementing our design through paper prototyping. This is a fast and easy way for us to get feedback and improve upon our design early in the process.</h3>
<h3> </h3>
<div class="prototype-photos">
<img class="hide" src="img/mindfulmates/paper_prototype/p1.png" alt="p1">
<img class="hide" src="img/mindfulmates/paper_prototype/p2.png" alt="p2">
<img class="hide" src="img/mindfulmates/paper_prototype/p3.jpeg" alt="p3">
<img class="hide" src="img/mindfulmates/paper_prototype/p4.jpeg" alt="p4">
<img class="hide" src="img/mindfulmates/paper_prototype/p5.jpeg" alt="p5">
<img class="hide" src="img/mindfulmates/paper_prototype/p6.jpeg" alt="p6">
<img class="hide" src="img/mindfulmates/paper_prototype/p7.jpeg" alt="p7">
<img class="hide" src="img/mindfulmates/paper_prototype/p8.jpeg" alt="p8">
<img class="hide" src="img/mindfulmates/paper_prototype/p9.jpeg" alt="p9">
<img class="hide" src="img/mindfulmates/paper_prototype/p10.jpeg" alt="p10">
</div>
</section>
<section class="content-container">
<h2>Usability Testing and Design Iterations</h2>
<h3> </h3>
<h3 class="hide">We then conducted usability testing with both our classmates, who are familiar with design principles, and participants from our previous interview. We found that there were four main pain points from the paper prototype:</h3>
<ul class="hide">
<li>Lack of confirmation feedback</li>
<li>Unclear icon and symbol representations</li>
<li>Unclear functionality</li>
<li>Lack of visual feedback</li>
</ul>
<h3 class="hide">We examined the pain points and made revisions, which are reflected on the digital mockup, in accordance to Three of <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">Nielsen’s 10 Heuristics:</a> User Control & Freedom, Visibility of System Status, and Consistency & Standards.</h3>
</section>
<section class="content-container">
<h2>Final Prototype (Digital Mockup)</h2>
<h3> </h3>
<h3 class="hide">Prototype Overview:</h3>
<h3> </h3>
<img class="hide" src="img/mindfulmates/ptype_overview.png" alt="prototype overview">
<h3> </h3>
<h3 class="hide">Sending different messages to your partner:</h3>
<h3> </h3>
<div class="robot-pict-container">
<img class="hide" src="img/mindfulmates/emoji_only.png" alt="emoji only">
<img class="hide" src="img/mindfulmates/color_only.png" alt="color only">
<img class="hide" src="img/mindfulmates/emoji_with_color.png" alt="emoji with color">
<img class="hide" src="img/mindfulmates/voice_only.png" alt="voice only">
<img class="hide" src="img/mindfulmates/voice_with_color.png" alt="voice with color">
<img class="hide" src="img/mindfulmates/emoji_voice_color.png" alt="emoji, voice, and color">
</div>
<h3> </h3>
<h3> </h3>
<div class="persona-btn-container">
<a href="https://www.figma.com/proto/27jTwBpu5xWDE7OFZ9kPWM/CSE-440-Prototype?scaling=scale-down&page-id=0%3A1&starting-point-node-id=130%3A819&show-proto-sidebar=1&node-id=130%3A819" class="persona-button hide">View Clickable Prototype</a>
</div>
<h3> </h3>
<h3> </h3>
<h3>Take Time Off Your Partner: </h3>
<h3> </h3>
<div class="robot-pict-container">
<img class="hide take-time-off" src="img/mindfulmates/take_time_off_off.png" alt="Turn off take time off mode">
<h3> </h3>
<img class="hide take-time-off" src="img/mindfulmates/take_time_off_on.png" alt="Turn on take time off mode">
</div>
<h3> </h3>
<h3> </h3>
<div class="persona-btn-container">
<a href="https://www.figma.com/proto/27jTwBpu5xWDE7OFZ9kPWM/CSE-440-Prototype?node-id=142%3A1312&scaling=scale-down&page-id=0%3A1&starting-point-node-id=142%3A1312&show-proto-sidebar=1" class="persona-button hide">View Clickable Prototype</a>
</div>
</section>
<section class="content-container">
<h2>Pitching</h2>
<h3> </h3>
<h3 class="hide">On our last day of class, we had a poster session where we pitched our projects to designers and researchers from the University of Washington, Allen Institute for AI, Google, and Polis.</h3>
<h3> </h3>
<img class="hide" src="img/mindfulmates/pitching.JPG" alt="mindfulmates pitching">
</section>
<section class="content-container">
<h2>Conclusion</h2>
<h3> </h3>
<h3 class="hide">This project is probably the most fun and interesting project I have ever done. The problem we addressed was quite abstract, one that was out of my comfort zone and knowledge. It took both my amazing teammates and I significant effort to bring our project to fruition. But in the end, our hard work paid off. Of all the 16 teams in the class, we were awarded the Best Overall Design by the invited researchers and designers 🎉🎉🎉</h3>
</section>
<section class="content-container">
<h2>If there was more time, I would like to....</h2>
<h3> </h3>
<ol class="hide">
<li>Spend more time conducting user research. While the data we got from the survey were valuable, I wished I could have reached out to more survey respondents and asked them follow-up questions based on their answers.</li>
<li>Introduce more interactions to the physical robot, such as being able to pat or handshake the robot. This way, couples can feel even more connected with each other by interacting with the robot and not just the app.</li>
</ol>
</section>
<section class="content-container">
<h2>Lessons I learned.......</h2>
<h3> </h3>
<ol class="hide">
<li><b>Quantity > Quality</b>
<ul>
<li>During the ideation phase, it is very important to explore and sketch out as many diverse solutions as possible in order to avoid design fixation. Instead of focusing on the quality, we focused more on the quantity of the solutions. We were able to come up with 28 unique solutions through Attribute Listings.</li>
</ul>
</li>
<li><b>Parallel Designing</b>
<ul>
<li>After the ideation phase, we narrowed down all of our 28 solutions and chose the best three. We worked on those three solutions concurrently up until the paper prototyping phase. I learned that this is an extremely useful practice as it allowed for us to compare and contrast the designs and determine which one was the most effective at addressing the problem.</li>
</ul>
</li>
<li><b>Mental Block</b>
<ul>
<li>In the beginning, I often found myself debating with ideas in my own head before I even had the chance to write it down and discuss them with my peers. I believe that it is a good approach to write down all the ideas and questions you have and go through them one by one instead of keeping everything in your head. Doing so will free up the space in your head and allow you to have more room to think clearly and creatively.</li>
</ul>
</li>
</ol>
<h3> </h3>
<h3><b>Thank you so much for reading!</b></h3>
</section>
<footer>
<h4>Designed and Coded by Pu Thavikulwat</h4>
</footer>
</body>
</html>