Breakout rooms design review

[marcoambrosini]

Breakout rooms design review

28th February 2023:

Overall

• Think about restructuring menu and moving items around in the future releases Combine breakout rooms and participants tab #9005
• 🏃‍♂️ Change icon to https://fonts.google.com/icons?selected=Material Icons%3Aworkspaces%3A – also of individual breakout rooms, only have 1 icon, not 2 different ones
  Breakout rooms icon #8900
• 🏃‍♂️ Change wording from "Setup breakout rooms" to "Set up breakout rooms", as it’s a verb not a noun. In menu and modal Breakout rooms wording #8901

Accessibility

• Radio buttons need to be in a fieldset to group them semantically

Setup modal #8902

• 🏃‍♂️ Line break after "Number of breakout rooms"
• 🏃‍♂️ Heading "Assignment method" before radio buttons

Manual assignment modal #8903

• Rooms should be collapsible
• "Create breakout rooms" non-primary until everyone is assigned
• "Assign" --> primary button
• Avatars did not show / placeholder avatars only

Sidebar view

• In the future, get rid of specific "Breakout rooms" tab and combine it into "Participants" tab up top. Combine breakout rooms and participants tab #9005
• 🏃‍♂️ When inside a BR, show "Go back to main room" button in
• 🏃‍♂️ Layout for row of buttons
  • First row:
    • Start/end session button, full width
    • if moderator: show "Back to main room" on the same row, 2 half-width buttons
  • "Message all rooms" almost-full width button on the next row, with participant assignment icon-only button next to it
  • Participant assignment button:
    • "Manage breakout rooms"
    • Cog icon
  • Message all rooms icon --> paper plane icon
• 🏃‍♂️ Icons for start/end session button
  • 🏃‍♂️ Start session https://fonts.google.com/icons?selected=Material Icons%3Aworkspaces%3A
  • 🏃‍♂️ End session https://fonts.google.com/icons?selected=Material Icons%3Aworkspaces_outline%3A
• 🏃‍♂️ Icon for "Message all rooms": https://fonts.google.com/icons?selected=Material Icons%3Asend%3A
• "Join room" button can be a text only button
• All icons in a row need to be horizontally aligned
• All text should be left aligned (Room 1, participants, Room 2, participants)
• More whitespace between BRs
• All 3dot menu icons should be center aligned

[marcoambrosini]

All done but the combining of braekout rooms and participants tab, which requires solving some design problems first. Discussion here #9005

[nickvergessen]

Good Job 🎉