Project
Group Course Project
with Janzen Molina, Rajvir Logani, Shihan Gong, Sunay Bargotra, Johnathan Tinajero
UC San Diego
DSGN 1: Design of Everyday Things
Project
Group Course Project
with Janzen Molina, Rajvir Logani, Shihan Gong, Sunay Bargotra, Johnathan Tinajero
UC San Diego
DSGN 1: Design of Everyday Things
Project
Group Course Project
with Janzen Molina, Rajvir Logani, Shihan Gong, Sunay Bargotra, Johnathan Tinajero
UC San Diego
DSGN 1: Design of Everyday Things
Skills
UI/UX Designer + Researcher
Skills
UI/UX Designer + Researcher
Skills
UI/UX Designer + Researcher
Timeline
Mar 2023 - May 2023
Timeline
Mar 2023 - May 2023
Timeline
Mar 2023 - May 2023
Course Introduction
Course Introduction
Course Introduction
DSGN 1: Design of Everyday Things
DSGN 1: Design of Everyday Things
DSGN 1: Design of Everyday Things
Taught by Michael Meyers at the University of California, San Diego
Taught by Michael Meyers at the University of California, San Diego
Taught by Michael Meyers at the University of California, San Diego
Centered around UCSD’s own Don Norman’s The Design of Everyday Things, this course sought to challenge its students through applying cognitive science principles to the design of both simple and complex, physical and digital technology through a sequence of four group projects.
Centered around UCSD’s own Don Norman’s The Design of Everyday Things, this course sought to challenge its students through applying cognitive science principles to the design of both simple and complex, physical and digital technology through a sequence of four group projects.
Centered around UCSD’s own Don Norman’s The Design of Everyday Things, this course sought to challenge its students through applying cognitive science principles to the design of both simple and complex, physical and digital technology through a sequence of four group projects.
Prompt
Prompt
Prompt
This was our final project, intended to apply the cumulative techniques discussed in the book and practiced in three prior group projects - such as observation, interviewing, providing a data-driven design through the Double-Diamond process - in order to make improvements on an existing digital or physical interface.
This was our final project, intended to apply the cumulative techniques discussed in the book and practiced in three prior group projects - such as observation, interviewing, providing a data-driven design through the Double-Diamond process - in order to make improvements on an existing digital or physical interface.
This was our final project, intended to apply the cumulative techniques discussed in the book and practiced in three prior group projects - such as observation, interviewing, providing a data-driven design through the Double-Diamond process - in order to make improvements on an existing digital or physical interface.
Brainstorming
Brainstorming
Brainstorming
We tackled narrowing our problem space through a collaborative mind map on digital and physical goods, but leaned towards digital redesigns as a change of pace from our previous physical redesigns.
We tackled narrowing our problem space through a collaborative mind map on digital and physical goods, but leaned towards digital redesigns as a change of pace from our previous physical redesigns.
We tackled narrowing our problem space through a collaborative mind map on digital and physical goods, but leaned towards digital redesigns as a change of pace from our previous physical redesigns.
Landing on a Design Issue and Preliminary User Research
Landing on a Design Issue and Preliminary User Research
Landing on a Design Issue and Preliminary User Research
We teetered between two options that were both familiar to us as students and offered a narrow enough scope such that we could really hone in on individual features - Zoom, a widely used video communication platform, and the Pronto App, the mobile application for the San Diego Metropolitan Transit System - but decided on Zoom for its accessibility to all of us as student designers, as well as its accessibility to a greater audience for our user research down the road.
We teetered between two options that were both familiar to us as students and offered a narrow enough scope such that we could really hone in on individual features - Zoom, a widely used video communication platform, and the Pronto App, the mobile application for the San Diego Metropolitan Transit System - but decided on Zoom for its accessibility to all of us as student designers, as well as its accessibility to a greater audience for our user research down the road.
We teetered between two options that were both familiar to us as students and offered a narrow enough scope such that we could really hone in on individual features - Zoom, a widely used video communication platform, and the Pronto App, the mobile application for the San Diego Metropolitan Transit System - but decided on Zoom for its accessibility to all of us as student designers, as well as its accessibility to a greater audience for our user research down the road.
- Pronto Scan
- Pronto App
- Slack
- Canvas
- Zoom
- UCSD COVID SCAN
- Miro
Zoom
- Joining calls
- Breakout rooms
- Opens safari to ask again
- Zoom home screen features
- Interface between devices
- Bottom task bar
- Process of joining
- Communication in zoom (video. mute, chat, reactions)
Pronto
- Scanning your phone
- Process of adding student pass
- Glare
- Phone/device positioning
- Relatively small qr code
- When screen is cracked in doesn't really work at all
- Start up takes 3-5 seconds
- Bus schedule > scanning
- More people, bus drivers skip out on scanning
- Less people, can take a minute, can take an individual even 30 seconds
- Bus drivers annoyed when people scan
- Interview some bus drivers
- Instead of qr code scanning, pronto could provide a general qr code for everyone to scan
- NFC option
- Platform for people to put phones down on
- Pronto Scan
- Pronto App
- Slack
- Canvas
- Zoom
- UCSD COVID SCAN
- Miro
Zoom
- Joining calls
- Breakout rooms
- Opens safari to ask again
- Zoom home screen features
- Interface between devices
- Bottom task bar
- Process of joining
- Communication in zoom (video. mute, chat, reactions)
Pronto
- Scanning your phone
- Process of adding student pass
- Glare
- Phone/device positioning
- Relatively small qr code
- When screen is cracked in doesn't really work at all
- Start up takes 3-5 seconds
- Bus schedule > scanning
- More people, bus drivers skip out on scanning
- Less people, can take a minute, can take an individual even 30 seconds
- Bus drivers annoyed when people scan
- Interview some bus drivers
- Instead of qr code scanning, pronto could provide a general qr code for everyone to scan
- NFC option
- Platform for people to put phones down on
- Pronto Scan
- Pronto App
- Slack
- Canvas
- Zoom
- UCSD COVID SCAN
- Miro
Zoom
- Joining calls
- Breakout rooms
- Opens safari to ask again
- Zoom home screen features
- Interface between devices
- Bottom task bar
- Process of joining
- Communication in zoom (video. mute, chat, reactions)
Pronto
- Scanning your phone
- Process of adding student pass
- Glare
- Phone/device positioning
- Relatively small qr code
- When screen is cracked in doesn't really work at all
- Start up takes 3-5 seconds
- Bus schedule > scanning
- More people, bus drivers skip out on scanning
- Less people, can take a minute, can take an individual even 30 seconds
- Bus drivers annoyed when people scan
- Interview some bus drivers
- Instead of qr code scanning, pronto could provide a general qr code for everyone to scan
- NFC option
- Platform for people to put phones down on
We initially conducted an interview that questioned all of the communication features within Zoom: video, microphone, chat, and reactions. However, we recognized that covering all of these features would likely be too overwhelming and lack proper detail and quality to each feature, so
We initially conducted an interview that questioned all of the communication features within Zoom: video, microphone, chat, and reactions. However, we recognized that covering all of these features would likely be too overwhelming and lack proper detail and quality to each feature, so
We initially conducted an interview that questioned all of the communication features within Zoom: video, microphone, chat, and reactions. However, we recognized that covering all of these features would likely be too overwhelming and lack proper detail and quality to each feature, so
we ultimately decided to focus on the chat, as our data had shown multiple concerns in that particular area. Mentioned problems included issues with
we ultimately decided to focus on the chat, as our data had shown multiple concerns in that particular area. Mentioned problems included issues with
we ultimately decided to focus on the chat, as our data had shown multiple concerns in that particular area. Mentioned problems included issues with
“messaging the wrong person”
“having trouble distinguishing between breakout room and main chat”
“messaging the wrong person”
“having trouble distinguishing between breakout room and main chat”
“messaging the wrong person”
“having trouble distinguishing between breakout room and main chat”
User Research
User Research
User Research
Methodology
Methodology
Methodology
As mentioned, we had to conduct two stages of interviews, as our initial scope ended up being too broad, so most of our findings are gathered specifically from that second interview. We included General Questions, Task-Based Questions, and Post-Task Questions. While the interviewee was on call, we asked them to show us their screen and actions using another device, and we recorded their answers on a Google Form, following a master-apprentice model.
As mentioned, we had to conduct two stages of interviews, as our initial scope ended up being too broad, so most of our findings are gathered specifically from that second interview. We included General Questions, Task-Based Questions, and Post-Task Questions. While the interviewee was on call, we asked them to show us their screen and actions using another device, and we recorded their answers on a Google Form, following a master-apprentice model.
As mentioned, we had to conduct two stages of interviews, as our initial scope ended up being too broad, so most of our findings are gathered specifically from that second interview. We included General Questions, Task-Based Questions, and Post-Task Questions. While the interviewee was on call, we asked them to show us their screen and actions using another device, and we recorded their answers on a Google Form, following a master-apprentice model.
Audience
Audience
Audience
Our interviewees were mostly students from UCSD, but also included siblings, parents, and friends that spanned different age ranges and occupations. We understood that our user research was influenced by its majority in participants under 23 years old, and technological skill may vary across ages, but we still feel it is a relatively accurate representation of Zoom’s target audience of students, teachers, and workers, as its primary function is video telephony communication for school or work.
Our interviewees were mostly students from UCSD, but also included siblings, parents, and friends that spanned different age ranges and occupations. We understood that our user research was influenced by its majority in participants under 23 years old, and technological skill may vary across ages, but we still feel it is a relatively accurate representation of Zoom’s target audience of students, teachers, and workers, as its primary function is video telephony communication for school or work.
Our interviewees were mostly students from UCSD, but also included siblings, parents, and friends that spanned different age ranges and occupations. We understood that our user research was influenced by its majority in participants under 23 years old, and technological skill may vary across ages, but we still feel it is a relatively accurate representation of Zoom’s target audience of students, teachers, and workers, as its primary function is video telephony communication for school or work.
Problems + Trends
Problems + Trends
Problems + Trends
Hidden Affordances within Chat Navigation
Hidden Affordances within Chat Navigation
Hidden Affordances within Chat Navigation
The chat recipient navigation lacked clear signifiers.
The chat recipient navigation lacked clear signifiers.
The chat recipient navigation lacked clear signifiers.
⅓ of our participants pointed out frustration over scrolling through the list of people to message, especially in larger meetings,
⅓ of our participants pointed out frustration over scrolling through the list of people to message, especially in larger meetings,
⅓ of our participants pointed out frustration over scrolling through the list of people to message, especially in larger meetings,
and one expressed the need for a search bar to mitigate this; however, we found that there is a search bar, but its faintness in color, absence of an icon signifier and placement as flush with the rest of the participant names can make it seem almost like a subtitle, and not a clickable function.
and one expressed the need for a search bar to mitigate this; however, we found that there is a search bar, but its faintness in color, absence of an icon signifier and placement as flush with the rest of the participant names can make it seem almost like a subtitle, and not a clickable function.
and one expressed the need for a search bar to mitigate this; however, we found that there is a search bar, but its faintness in color, absence of an icon signifier and placement as flush with the rest of the participant names can make it seem almost like a subtitle, and not a clickable function.
Culturally Inconsistent Signifiers
Culturally Inconsistent Signifiers
Culturally Inconsistent Signifiers
Zoom allows you to save a .txt file of all the recorded messages in the chat to your computer, but there is no singular icon that indicates that. It can be found in the ellipses, which is typically understood as an opportunity for “additional information,” but “Save chat” is the only available option. This complicates what could’ve been a one step process by a singular button, into a two step process that hides the available function, and ½ of our participants had to guess where the button to save the transcript was.
Zoom allows you to save a .txt file of all the recorded messages in the chat to your computer, but there is no singular icon that indicates that. It can be found in the ellipses, which is typically understood as an opportunity for “additional information,” but “Save chat” is the only available option. This complicates what could’ve been a one step process by a singular button, into a two step process that hides the available function, and ½ of our participants had to guess where the button to save the transcript was.
Zoom allows you to save a .txt file of all the recorded messages in the chat to your computer, but there is no singular icon that indicates that. It can be found in the ellipses, which is typically understood as an opportunity for “additional information,” but “Save chat” is the only available option. This complicates what could’ve been a one step process by a singular button, into a two step process that hides the available function, and ½ of our participants had to guess where the button to save the transcript was.
Our participants also seemed to struggle with attaching files to the chat because that signifier is not generally used.
Our participants also seemed to struggle with attaching files to the chat because that signifier is not generally used.
Our participants also seemed to struggle with attaching files to the chat because that signifier is not generally used.
Transcript Ambiguity
Transcript Ambiguity
Transcript Ambiguity
Task #6 asked users to save a transcript of the Zoom chat on their computer and send the file back into the Zoom chat. Although all other tasks merited some 5s, not a single participant rated this task’s ease to be a 5. This is most likely because once the chat is saved, all the feedback a user receives is “Chat saved”. Although there is a Show in Finder button, it doesn’t lead to a known file, but rather a Zoom generated folder, and the button itself wouldn’t be accessible to users after a certain amount of time. Participants also tended to accidentally send recently opened files instead of the specific transcript, so the ambiguity of transcript storage is the main issue.
Task #6 asked users to save a transcript of the Zoom chat on their computer and send the file back into the Zoom chat. Although all other tasks merited some 5s, not a single participant rated this task’s ease to be a 5. This is most likely because once the chat is saved, all the feedback a user receives is “Chat saved”. Although there is a Show in Finder button, it doesn’t lead to a known file, but rather a Zoom generated folder, and the button itself wouldn’t be accessible to users after a certain amount of time. Participants also tended to accidentally send recently opened files instead of the specific transcript, so the ambiguity of transcript storage is the main issue.
Task #6 asked users to save a transcript of the Zoom chat on their computer and send the file back into the Zoom chat. Although all other tasks merited some 5s, not a single participant rated this task’s ease to be a 5. This is most likely because once the chat is saved, all the feedback a user receives is “Chat saved”. Although there is a Show in Finder button, it doesn’t lead to a known file, but rather a Zoom generated folder, and the button itself wouldn’t be accessible to users after a certain amount of time. Participants also tended to accidentally send recently opened files instead of the specific transcript, so the ambiguity of transcript storage is the main issue.
Switching Between Direct vs. Group Message
Switching Between Direct vs. Group Message
Switching Between Direct vs. Group Message
One of the most common errors brought up by participants was accidentally sending a message intended as a direct message to the chat with everyone, and vice versa of sending a chat intended for everyone to a direct message chat. A participant provided a prime example of the error, recalling that their “teacher once meant to send a student a direct message and the whole class found out [their] friend was failing” the class. These mistakes are likely occurring from the indistinguishability within the dropdown of who the recipient is. Although there are differences in signifiers such as “Everyone” being grey and with black text and direct message being blue with white text and “(Direct Message)” in red. Because errors are still being made in spite of these signifiers, we know users require a more drastic model to feel secure in their shift.
One of the most common errors brought up by participants was accidentally sending a message intended as a direct message to the chat with everyone, and vice versa of sending a chat intended for everyone to a direct message chat. A participant provided a prime example of the error, recalling that their “teacher once meant to send a student a direct message and the whole class found out [their] friend was failing” the class. These mistakes are likely occurring from the indistinguishability within the dropdown of who the recipient is. Although there are differences in signifiers such as “Everyone” being grey and with black text and direct message being blue with white text and “(Direct Message)” in red. Because errors are still being made in spite of these signifiers, we know users require a more drastic model to feel secure in their shift.
One of the most common errors brought up by participants was accidentally sending a message intended as a direct message to the chat with everyone, and vice versa of sending a chat intended for everyone to a direct message chat. A participant provided a prime example of the error, recalling that their “teacher once meant to send a student a direct message and the whole class found out [their] friend was failing” the class. These mistakes are likely occurring from the indistinguishability within the dropdown of who the recipient is. Although there are differences in signifiers such as “Everyone” being grey and with black text and direct message being blue with white text and “(Direct Message)” in red. Because errors are still being made in spite of these signifiers, we know users require a more drastic model to feel secure in their shift.
Locating Messages in Direct vs. Group Message
Locating Messages in Direct vs. Group Message
Locating Messages in Direct vs. Group Message
Because direct messages, messages sent by everyone, and breakout room messages are all in the same chat stream, it’s not only difficult to keep track and switch between recipients, but to find particular past messages. Participants noted that it was difficult to manage direct messages that were integrated within the main chat with everyone because the direct message moves up with every message sent to the main chat.
Because direct messages, messages sent by everyone, and breakout room messages are all in the same chat stream, it’s not only difficult to keep track and switch between recipients, but to find particular past messages. Participants noted that it was difficult to manage direct messages that were integrated within the main chat with everyone because the direct message moves up with every message sent to the main chat.
Because direct messages, messages sent by everyone, and breakout room messages are all in the same chat stream, it’s not only difficult to keep track and switch between recipients, but to find particular past messages. Participants noted that it was difficult to manage direct messages that were integrated within the main chat with everyone because the direct message moves up with every message sent to the main chat.
Breakout Room Confusion
Breakout Room Confusion
Breakout Room Confusion
The singular chat stream raises specific concerns with breakout room chats because participants noted that it was unclear whether messages sent to the breakout room would only be seen by others in the breakout room, or by everyone in the meeting. The reason for this confusion is likely because in the breakout room, message recipients will say “to everyone”, yet everyone means everyone in the breakout room, not in the meeting.
The singular chat stream raises specific concerns with breakout room chats because participants noted that it was unclear whether messages sent to the breakout room would only be seen by others in the breakout room, or by everyone in the meeting. The reason for this confusion is likely because in the breakout room, message recipients will say “to everyone”, yet everyone means everyone in the breakout room, not in the meeting.
The singular chat stream raises specific concerns with breakout room chats because participants noted that it was unclear whether messages sent to the breakout room would only be seen by others in the breakout room, or by everyone in the meeting. The reason for this confusion is likely because in the breakout room, message recipients will say “to everyone”, yet everyone means everyone in the breakout room, not in the meeting.
Chat Window Positioning
Chat Window Positioning
Chat Window Positioning
Zoom has three different chat window positions, one that’s docked to the side, one that’s a separate window, and one in the corner of the Zoom; users can manually shift between the three, but the automatic setting seems to be arbitrary. Participants preferred to have their chat windows docked to the right side of the Zoom, specifically noting that it was culturally consistent with the structure of other common platforms such as Twitch. For the pop-up window, users seemed to like that it took up a small amount of space, but this did limit chat space, and the pop-up window itself would often cover the Zoom meeting.
Zoom has three different chat window positions, one that’s docked to the side, one that’s a separate window, and one in the corner of the Zoom; users can manually shift between the three, but the automatic setting seems to be arbitrary. Participants preferred to have their chat windows docked to the right side of the Zoom, specifically noting that it was culturally consistent with the structure of other common platforms such as Twitch. For the pop-up window, users seemed to like that it took up a small amount of space, but this did limit chat space, and the pop-up window itself would often cover the Zoom meeting.
Zoom has three different chat window positions, one that’s docked to the side, one that’s a separate window, and one in the corner of the Zoom; users can manually shift between the three, but the automatic setting seems to be arbitrary. Participants preferred to have their chat windows docked to the right side of the Zoom, specifically noting that it was culturally consistent with the structure of other common platforms such as Twitch. For the pop-up window, users seemed to like that it took up a small amount of space, but this did limit chat space, and the pop-up window itself would often cover the Zoom meeting.
Recap
Recap
Recap
Watch a recap of the Problems + Trends, put in the context of realistic scenarios!
Watch a recap of the Problems + Trends, put in the context of realistic scenarios!
Watch a recap of the Problems + Trends, put in the context of realistic scenarios!
Redesign
Redesign
Redesign
Competitors
Zoom
Google Meet
Microsoft Teams
BlueJeans
Skype
Design Spaces
Design Spaces
Design Spaces
Zoom
Google Meet
Microsoft Teams
BlueJeans
Skype
Skype
Skype
Compactness vs. Interchangibility
Compactness vs. Interchangibility
Compactness vs. Interchangibility
Compactness is how condensed the chat feature is, and how much space it leaves for the video interface.
Compactness is how condensed the chat feature is, and how much space it leaves for the video interface.
Compactness is how condensed the chat feature is, and how much space it leaves for the video interface.
Interchangeability is how easy it is to navigate between different conversations.
Interchangeability is how easy it is to navigate between different conversations.
Interchangeability is how easy it is to navigate between different conversations.
hover for information!
hover or hold for information!
hover or hold for information!
Very Compact
Not Compact
Not Interchangeable
1
5
1
5
Very Interchanegable
Microsoft Teams
Skype
Zoom
Google Meet
Ideal Design
BlueJeans
Redesign
Very Compact
Not Compact
Not Interchangeable
1
5
1
5
Very Interchanegable
Microsoft Teams
Skype
Zoom
Google Meet
Ideal Design
BlueJeans
Redesign
Very Compact
Not Compact
Not Interchangeable
1
5
1
5
Very Interchanegable
Microsoft Teams
Zoom
Ideal Design
Skype
BlueJeans
Redesign
Google Meet
Very Compact
Not Compact
Not Interchangeable
1
5
1
5
Very Interchanegable
Microsoft Teams
Zoom
Ideal Design
Skype
BlueJeans
Redesign
Google Meet
Very Compact
Not Compact
Not Interchangeable
1
5
1
5
Very Interchanegable
Microsoft Teams
Zoom
Ideal Design
BlueJeans
Skype
Redesign
Google Meet
Clarity vs. Aesthetic
Clarity vs. Aesthetic
Clarity vs. Aesthetic
Clarity is how straightforward the program is to use and if it has good signifiers.
Clarity is how straightforward the program is to use and if it has good signifiers.
Clarity is how straightforward the program is to use and if it has good signifiers.
Aesthetic is how appealing the design of the interface is. It also accounts for how customizable the application is.
Aesthetic is how appealing the design of the interface is. It also accounts for how customizable the application is.
Aesthetic is how appealing the design of the interface is. It also accounts for how customizable the application is.
hover or hold for information!
hover for information!
Very Clear
Not Clear
Not Aesthetic
1
5
1
5
Very Aesthetic
Google Meet
Microsoft Teams
Zoom
Ideal Design
Skype
BlueJeans
Redesign
Very Clear
Not Clear
Not Aesthetic
1
5
1
5
Very Aesthetic
Google Meet
Microsoft Teams
Zoom
Ideal Design
Skype
BlueJeans
Redesign
Very Clear
Not Clear
Not Aesthetic
1
5
1
5
Very Aesthetic
Google Meet
Microsoft Teams
Zoom
Ideal Design
Skype
BlueJeans
Redesign
Very Clear
Not Clear
Not Aesthetic
1
5
1
5
Very Aesthetic
Google Meet
Microsoft Teams
Zoom
Ideal Design
Skype
BlueJeans
Redesign
Very Clear
Not Clear
Not Aesthetic
1
5
1
5
Very Aesthetic
Google Meet
Microsoft Teams
Zoom
Ideal Design
Skype
BlueJeans
Redesign
Prototype Justification
Prototype Justification
Prototype Justification
We made all of the buttons more defined in general, but our redesign mainly features
We made all of the buttons more defined in general, but our redesign mainly features
We made all of the buttons more defined in general, but our redesign mainly features
more defined chat vessels,
with one for the main meeting,
additional breakout rooms that the user was added into,
as well as any user-created direct message chats or group chats.
more defined chat vessels,
with one for the main meeting,
additional breakout rooms that the user was added into,
as well as any user-created direct message chats or group chats.
more defined chat vessels,
with one for the main meeting,
additional breakout rooms that the user was added into,
as well as any user-created direct message chats or group chats.
To preview the chat, one simply hovers over that chat’s icon.
To preview the chat, one simply hovers over that chat’s icon.
To preview the chat, one simply hovers over that chat’s icon.
Additional changes were made to message typing as well, such as replacing the “Attach File” and “Download Transcript” buttons and also adding a formal “Send” button.
Additional changes were made to message typing as well, such as replacing the “Attach File” and “Download Transcript” buttons and also adding a formal “Send” button.
Additional changes were made to message typing as well, such as replacing the “Attach File” and “Download Transcript” buttons and also adding a formal “Send” button.
Chat Placement
Chat Placement
Chat Placement
To combat the disruption caused by the pop-up chat window, we decided that no matter if the user was maximized in full screen or in a normal window, the chat would expand to the side by default. However, users will also have the option to dock the chat off into a separate window if that’s their preference by hovering over the split between the meeting and the chat.
To combat the disruption caused by the pop-up chat window, we decided that no matter if the user was maximized in full screen or in a normal window, the chat would expand to the side by default. However, users will also have the option to dock the chat off into a separate window if that’s their preference by hovering over the split between the meeting and the chat.
To combat the disruption caused by the pop-up chat window, we decided that no matter if the user was maximized in full screen or in a normal window, the chat would expand to the side by default. However, users will also have the option to dock the chat off into a separate window if that’s their preference by hovering over the split between the meeting and the chat.
Messaging Interchangibility
Messaging Interchangibility
Messaging Interchangibility
The original chat had low discoverability in where to alternate between sending a message to “Everyone” versus sending a “Direct Message,” which led to description-similarity and mode-error slips and memory-lapse mistakes, as users a) couldn’t find where to send a direct message, b) forgot to change it back to “Everyone” after direct messaging, and c) had trouble discerning which messages were direct messages, as they often got lost in the chat stream. We determined that it was best to break up the chat stream into individual chats instead of a single continuous one. This could be considered a constraint, as the elimination of the option to send a direct message in the same place as the main chat prohibits the user from even mixing it up that way.
The original chat had low discoverability in where to alternate between sending a message to “Everyone” versus sending a “Direct Message,” which led to description-similarity and mode-error slips and memory-lapse mistakes, as users a) couldn’t find where to send a direct message, b) forgot to change it back to “Everyone” after direct messaging, and c) had trouble discerning which messages were direct messages, as they often got lost in the chat stream. We determined that it was best to break up the chat stream into individual chats instead of a single continuous one. This could be considered a constraint, as the elimination of the option to send a direct message in the same place as the main chat prohibits the user from even mixing it up that way.
The original chat had low discoverability in where to alternate between sending a message to “Everyone” versus sending a “Direct Message,” which led to description-similarity and mode-error slips and memory-lapse mistakes, as users a) couldn’t find where to send a direct message, b) forgot to change it back to “Everyone” after direct messaging, and c) had trouble discerning which messages were direct messages, as they often got lost in the chat stream. We determined that it was best to break up the chat stream into individual chats instead of a single continuous one. This could be considered a constraint, as the elimination of the option to send a direct message in the same place as the main chat prohibits the user from even mixing it up that way.
Searching Participants
Searching Participants
Searching Participants
The original chat interface included a search function; however, it was unclear and blended into the usual “Send a chat to…” title. We clarified this to be automatically searchable when starting a new chat, so users know who they’re sending messages to.
The original chat interface included a search function; however, it was unclear and blended into the usual “Send a chat to…” title. We clarified this to be automatically searchable when starting a new chat, so users know who they’re sending messages to.
The original chat interface included a search function; however, it was unclear and blended into the usual “Send a chat to…” title. We clarified this to be automatically searchable when starting a new chat, so users know who they’re sending messages to.
Breakout Rooms
Breakout Rooms
Breakout Rooms
It was mentioned by an interviewee that in a Breakout Room, it was difficult to distinguish if the send “To: Everyone” was to everyone in the meeting or everyone in the breakout room, which indicated the lack of clarity in signifiers, as well as a preface to more mode-error slips as that function is used identically to control recipients in the main chat room as well. Because of this, we generated a new chat for each breakout room, allowing users to feel secure in who they’re sending the messages to from the large title of “Breakout Room _”, as well as allowing users to revisit breakout room chats to talk to their group members in the event of any miscommunication.
It was mentioned by an interviewee that in a Breakout Room, it was difficult to distinguish if the send “To: Everyone” was to everyone in the meeting or everyone in the breakout room, which indicated the lack of clarity in signifiers, as well as a preface to more mode-error slips as that function is used identically to control recipients in the main chat room as well. Because of this, we generated a new chat for each breakout room, allowing users to feel secure in who they’re sending the messages to from the large title of “Breakout Room _”, as well as allowing users to revisit breakout room chats to talk to their group members in the event of any miscommunication.
It was mentioned by an interviewee that in a Breakout Room, it was difficult to distinguish if the send “To: Everyone” was to everyone in the meeting or everyone in the breakout room, which indicated the lack of clarity in signifiers, as well as a preface to more mode-error slips as that function is used identically to control recipients in the main chat room as well. Because of this, we generated a new chat for each breakout room, allowing users to feel secure in who they’re sending the messages to from the large title of “Breakout Room _”, as well as allowing users to revisit breakout room chats to talk to their group members in the event of any miscommunication.
Unclear Functions
Unclear Functions
Unclear Functions
The three buttons for sending a message were a piece of paper, an emoji, and an ellipses who’s only drop down was to “Save Chat.” This wasn’t really clear to our users, particularly because of the lack of cultural constancy, so we swapped the signifiers out for a paperclip for “Attach File”, and a download for “Save Transcript”. The addition of the “Send” button came with a user who’s enter key was malfunctioning, which the original chat interface lacked alternatives for.
The three buttons for sending a message were a piece of paper, an emoji, and an ellipses who’s only drop down was to “Save Chat.” This wasn’t really clear to our users, particularly because of the lack of cultural constancy, so we swapped the signifiers out for a paperclip for “Attach File”, and a download for “Save Transcript”. The addition of the “Send” button came with a user who’s enter key was malfunctioning, which the original chat interface lacked alternatives for.
The three buttons for sending a message were a piece of paper, an emoji, and an ellipses who’s only drop down was to “Save Chat.” This wasn’t really clear to our users, particularly because of the lack of cultural constancy, so we swapped the signifiers out for a paperclip for “Attach File”, and a download for “Save Transcript”. The addition of the “Send” button came with a user who’s enter key was malfunctioning, which the original chat interface lacked alternatives for.
Tradeoffs
Tradeoffs
Tradeoffs
Our redesign includes bigger buttons and separate panels for different chats. This may have used more space, but it allows users to see everything happening clearly. We implemented a minimize button for users who do not care about seeing the chat and instead wish to see the lecture in full screen.
Our redesign includes bigger buttons and separate panels for different chats. This may have used more space, but it allows users to see everything happening clearly. We implemented a minimize button for users who do not care about seeing the chat and instead wish to see the lecture in full screen.
Our redesign includes bigger buttons and separate panels for different chats. This may have used more space, but it allows users to see everything happening clearly. We implemented a minimize button for users who do not care about seeing the chat and instead wish to see the lecture in full screen.
Final Prototype
Final Prototype
Final Prototype
Run-Through
Run-Through
Run-Through
General Redesign
General Redesign
General Redesign
Overall larger and colored buttons for more definition and clarity
Overall larger and colored buttons for more definition and clarity
Overall larger and colored buttons for more definition and clarity
Introduction of a Side Chat Bar
Introduction of a Side Chat Bar
Introduction of a Side Chat Bar
Side Chat Bar for users’ main room chat, breakout room chat, and any additional created direct-messaging or group chats; To preview the chat, can hover over icon (Discord-inspired)
Side Chat Bar for users’ main room chat, breakout room chat, and any additional created direct-messaging or group chats; To preview the chat, can hover over icon (Discord-inspired)
Side Chat Bar for users’ main room chat, breakout room chat, and any additional created direct-messaging or group chats; To preview the chat, can hover over icon (Discord-inspired)
Breakout Room Chats Revisitable
Breakout Room Chats Revisitable
Breakout Room Chats Revisitable
The introduction of separated chat streams means users can now revisit Breakout Room Chats after the Breakout Room has ended; In the shown instance, it was helpful for members to reconsider their answers, promoting communication
The introduction of separated chat streams means users can now revisit Breakout Room Chats after the Breakout Room has ended; In the shown instance, it was helpful for members to reconsider their answers, promoting communication
The introduction of separated chat streams means users can now revisit Breakout Room Chats after the Breakout Room has ended; In the shown instance, it was helpful for members to reconsider their answers, promoting communication
Signifier Change
Signifier Change
Signifier Change
Changed the signifiers of message functions to be more culturally constant; Paperclip for Attaching Files, Download for Save Transcript, and the addition of a Send button
Changed the signifiers of message functions to be more culturally constant; Paperclip for Attaching Files, Download for Save Transcript, and the addition of a Send button
Changed the signifiers of message functions to be more culturally constant; Paperclip for Attaching Files, Download for Save Transcript, and the addition of a Send button
Starting New Chats
Starting New Chats
Starting New Chats
To start a new chat, the user simply has to click the “+” button, and a blank chat will appear;
The “Start a new chat with…” and magnifying glass will signify users to select a recipient
To start a new chat, the user simply has to click the “+” button, and a blank chat will appear;
The “Start a new chat with…” and magnifying glass will signify users to select a recipient
To start a new chat, the user simply has to click the “+” button, and a blank chat will appear;
The “Start a new chat with…” and magnifying glass will signify users to select a recipient
Searching for Receipients
Searching for Receipients
Searching for Receipients
Once the user clicks on the search bar, a drop down menu will appear, where they can scroll through, or begin typing, where all participants whose names begin with that letter will appear
Once the user clicks on the search bar, a drop down menu will appear, where they can scroll through, or begin typing, where all participants whose names begin with that letter will appear
Once the user clicks on the search bar, a drop down menu will appear, where they can scroll through, or begin typing, where all participants whose names begin with that letter will appear
Creating Group Chats
Creating Group Chats
Creating Group Chats
One the new features we added was the ability to create group chats, after seeing how difficult it was to direct message every single person a user wanted to; Once the chat was made, the icon appears on the side
One the new features we added was the ability to create group chats, after seeing how difficult it was to direct message every single person a user wanted to; Once the chat was made, the icon appears on the side
One the new features we added was the ability to create group chats, after seeing how difficult it was to direct message every single person a user wanted to; Once the chat was made, the icon appears on the side
