Please enable JavaScript.
Coggle requires JavaScript to display documents.
QuaranTeams - Coggle Diagram
QuaranTeams
Main Story #1:
The end-user should be able to view the Landing Page of the QuaranTeams
Requirements:
The logo
State: Unclikable
Predition
clicked
Navigate to home page
Toggle Button
States:
Enabled
Landing Page turns black
Icon (moon) appears
Disabled (default)
Icon (sun) appears
Landing Page turns white
Animated Picture
State: Unclikable
App Title
“QuaranTeams”
Tagline
“Free Video Conferencing Web App”
Create Meeting Button
Empty Display Name > Clicked Create Meeting
The Display name field will redden
Prediction
Empty Display Name Empty display name would prohibit the user In Creating a meeting
Join Meeting Button
See Story #3 for further information (applies the same)
Footer displays
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1
Main Story #4
The end-user should be able to Quaranteams: Video Conference Call
The end user's first-time access to the app
Ask permission for the usage of the camera and microphone
After permission is accepted the end-user can use the camera and microphone
After permission is accepted the end-user can use the camera and microphone
The camera should open and function correctly
Camera indicator (light) should be on while using during video calls and off when the camera is disabled and when app is not accessed
The microphone should work as expected
When audio is off, microphone should not work
When audio is on, microphone should work
Prediction
The user will choose turn On/Off nolse are suppresion
When microphone has problem, it should have indicator like (!) as warning that something is wrong with the microphone
Camera Preview
When on > the camera is open and has end-user preview
Prediction
The user click a different background
When off > the camera is closed and has no preview
The end-user can share his/her screen
Clicked
Browser Modal
Choices:
Entire Screen
Number of screen should display
Share system audio (unchecked) default
Window
All available window should display
Chrome Tab
All available chrome tab should display
Upon selection of tab > Displays tab preview on the right side
Share tab audio (checked) default
When shared chrome tab has audio > participants should hear it
Share and Cancel Button
Share Button
Shares screen
Cancel Button
Cancels the share screen
Closed browser modal
The end-user can end/leave the meeting
Modal will appear “Leaving this Meeting”
Confirmation: “Are you sure you want to leave this meeting?”
Buttons
Yes
The participant will leave the meeting
Prediction
1 more item...
No
The participant will remain in the meeting
The modal will disappear
The end-user can change the layout of the participants preview
Default: Grid
The Grid layout should be automatically adjusted based on the number of participants
Participant’s name should also be displayed at the right bottom of the preview
When hovering each participant’s preview the “Pin” button/icon should appear
When clicked > the chosen participant’s preview should be pinned on the screen
Reflected only to the end-user’s screen and not to all participants
Speaker View
Clicked > Whoever is the speaker/the host should be pinned in the meeting
The rest of the participants should be on the right side
When hovering each participant’s preview the “Pin” button/icon should appear
When clicked > the chosen participant’s preview should be pinned on the screen
Reflected only to the end-user’s screen and not to all participants
Automatically adjusted based on the number of participants
Menu (Hamburger Icon)
Default: Displayed (open)
Participants Accordion
Displays the name of the participants
Displays the picture of the participants (icon)
Displays the accurate number of participants in the parenthesis
Messages Accordion
Clicked
Default: No messages
Displays Icon (Animated Picture)
Note below: “Write your message below to start the conversation.”
Displays text area
Default: No content
Placeholder: Your message
Displays Send Button (Icon)
Clicked
Send the message to the participants
The sent message appeared in the “Messages
Information:
2 more items...
Prediction
Messages will not be opened by default
Clicked
Closed/Open the menu
Footer displays
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1
Main Story #2
The end-user should be able to create a meeting The end-user should be able to create a meeting
Clicked
Navigate to the creation of a meeting
The end-user can copy the invite link
Clicked
Success Message appeared “Invite link copied to clipboard” with OK button
Clicking OK button will remove the success message
The end-user can copy the meeting code
Clicked
Success Message appeared “Meeting Code copied to clipboard” with OK button
Clicking OK button will remove the success message
The end-user can input “Display Name”
“Ready to create meeting” label should display
Prediction
If the name in black has not be able to create a meeting
Create Meeting Button
Empty Display Name > Clicked Create Metting button
The Display Name field will redden
Prediction
Empty display name would prohibit the user In Creating a meeting
Footer displays
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1
The end user's first-time access to the app
Ask permission for the usage of the camera and microphone
After permission is accepted the end-user can use the camera and microphone
The camera should open and function correctly
Camera indicator (light) should be on while using during video calls and off when the camera is disabled and when app is not accessed
The microphone should work as expected
When audio is off, microphone should not work
When audio is on, microphone should work
When microphone has problem, should have indicator like (!) as warning that something is wrong with the microphone
Camera Preview
When on > the camera is open and has end-user preview
1 more item...
When off > the camera is closed and has no preview
Toggle Button
States:
Enabled
Landing Page turns black
Icon (moon) appears
Disabled (default)
Landing Page turns white
Icon (sun) appears
Prediction
The cursor when hovered on the toggle button
would appear clickable
Main Story #3
The end-user should be able to join a meeting
Clicked
Join Meeting Modal will appear
When clicking cancel button > Modal will be closed
The end-user needs to enter the meeting code (required)
Invalid meeting code > Prompt Message “Oops! Meeting does not exist”
Valid meeting code > user will join the meeting
The end user's first-time access to the app
Ask permission for the usage of the camera and microphone
After permission is accepted the end-user can use the camera and microphone
Camera Preview
2 more items...
The microphone should work as expected
3 more items...
The camera should open and function correctly
1 more item...
Join Meeting Button
Meeting Video Conference Call will appear
The end-user should be able to join in the meeting
The end-user can input “Display Name”
Prediction
If the name in black has not be able to create a meeting
“Ready to join meeting” label should display
Toggle Button
States:
Enabled
Landing Page turns black
Icon (moon) appears
Disabled (default)
Landing Page turns white
Icon (sun) appears
Prediction
The cursor when hovered on the toggle button
would appear clickable
Footer displays
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1