Browser based video conferencing Interface design

A UX/UI approach of designing a video conferencing design using Twillio

Like every other design project, I started by asking questions to my stakeholders.

Why does this project need to happen?
Why are we creating a new video conferencing?
Who are my users?
What are their needs?
What are we trying to accomplish?
How does success look like?
How are we going to create this? On which platform?
What are my constraints?
What impact does it have on the business? and the users?

After gathering the necessary details I did user research to understand my user’s goals and needs, created sitemaps, wireframes, UI design, and collaborated with the developers to build this tool.

Experience the prototypes by just clicking the view prototype button

Below is the detailed description of my process and how I achieved the goal.


1 Designer, 1 Developer, and 2 Stakeholders

The Problem:

VDI is a startup incubator that uses Zoom business account for all its video calls with International founders, investors, coaches.

1. The cost of recording and hosting an hour-long video of over 100 sessions for a month is expensive.

2. Limitations: For example: If the host has to leave the call they should make another member as host and then leave the call.

3. Confusing User Experience: For example: Removing a member while they are in the meeting is hard on zoom calls.

Hence we decided to create our own web-based video conferencing.

The Process

  1. The Overview
  2. User goals & Findings
  3. The UI Design
1. The Overview

Here is the overview of the business and where the project is taking place?

VDI is an incubator accelerator which

  1. Connects international founders and Investors.
  2. Combines them as a team and puts them in incubator sessions.
  3. Connect with world-class mentors and coaches.
  4. Pitch ideas to angel investors & VC’s as a team
  5. Help them set up shop in Canada through Canada’s start-up visa program.

We at VDI have built a portal dashboard from scratch where founders & Investors can share documents and check their progress.

We want to have browser-based video conferencing inside the portal. In that way, we cut costs and customize according to our needs.

How a meeting is booked

Step 1: The operations team would check the availability of coaches and the attendees.

Step 2: Creates a meeting room on the portal.

Step 3: A link would be shared through email with the mentors and the attendees.

All they have to do is simply click the link and join the meeting.

2. User goals and findings

There are mainly two types of users for this video conferencing tool.

  1. Coaches & mentors (Host)
  2. Teams & members (Attendees)

Coaches & Mentors (Host)

Our coaches & mentors come from different backgrounds from former Canadian ambassadors to Professors to Industry experts. They come from different countries and ages from 25 to 60 years old. They teach the attendees about team building, marketing, business model, pitch practice and many other entrepreneurial sessions. 

As a primary designer, I have collaborated and designed pitch decks, presentation materials for all the coaches and mentors. I’ve also attended their live sessions and viewed their previous recordings to understand their presentation flow, behaviours and how they interact with the attendees.

As a result, I was able to understand their needs and goals.

Below are my findings of goals and needs for the host

User 1: Host goals

  1. Start the meeting.
  2. Admit, reject, mute, hide participant video, or remove participant.
  3. Mute audio.
  4. Hide video.
  5. View all participants.
  6. Share screen to present their decks.
  7. Chat with the team members.
  8. End call for all or end call only for them.
Here is a User sitemap of what a host would want to see and actions they are likely to take

Members & Team (Attendees)

Our team members (attendees) come from different countries and time zone. The members are Founders, Entrepreneurs, Investors, Accountants, Marketing experts and Experienced individuals.

The goal for them is to attend the meeting, gain knowledge and implement what they learned.

By attending these meetings they will get to learn more about, How to create business plans, how to create SWOT & Competitive analysis, How to pitch as a team and other important entrepreneurial skills.

User 2: Attendee needs

  1. Open the link from the email to join.
  2. Wait to be admitted to the meeting.
  3. Mute audio.
  4. Hide video.
  5. View all participants.
  6. Share screen (only if the host admits).
  7. Chat with a team.
  8. Leave meeting.
  9. Share meeting link.
Here is a User sitemap of what an attendee would want to see
3. The UI design

After finding out the user needs, I started by doing wireframes and shared them with the team to ensure that I am on the right track.

Initial wireframes shared with the designers, stakeholders and developers to ensure feasibility

Here is a recorded Sit back and enjoy the experience of how a host would operate this platform

Screen recording of the host view
Screen recording of the participant view

Goals Achieved and Takeaways

The goal for creating a browser-based video conferencing tool is to replace zoom and start using our product. It wasn’t a smooth transition. We faced a lot of technical issues such as audio, video, adding or removing team members and other issues. The development team did a great job in handling the problem and resolving it.

However, we did achieve our goal by launching the product to our clients and it is used internally for our everyday calls.

This project taught me that designing a product is just 20% of designers’ jobs and 80% of developers’ jobs. I closely collaborated with developers in discussing the design problems and explaining the design decision according to user needs and goals.

The design which we see now is the neither first nor the last version. Design is an iterative process and we are still adding more changes and making it user-friendly and look better.