the framework and the design
The user journey starts from opening the app to start the call or to join an existing call. Once this action is taken, the user is directed to waiting room where you can test your video, audio, mic etc. Number of people who are already in the meeting room is also shown at the waiting room, just like you would peep into an actual meeting room (wink, wink). You can also see if anyone is sharing their screen. The offline signal at the top with red dot indicates clearly that you are not inside the meeting room and the mic and camera are not streaming data.
Once you enter the meeting room, the number of people in the meeting, number of screen shares etc are clearly marked. The front panel has 4 display cards, the priority for display is based on whether the user is speaking, sharing video or screen. The cards are highlighted for the person speaking. The bottom panel has basic functionalities like mute, camera off, adding more users, call drop and a kebab menu to open up extra menus.
The extra menu has change host, chat, screen recording and screen sharing functions. The "i" symbol just above the menu card will show tool tip on what each button does. This ensures, no one has to be confused about how to use any functions. The initial design also had a step-out function, which would allow the user to step out to the waiting room incase of emergencies. This was later removed after user testing.
Once the call-drop button is pressed, you will be taken to exit screen. From here you will be able to enter back to the same room or start or join a new call.
I usually draw the wireframes by hand or sometimes dribble on my sketch book to keep the flow in my mind.
Since this was a competition and was running on a tight schedule, I could not make the low fidelity wireframes. I jumped directly to high fidelity wireframes using Adobe XD. Following are some of the sample designs.