-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathzoomredesign.html
206 lines (192 loc) · 24.4 KB
/
zoomredesign.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
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7V2T37B7CE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7V2T37B7CE');
</script>
<title>Zoom Redesign - Janzen Molina</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="no-sidebar is-preload">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<!-- Logo -->
<h1><a href="index.html">Janzen Molina</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li class="current">
<a href="#">UI/UX</a>
<ul>
<li><a href="acm-website.html">ACM at UCSD Website</a></li>
<li><a href="navassist.html">NavAssist</a></li>
<li><a href="civictechjobs.html">Civic Tech Jobs</a></li>
<li><a href="zoomredesign.html">Zoom Redesign</a></li>
</ul>
</li>
<li>
<a href="#">Beyond UI/UX</a>
<ul>
<!-- <li><a href="grove.html">Grove</a></li> -->
<li><a href="synposium.html">SYNposium</a></li>
<li><a href="vrexhibition.html">VR Exhibition Night</a></li>
<li><a href="eds124br.html">EDS 124BR</a></li>
</ul>
</li>
<li><a href="resume.html">Resume</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</section>
<!-- Main -->
<section id="main">
<div class="container">
<!-- Content -->
<article class="box post">
<a class="image featured"><img src="images/zoomredesign-banner.png" alt="Zoom Redesign banner"></a>
<header>
<h2>Zoom Redesign</h2>
<p>Redesign of an existing system with an emphasis on changing pain points demonstrated by users.</p>
</header>
<p>
<b>Team:</b> Janzen Molina, Rajvir Logani, Shihan Gong,
Sunay Bargotra, Fiona Liu, Johnathan Tinajero<br>
Each team member played an equivalent role in researching and developing the project.
</p>
<section>
<header>
<h3>Background</h3>
</header>
<p>
For our final project, we were to take the issues of an existing product and redesign them based on user feedback and the design fundamentals found in the book <i>The Design of Everyday Things</i> by Don Norman.
</p>
<h4>Objective</h4>
<ol>
<li>Observe the user with the product in a simulated scenario in order to understand how they go through a certain flow</li>
<li>Interview users to understand their pain points with the product and their ideas for how to solve the problem</li>
<li>Utilize the data from these methods to inform a redesigned version of the product</li>
</ol>
</section>
<section>
<header>
<h3>Brainstorming</h3>
</header>
<h4>Mind Map</h4>
<p>Our group started brainstorming by first making a mind map of all of our ideas. The mind map was split into two sections: digital and physical. We leaned towards doing something digital and landed on two options: Zoom, a video communication app and Pronto, a transportation assistance app local to the San Diego area. From here, we made a list of possible problems to explore within the two apps.
</p>
<a href="images/zoomredesign-mindmap.png" target="_blank"><img class="article-image" src="images/zoomredesign-mindmap.png" alt="Mind map for Zoom redesign project"></a>
<p class="gallery-description">Sample of mind map in Miro being used to determine final project idea</p>
<p>
We eventually decided on Zoom and its various communication features: video, microphone, chat, and reactions. However, after a few interviews, we realized that covering all of these features may be too overwhelming for one project. We had a meeting and decided that we wanted to focus on the chat, as our data had shown that there were multiple problems in that specific area. These included problems with messaging the wrong person or having trouble distinguishing between the breakout room and main chat.
</p>
</section>
<section>
<header>
<h3>Interview Methodology</h3>
</header>
<p>
Our interview questions were divided into three categories: general questions, task-based questions, and post-task questions. During the in-person interview, we shared a Zoom link with the interviewees and either sat next to them or video chatted them on another device. While asking interviewees questions, we also did a talk-along process to help the interviewee elaborate on their process better; instead of letting the interviewee fill out the Google Form, the interviewer filled it out while observing the interviewees’ behavior during those assigned questions. After conducting initial interviews, we continued to iterate on our interview process to focus on the chat function as we felt that was one of the major pain points of the app.
</p>
<p>
We used the master-apprentice model to create our interview questions, as this model allows us to become the students and the participants can play the role of the teacher in order to demonstrate their knowledge to us. We also adapted both open-ended and closed questions as we thought this would allow us to build a solid foundation for collecting qualitative and quantitative data.
</p>
<h4>Interview Guide</h4>
<iframe src="https://drive.google.com/file/d/1AP6StqF-E8ZmkDk0Z1fwp-du6EYSWZHm/preview" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:1000px;width:75%;border:none;overflow:hidden;display:block;margin:auto;"></iframe>
</section>
<section>
<header>
<h3>Problems and Trends</h3>
</header>
<h4>Unclear Signifiers</h4>
<p>
Based on the data, we found that the participants were not able to identify some of the affordances the chat function offered as a result of the lack of clear signifiers. Specifically, the lack of a simple ability to find a particular person to send a direct message becomes frustrating for the participants. 7 out of 21 participants pointed out that scrolling through the list of people to message became an issue in larger meetings because of the longer time it took to find the person’s name in the dropdown list as the number of people in the Zoom meeting increased. This becomes an issue as the participants are consistently making a knowledge-based mistake. There is a much easier way to search for someone in the list of people, found directly above the dropdown menu in the form of a search bar.
</p>
<p>
However, there is a lack of knowledge from the participants surrounding this feature as demonstrated by the participants who continue to use the more difficult and time-consuming method of scrolling. In fact, participant #9 suggests to us that there should be a search bar in order to make the process more efficient, but the feature itself is already implemented! This lack of knowledge contributing to the participants’ inability to cross the gulf of execution is a result of the lack of easily accessible signifiers within the search bar. Currently, the bar is designed to be flush with the rest of the participant names in the dropdown menu, which makes the text blend in with the overall shape of the list. Furthermore, the text input area for the search bar is a slightly lighter shade of gray compared to the rest of the text, which, to a visually impaired individual, looks almost identical to the point where it would not be apparent to the user that the search bar exists. Lastly, unlike many websites and applications with a search bar function, the list does not give the signifier that it affords being searched through using an icon like a magnifying glass. In parts of the task where recognizing images was key to completing the task correctly, at least 8 of the 21 participants recognized a certain image that gave them hints regarding what function would occur when that particular button or area was interacted with. In the case of the search bar, however, no such icon exists. As a result, the people who rely on the images as a semantic constraint to deduce what would reasonably be done by clicking a button would end up getting confused and not completing the task in the most efficient way possible.
</p>
<p>
Another trend we noticed surrounding the unclear signifiers is the save transcripts button. A function exists in the Zoom chat that allows you to save a text file of all the recorded messages in the chat directly onto your computer. However, just by looking at the visual signifiers within the interface, you would not be able to guess that. This aligns with the data from our participants, where 11 out of the 22 participants interviewed had to guess where the button to save the transcript as a text file was located. The reason listed by all the participants was that the button itself is hidden by another button displayed as three dots on the interface.
</p>
<p>
This makes what could be a one-step process into a more complicated two-step process, further proven by all 22 participants who did not give it a score of 5 signifying a clearly easy task on our scale (this will be further elaborated upon in a lower section). Additionally, because the function is hidden behind the three dots, the icon of the dots itself does not provide a signifier that is clear to tell the user that the chat affords being saved through the Zoom application. By means of cultural constraints, the interfaces designed in other applications have dots that users would recognize as a menu that would lead to several different options that could not be all listed on just one screen for visual cleanup and organizational purposes. However, the menu in the Zoom chat for participants only has one option- the save chat function- which defeats the purpose of using the three dots icon and goes against the cultural constraint, which further decreases the ability of the participants to cross the gulf of execution and understands how the saving feature works.
</p>
<h4>Issues with Direct/Group messages</h4>
<p>
One trend we noticed in our analysis of the interview data we had (for the second interview) was that a solid acknowledged the commonality of making errors in the chat by accidentally sending a message that was intended to be a direct message to the chat that included everyone and vice versa (sending a chat meant for everyone to someone in a direct message). Four out of 22 participants directly admitted to making this mistake themselves and another 3 acknowledged it’s an issue that they are cautious about and/or have noticed around them. So overall 7 out of 22 of our interviewees have recognized that this error is common. A couple of our interviewees mentioned that it often happened when they typed their message out and hit the enter key to send it without realizing what the chat’s recipient was set at. This can be acknowledged as a mode-error slip based on the fact that the chat user performed the right action but on the wrong setting/mode (the wrong recipient) and/or a memory-lapse mistake because the chat user forgot the current state of the environment (what the recipient was set as). Additionally, it could be considered a description similarity slip in the case that the user was not able to acknowledge the difference in the interface when sending a chat to everyone vs a direct message or vice versa. One of our interviewees provided a prime example of how prevalent this error is and how detrimental it can be by telling us how their “teacher once meant to send a student a direct message and the whole class found out [their] friend was failing” the class. This made it clear to us that the distinction between recipients in Zoom’s chat interface was not clear enough for people to notice and stop themselves from sending a message to the wrong person/people. This comes down to the two signifiers surrounding the direct messaging feature in Zoom. Firstly, the signifier that tells a user who the recipient of a message is does not stand out, making it easy to ignore and nondifferentiable from other words (like “Type message here…” and “Who can see your messages?”) present in the interface. There are differences in that the recipient’s name is black rather than gray and the recipient’s name is highlighted in gray but these are very subtle and don’t do a good enough job of allowing chat users to avoid errors by noticing who they are messaging before they send a message, and thus serve as poor signifiers.
</p>
<p>
The second signifier of a direct message is the red words that say “(Direct Message)” next to the recipient’s name (right above the text entry box) and next to the actual message that was sent. This signifier is definitely more distinct than the first one due to the red coloring of “(Direct Message)” note which stands out from the rest of the colors. However, this was still not enough for some of our interviewees. One of the 7 interviewees, who was constantly cautious about sending messages to the wrong person, acknowledged the red lettering that tells one whether they’re sending a direct message or not, but noted that she wished there was a “ warning telling you more prominently who you’re sending a message too because it’s not absolutely clear.” These signifiers (the recipient name and the red lettering) are not clear enough for users like her. This same participant noted in her interview that when trying to reach out to an individual in the same Zoom meeting as her, she would go and direct message them on a different platform (like Slack) to avoid both sending a message to the wrong person and the potential of anyone else seeing the message. She would go out of her way to go to another platform to direct message someone because she was more comfortable with the way direct messaging worked on that platform than on Zoom.
Furthermore, 7 out of 22 of our participants also noted that it was common for them to lose direct message chats within the stream of chats with everyone. Another 2 participants noted that it was difficult to manage direct messages within the main chat with everyone because the direct message moves up with every message sent to the chat with everyone, requiring one to scroll up to keep track of their direct messages. This made for 9 out of 22 of our interviewees that addressed frustration with direct messages integrated into the chat with everyone.
Additionally, 6 out of our 22 participants noted that they had experienced confusion navigating the chat within breakout rooms. 3 out of these 6 interviewees specifically stated that it was confusing to them whether messages sent to the breakout room would only be seen by others in the breakout room or by everyone in the meeting. One of these 3 interviewees stated why, explaining how even messages in breakout rooms say “to everyone” yet means everyone in the breakout room, not in the meeting. This “to everyone” note is a poor signifier as it says the same thing in the main room chat with everyone in it and thus leaves the meaning of the “everyone” recipient very ambiguous. Furthermore, one of the 6 interviewees who had experienced confusion with chats in breakout rooms stated that chats from the breakout rooms were “a bit confusing when you can see the rest of the meeting chat.” This is understandable considering that messages sent to the main chat with everyone and to a breakout room both have the header “to Everyone”. Because messages from breakout rooms and the main room both have the same header and look the same, the only way to truly distinguish between them is by memory of which messages were from the breakout room and which were not. The fact that there is no signifier to distinguish between these types of messages means that the developers of the Zoom chat completely replaced the use of knowledge in the world for knowledge in the head when it came to reintegrating breakout room chats into the main room chat. Additionally, the knowledge in the head required to distinguish between these messages would not even be considered knowledge in the head if a chat user was not paying attention to who sent the message in the breakout room or what the message said, to this user the two types of chats (ones from the breakout room and ones from the main room) would be indistinguishable. This point was evident in the fact that another one of the 6 interviewees who had experienced confusion with chats in breakout rooms firmly believed that all chats from breakout rooms disappeared when you left said breakout room. While chats from the main room disappear when you go into a breakout room, as noted by another one of those 6 interviewees, chats from breakout rooms don’t disappear when you go back into the main room, they are just camouflaged amongst the other chats and thus not discoverable.
</p>
<h4>Difficulty when saving chat transcripts</h4>
<p>
We found that all participants had some trouble when it came to completing task #6. In this task, the users were asked to save a transcript of the Zoom chat on their computer and send the attached text file back into the Zoom chat. On every other task, we found that at least 1 participant would rate the task as a 5, signifying it was an easy thing to do. For example, for task #5, where participants were asked to send an emoji in the chat, 20 out of 22 participants rated the task as a 5 on the same scale as the other given tasks. By contrast, 0 out of 22 participants rated task #6 as a 5, and 6 out of 22 participants rated the task as a 1, signifying the most difficult task imaginable.
</p>
<p>
The cause of this trend can be traced back to the lack of instructions given by Zoom once the user saves the text file to their computer. Upon saving the chat successfully, the program gives no clue as to how to complete the second half of the task, which involves searching for the text file within the participant’s computer so that they can send it back into the chat. People struggled with this because of their lack of understanding surrounding where the text file went after it was saved, leading to knowledge-based mistakes. This is further narrowed down by the data which demonstrated that 17 out of 22 participants completely and correctly sent any attachment into the Zoom chat while only 13 out of 22 participants correctly sent the text file back into the chat, and many of the participants that correctly did task #6 still took a lot of time to eventually figure it out. This exhibits the idea that the inability to find the file within the device’s storage is the root cause rather than a participant’s inability to send an attachment. There were also participants who specifically did the task incorrectly because they sent the wrong file; this could suggest a capture slip. This is because those users may have sent other files several times throughout the day, which is common among the college student demographic that we studied closely. After working with computer files for much of the day, the participant might have sent a recently opened file that was more recurring in the user’s head rather than the desired text file.
</p>
<h4>Chat Window Positioning</h4>
<p>
Another trend we recognized in our interview data had to do with preference and feelings that interviewees had regarding the placement of their Zoom chat window. 11 out of our 22 interviewees stated that they preferred to have their chat windows docked to the right side of the Zoom window. One of these 11 interviewees elaborated stating that he was used to this chat orientation because it was standard across other platforms which he used regularly such as Twitch, thus the developers made good use of cultural constancy and knowledge in the head provided by the structure of other common platforms with this chat orientation. This however wasn’t the only orientation the chat showed up in when interviewees clicked the chat button. For 7 out of our 22 interviewees, the chat appeared in a small window separate from zoom in the center of their screen.
</p>
<p>
Interestingly enough we discovered that 6 out of our 22 interviewees actually preferred the chat in a window. 4 out of these 6 interviewees, however, preferred the window to be placed within a corner of the main Zoom window so it was still there but smaller and out of the way. One of these 4 even stated that they don't like the chat window docked on the right side because it “takes up space” and that having the chat window “floating somewhere on the corner of the screen” was a good alternative that took up less space.
</p>
<p>
Only one out of our 22 interviewees actually liked the pop-up window showing up in the middle of the screen but noted they would only have it open when they needed to use it and closed it right after while most other interviewees mentioned leaving their chat windows open for longer to the side somewhere. This data showed us that, overall, the most preferred chat orientation was one that was off to the side, but with that being said, making sure that the chat took up a small amount of space and was out of the way was important to our interviewees.
</p>
</section>
<section>
<header>
<h3>Redesign</h3>
</header>
<p>As of writing, the Figma files for the redesign are not available for view, so a section of the final report has been included to view the design process of iterating and testing on the prototype.</p>
<iframe src="https://drive.google.com/file/d/1UF0cw3sJ-f9x1aDQGqG_YMV9yH8mcDcE/preview" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:1000px;width:75%;border:none;overflow:hidden;display:block;margin:auto;"></iframe>
</section>
<section>
<header>
<h3>Reflection</h3>
</header>
<p>
This was my first time collaborating with others on a design project, so the entire process taught me how to better incorporate the design decisions of others into the final product and how to ensure everyone's opinion was heard equally. I can also refer back to this project and several of the concepts I learned that were related to the design fundamentals in the course because of how relevant they are to any design project. For example, thinking about a product's use cases in terms of affordances will help me break down the idea into understandable parts that simplify the process of understanding a more complex user scenario.
</p>
</section>
</article>
</div>
</section>
<!-- Footer -->
<div id="copyright" class="index-copyright">
<ul class="social">
<li><a class="icon solid fa-envelope" href="mailto:[email protected]"><span class="label">Email</span></a></li>
<li><a class="icon brands fa-github" href="https://github.com/janzenmolina"><span class="label">GitHub</span></a></li>
<li><a class="icon brands fa-linkedin" href="https://www.linkedin.com/in/janzenmolina/"><span class="label">LinkedIn</span></a></li>
</ul>
<ul class="links">
<li>© Janzen Molina 2022</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>