Please enable JavaScript.
Coggle requires JavaScript to display documents.
Quaranteams (INDEX), Animated picture, app title - Coggle Diagram
Quaranteams
(INDEX)
The End-user Should be able to to view the first page of Quaranteams
Requirements
the logo of quaranteams
State
unclickable
Switch Button
State
Enable
first page turn into black
icon sun change into moon
disabled(Default)
first page turn into white
icon sun appear
tag line
Free Video Conferencing Web App
unclickable
Create meeting "Button"
clicked
Navigate to Creation meeting page
the user can copy invitation link
clicked
Success message appear "Invite link copied to clipboard"
1 more item...
the user can copy Meeting Code
clicked
Success message appear "meeting Code copied to clipboard"
1 more item...
the user can input name in "Display Name"
if the "Display Name field" are empty it color red
if the "Display Name field" are fill it color green and "Create Meeting button" are able to click
Footer displays
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1
if the chrome don't ask in first page for permission
For the user's first-time access to the app/website
Ask permission for the usage of the camera and microphone
1 more item...
depend on user
camera and microphone are default turned on
clicked
1 more item...
Join Meeting "Button"
clicked
the end-user should be able to join in the meeting
meeting video Conference call appear
Footer display
QuaranTeams © 2022 • Developed by jericNuez
State
Unclickable
Version 1.2.1
State
Unclickable
the chrome asked permission to used to camera and Microphone (For firs time user)
UI/UX
Landing Page
Dark Mode State
Enabled
Landing Page turns Back
Header
Visible Quaranteams Logo
Visible Dark Mode Toggle Button
Toggle Animation
Moon Icon
Body
Visible Animator picture
Visible app Title
White Font Coloe
1 more item...
Visible Tagline
White Font Color
1 more item...
Visible Create Meeting Button
Change Color Animation
Light Purple background Color
White text
1 more item...
Visible Join Meeting Button
Change Color Animation
dark Grey Background Color
white Text
1 more item...
Footer
Displays
white Text
2 more items...
Disabled
Landing Page Turn White
Header
Visible Quaranteams Logo
Visible Dark Mode Toggle button
Toggle Anination
Sun icon
Body
Visible Animated Picture
Visible App Title
back font color
"Quaranteams"
Can be read
Visible Tagline
back font color
1 more item...
Visible Create Meeting button
Change Color Animation
Purple Background Color
White text
"Create Meeting"
can be read
Visible Join Meeting Button
Change Color Animation
Light Grey Background Color
Black Text
"Join Meeting"
can be read
Footer
Displays
Black Text
Predictions
Palettes
Header
QuaranTeams Logo
Should not clickable
Dark Toggle Button
Should be able to toggle
Disable
Disables dark mode
Enable
enables dark mode
Body
Animated Picture
Should not be clickable
App Tile
Should not be clickable
Tagline
Should not be clickable
Create Meeting Button
Should change body to meeting Creation
Join Meeting Button
Join Meeting Modal should appear
Footer
Displays
Should not clickable
The end-user should be able to join a meeting
Create meeting "Button"
clicked
Navigate to Creation meeting page
the user can copy invitation link
clicked
Success message appear "Invite link copied to clipboard"
clicked "OK"
1 more item...
the user can copy Meeting Code
clicked
Success message appear "meeting Code copied to clipboard"
clicked "OK"
1 more item...
the user can input name in "Display Name"
if the "Display Name field" are empty it color red
if the "Display Name field" are fill it color green and "Create Meeting button" are able to click
Footer displays
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1
depend on user
camera and microphone are default turned on
clicked
the camera and microphone will turned off
if the chrome don't ask in first page for permission
For the user's first-time access to the app/website
Ask permission for the usage of the camera and microphone
After permission is accepted the user. user can use the camera and microphone
3 more items...
Switch button
State
Enabled
page turns Black
Icon moon appears
disabled(Default)
page turn white
icon sun appears
UI/UX
Landing Page
Dark Mode Toggle Button
Enabled
Join Meeting Button
Clicked
Join Meeting Box
Landing Page Turns black
The user should be able to create a meeting
Join Meeting Modal will appear
The User need to enter the meeting code (required)
Valid meeting code the user will join the meeting
The User can input “Display Name”
“Ready to join meeting” label should display
Join Meeting Button
The end-user should be able to join in the meeting
Meeting Video Conference Call will appear
For the user's first-time access to the app/website
Ask permission for the usage of the camera and microphone
After permission is accepted the user. user can use the camera and microphone
The camera should open and welled function
Camera indicator (light) should be on while using during video calls and off when the camera is disabled and when app/website wasn't accessed
When camera has problem, it should have indicator like (!) as warning that something is wrong with the user's Camera
The microphone should work as expected
When microphone is off, Microphone should not work
When microphone has problem, should have indicator like (!) as warning that something is wrong with the user's Microphone
When microphone is on, Microphone should work
Camera Preview
When the Camera icon is on the camera is open and has user preview
When the Camera is off the camera is closed and has no user preview
Invalid meeting code the Prompt Message “Oops! Meeting does not exist”
When clicking cancel button the Modal will be closed
Switch Button
State
Enable
The page turn into black
icon sun change into moon
disabled(Default)
The page turn into white
icon sun appear
Footer display
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1
UI/UX
landing page (Mode state)
Enable
Landing page (Dark)
header
Visible Quaranteams Logo
Visible Dark Mode Toggle button
Moon icon
Body
Camera Preview Display(Visible)
Border Color
Dark Purple
visible camera Button
Animation on click
State
Enable
1 more item...
Disable
1 more item...
Visible Microphone Button
Animation on click
Enable
1 more item...
Disable
1 more item...
Visible Copy invite link text field
Boarder
color:white
border text
2 more items...
invite Link
color:white
Disable
The end-user should be able to Quaranteams: Video Conference Call
For the user's first-time access to the app/website
Ask permission for the usage of the camera and microphone
After permission is accepted the user. user can use the camera and microphone
The camera should open and welled function
Camera indicator (light) should be on while using during video calls and off when the camera is disabled and when app/website wasn't accessed
When camera has problem, it should have indicator like (!) as warning that something is wrong with the user's Camera
The microphone should work as expected
When microphone is off, Microphone should not work
When microphone is on, Microphone should work
When microphone has problem, should have indicator like (!) as warning that something is wrong with the user's Microphone
Camera Preview
When the Camera icon is on the camera is open and has user preview
When the Camera is off the camera is closed and has no user preview
The 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 the 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 User can end/leave the meeting
Modal will appear “Leaving this Meeting”
Confirmation: “Are you sure you want to leave this meeting?”
choices
Yes
The participant will leave the meeting
No
The participant will remain in the meeting
The modal will disappear
The user can change the layout of her and 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 the 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 user screen and not to the other participants
Automatically adjusted based on the number of participants
Menu bar _The icon have 3 line
Open Displayed(Default)
clicked
closed
Participants and the count of it
Displays the name of the participants
Displays the picture of the participants (icon)
Message
clicked
No messages (Default)
Displays Icon (Animated Picture)
Note below: “Write your message below to start the conversation.”
Display text area
Default: No content
Placeholder: Your message
Displays Send Button (Icon)
Clicked
Send the message to all participants
The sent message appeared in the “Messages”
indicate to the message the date and time of sending it to participants
Footer displays
QuaranTeams © 2022 • Developed by jericNuez
Version 1.2.1
UI /UX
Dark mode State
Enable
Page Turn Back
Header
Visible Participant Button
White Font Color
White Participant Icon Color
White Drop Down Icon Animation
Visible Participants name
Visible Message Button
White Font Color
White Messages Icon Color
White Drop Down Animation Color
Default
2 more items...
Visible Text Bubble
2 more items...
visible Textfield
Place Holder: "Your Message"
2 more items...
Visible Send Button
Purple Sens Icon Button
Footer
Display
White Text
2 more items...
Display Camera preview
When hovered
Visible Medu button(Hamburger icon)
1 more item...
Visible Layout Button
1 more item...
Visible Camera Button
1 more item...
Visible Microphone Button
1 more item...
Visible Share Screen Button
1 more item...
Visible Leave Meeting Button
1 more item...
Visible Pin Screen Button
1 more item...
Disabled (Default)
Page Turns White
Footer
Display
Black Text
2 more items...
Header
Visible Participants Button
Black Font Color
Black Participants Icon Color
Black Drop Down Icon Animation
Visible Participants name
Visible Message Button
Black Font Color
Black Messanges Icon Color
Black Drop Down Icon Color
Default
2 more items...
Visible Text Bubble
2 more items...
Visible Textfield
Placeholder: "Your Message"
2 more items...
Visible Sent Button
Purple Sent Font Color
Displays Camera Preview
When Hovered
Visible Menu Button (Humberger Icon)
1 more item...
Visible Layout Button
1 more item...
Visible Camera Button
1 more item...
Visible Microphone Button
1 more item...
Visible Share Screen Button
1 more item...
Visible Leave button
1 more item...
Visible Pin Screen Button
1 more item...
Predictions
Header
Messages
Should have Direct Message to Specific participants
Body
Meeting Code
Should have copy meeting code during Video conference
Should be automatically generated by the System
Clicked
Should copy meeting code to Clipboard
Invite Link
Should have copy link during video conference
Should be automatically generated by the system
Clicked
Should have copy invite link to Clipboard
Footer Displays
"QuaranTeams © 2022 • Developed by jericNuez"
Version 1.2.1
Animated picture
State
unclickable
app title
QuaranTeams
unclickable