User
Centered
Design
HCDE 318🔗
|
As part of the course HCDE 318 (Intro to User-Centered Design), my group is designed a workplace conference room that is specifically intended for the conduction of hybrid meetings - meetings that include both virtual and in person participants. A specific feature of this room is a digital whiteboard table that will allow easier collaboration between people in the physical space and people in the online space during the meeting.
Link to Images: docs.google.com/document/d/1NAEX-hGrZpYADqiy98bKYx54ZODVlIYxFtwtpOQlm0o/edit?usp=sharing
|
User Research
Participants:
- Interviewee 1 (P1): P1 is an assistant professor in the department of Human Centered Design and Engineering at the University of Washington. P1 also conducts Direct Research Groups in a hybrid setting. (Who I interviewed)
- Interviewee 2 (P2): P2 is a second year Ph.D. student in the department of Human Centered Design & Engineering and also works in a government position as a qualitative analyst and as a teachers assistant. P2 also has experience joining hybrid meetings remotely.
- Interviewee 3 (P3): P3 is a Ph.D. candidate at the Civil Engineering department and also works as an instructor for tutoring workshops for intro engineering courses. P3 has conducted multiple of these workshops in a hybrid setting to accommodate students who are sick.
Questions:
- Name/occupation/age
- General Meeting Questions
- Did you attend or organize the event?
- When was this event and is it recurring?
- What was the event for?
- What sort of technology did you have access to in the room?
- Were there any difficulties operating this technology?
- What kind of people were there?
- How many people were there?
- What percent was it in person vs virtual?
- What was the layout of the room?
- What went well and what didn’t go well?
- What social aspects were lost when meeting with someone online?
- If meeting with people without a camera does seeing a picture make you more comfortable?
- Did meeting with people online make communication more difficult?
- UX Specific Questions
- Did the meetings you conduct involve UX professionals?
- What UX processes did you conduct in these meetings?
- Were any UX processes/brainstorming more difficult in a hybrid setting
- What features could a smart room include that could support UX professionals in a hybrid meeting model?
Research Insights:
- People are generally prone to multitasking during school/work meetings. When people aren’t physically present in a room, this tendency is inflated. This causes the meetings to progress slower and get drawn out for longer.
- Seeing people’s faces and expressions is vitally important to human communication.
- Rooms where hybrid meetings occur often aren’t designed to accommodate hybrid meetings. Often people hosting these meetings have to figure out ways to accommodate these types of meetings themselves. For individuals who aren’t tech savvy this can be especially arduous.
- The digital whiteboard idea we were considering can help other groups of people besides just UX professionals, specifically teachers and students. Most collaboration software currently used, such as google docs, was never designed with hybrid meetings in mind.
- Prior to the pandemic professors were never required to accommodate students who couldn’t attend due to being sick. Now that students are being required to not come to campus if they are feeling sick hybrid meetings are becoming much more common.
Analyzing Research
|
Personas:
Our group used the data collected from our interviews to create personas of our target user audiencea to highlight on the pains and needs individuals face running meetings in a hybrid model. This was used to help us brainstorm specific features that our product could support. View all personas here. |
|
|
User Journey Map:
Help envision scenarios that our users face when currently running hybrid meetings our group constructed a user journey map to highlight their feelings during different touch-points they experience in their environment. This allowed our group to evaluate specific moments in these scenarios that our product could help solve. View larger image here. |
Designs and Lofi Prototypes
Requirements:
- Virtual attendees can attend hybrid meetings with only a single monitor with a PC.
- Meeting Window that provides digital information on co-located and virtual event attendees.
- Provide quality microphone/audio equipment that enables full audio input coverage of the room so virtual attendees can hear everything as if they were in the meeting room in person.
- Provide quality audio output equipment that allows co-located attendees to better hear virtual attendees.
- Digital whiteboard that allows online individuals to see the board and enables collaboration between co-located and virtual attendees.
- Video equipment that allows virtual attendees to receive a full view of all co-located participants.
- Intelligent gallery feature that splits up co-located participants into separate panels for individuals watching the meeting virtually.
- Live captions and meeting transcript generation that supports multiple languages.
- Voice command features that are responsive to all speaking types that allow additional commands and easier control of the meeting.
- Notification sounds that indicate when an online participant sent something into the chat.
- Provides seamless interaction between co-located and online individuals.
- Features that are tailored specifically with hybrid meetings in mind, not entirely virtual or co-located.
- Features are accessible to all individuals regardless of ability, country of origin, or language spoken.
|
Storyboards:
After deciding what features we planned on our product supporting our group created storyboards of limitations users can face when running hybrid meetings and potential design solutions we could implement to help solve this. View more storyboards here. |
|
|
Information architecture:
Our group created a LoFi mock-up using Figma of our interface we planned on virtual participants using to join the hybrid meeting. We used this mock-up to create a user flow which helped us map the different components of our design. View a larger image here. |
|
Annotated Wireframes:
The wireframes were intended to represent the entire interface of the system in low fidelity, using simple shapes and little no no color. They also helped us plan how different users would walk through a session of using our product. View all wireframe images here. |
|
|
Sketches:
The sketches helped our team better visualize how the desks would be arranged in real life. It was also helpful because we could rearrange the individual desks and theorize different shapes, which is illustrated on the yellow paper in the top right corner of the image. View more sketches here. |
User Evaluation and Findings
The purpose of this evaluation is to determine if the desktop application that goes with our product is simple and easy for the user to use with little explanation. This will be determined by executing user tests of our desktop app Figma prototype. The test will consist of specific tasks that the user must carry out. The Figma can be found here.
Each group member will carried out their interview individually. Afterwards, all three group members met to discuss what they learned. The participants selected for this trial were chosen by convenience sampling.
Each group member will carried out their interview individually. Afterwards, all three group members met to discuss what they learned. The participants selected for this trial were chosen by convenience sampling.
Participants:
- Participant 1: Woman, Age 43, BS Journalism (1999) (Who I interviewed)
- Participant 2: Woman, Age 21, UW student (major undecided)
- Participant 3: Man, Age unknown, UW student (major unknown)
Scenario
You are a tech worker at Amazon in your mid twenties. You usually go into the office, but today you will be attending a hybrid meeting from home.
Steps (1)
Scenario
You are a tech manager at Amazon and need to schedule a hybrid meeting for your coworkers who are working remotely.
Steps (1)
Steps (2)
You are a tech worker at Amazon in your mid twenties. You usually go into the office, but today you will be attending a hybrid meeting from home.
Steps (1)
- Join meeting (log into account, click on join meeting square)
- View chat (click on the chat button)
- View participants (click on the participants button)
- Open whiteboard & close out of it (click open whiteboard button, click close whiteboard button)
- Share screen and close out of it (click share screen button, click unshare screen button)
- Leave meeting (click end meeting button)
Scenario
You are a tech manager at Amazon and need to schedule a hybrid meeting for your coworkers who are working remotely.
Steps (1)
- Schedule Meeting (log into account, click schedule meeting square)
- Add participants to meeting (click add participants button)
- Confirm Participant (click the check in the circle)
- Schedule the meeting (click schedule meeting button) Participant will encounter an error due to time conflict: participant should click ok on subsequent screen and notice the new schedule meeting is at an appropriate time.
- Meeting should now be able to scheduled (click schedule meeting button)
Steps (2)
- Start Meeting as Host (log into account, click start meeting square)
- Kick John Doe (click participants, click hamburger menu, click kick)
- Start meeting recording & end it (click start recording button, click stop recording button)
- End the meeting (click end meeting button)
Finding 1: Inadequate Error Handling
While it is optimal to avoid errors altogether, when user input is involved there will inevitably be instances where the given input is not executable in the way the user intended. When this occurs, it is essential that the artifact effectively communicates to the user what happened, why it's an issue, and how to resolve said issue. This is easier said than done. When full sentences are shown on the screen, users are quick to skip reading and immediately click the "continue" or "next" button, as shown in the evaluation with Lisa. Lisa did not read the full error explanation, "Error: Meeting time conflict with Meeting #4", yet continued anyway and was very confused as to why the program wasn't running properly.
Suggestion: Less Words
As stated before, users tend to skip reading full sentences whenever possible; that is what Lisa did. An easy solution for this would be to use less words. Instead of "Error: Meeting time conflict with Meeting #4", just a simple "ERROR: TIME CONFLICT" in big, bold, impossible to miss letters would suffice. There can be a "more information" button underneath the error statement for users who want to know more information and will actually read the full error statement.
While it is optimal to avoid errors altogether, when user input is involved there will inevitably be instances where the given input is not executable in the way the user intended. When this occurs, it is essential that the artifact effectively communicates to the user what happened, why it's an issue, and how to resolve said issue. This is easier said than done. When full sentences are shown on the screen, users are quick to skip reading and immediately click the "continue" or "next" button, as shown in the evaluation with Lisa. Lisa did not read the full error explanation, "Error: Meeting time conflict with Meeting #4", yet continued anyway and was very confused as to why the program wasn't running properly.
Suggestion: Less Words
As stated before, users tend to skip reading full sentences whenever possible; that is what Lisa did. An easy solution for this would be to use less words. Instead of "Error: Meeting time conflict with Meeting #4", just a simple "ERROR: TIME CONFLICT" in big, bold, impossible to miss letters would suffice. There can be a "more information" button underneath the error statement for users who want to know more information and will actually read the full error statement.
Finding 2: Broken Links
When going through our evaluation and user flow a few errors occurred with the navigation with participant 2. When participant 2 tried to complete our third task and start meeting recording as a host, when stopping the recording the prototype proceeded to an unintended frame. A similar error occurred with participant 2 when completing the first task and trying to exit from the share screen function.
Suggestion: More Extensive Testing
Most of the errors could have been detected if our group performed rigorous testing of our product. To amend this our group plans on going through our user flow and task we have created to detect any additional user flow errors and fix them.
When going through our evaluation and user flow a few errors occurred with the navigation with participant 2. When participant 2 tried to complete our third task and start meeting recording as a host, when stopping the recording the prototype proceeded to an unintended frame. A similar error occurred with participant 2 when completing the first task and trying to exit from the share screen function.
Suggestion: More Extensive Testing
Most of the errors could have been detected if our group performed rigorous testing of our product. To amend this our group plans on going through our user flow and task we have created to detect any additional user flow errors and fix them.
Aside from these issues, the prototype showed many strengths. Users appreciated the simplicity and organization of the layout as it made the presented task simple to complete. Participants also enjoyed the integration of the whiteboard viewing mode into our web app prototype. Our participants were able to complete all the tasks we created in our evaluation plan, excluding the errors in our findings, which indicates the navigation of our app should be easy to understand for our user base as our target user group would likely have some technical background. For future evaluations it would be beneficial to include participants with less technical expertise as this might highlight areas in our user flow that aren’t as clear.
High Fidelity Prototyping
|
I was in charge of designing the physical table prototypes. The tables are made from foamboard and hot glue, and are one fourteenth of the actual size. There are two different types of table models, square tables and rounded tables. More images of this prototype can be viewed here, and prototypes for the digital display can be viewed on our Figma here.
|
|
Reflection
This project proved to be a very insightful experience for everyone involved. Throughout the design process, we gained experience in user research, storyboarding, user journey mapping, usability testing, and prototyping.
Due to the constraints of the classroom, we were only able to do usability testing for the digital interface. If given more time and resources, we would like to conduct further usability testing for the physical in-person desks, preferably with life-sized prototypes. This would provide much needed insight into how colocated users would interact with our product.
A challenge we faced as a group was in prototyping. As the softwares and hardwares used to create the prototypes - Figma and foamboard - was not a focus of the class, we had to do extra research in order to learn how to effectively create the prototypes. Since our group had three different parts of the artifact we needed to prototype - digital interface, desks, and camera - it was necessary that each individual take their own initiative to learn their prototyping technique and effectively carry it out to completion of a prototype.
Due to the constraints of the classroom, we were only able to do usability testing for the digital interface. If given more time and resources, we would like to conduct further usability testing for the physical in-person desks, preferably with life-sized prototypes. This would provide much needed insight into how colocated users would interact with our product.
A challenge we faced as a group was in prototyping. As the softwares and hardwares used to create the prototypes - Figma and foamboard - was not a focus of the class, we had to do extra research in order to learn how to effectively create the prototypes. Since our group had three different parts of the artifact we needed to prototype - digital interface, desks, and camera - it was necessary that each individual take their own initiative to learn their prototyping technique and effectively carry it out to completion of a prototype.
