Exclusive App for Webinars — UI UX Case Study
This case study is part of a design challenge in which I was asked to explore live streaming as a media format especially in the current situation with COVID-19 and come up with a mobile app design which uses it interestingly. The idea I came up with was an app exclusively for webinars.
You can check out all the screen designs on Behance.
Design Process used
This is the design process I used for this particular project.
Duration of the project: 14 days
Ideation
The problem statement was for me to come up with an idea which puts live streaming to good use. After brainstorming with different ideas, I concluded that an app exclusive for webinars would be the right approach to this design challenge.
What is Virtual Scene?
Given the current COVID-19 situation, we are seeing an exponential increase in the number of webinars conducted across the globe. These webinars have removed the geographical barriers for participants and anyone can tune in to a webinar from anywhere. People usually look for webinars in various events and ticketing website or get to know about them through various social media platforms. They would register for the webinar in one app and would get a link to a different video communication app.
No app exists in the current market which combines events and ticketing services with that of live video communication. That’s where Virtual Scene comes into the picture, it bridges the gap and eliminates the necessity of two different apps. Virtual Scene is a platform for users to register and attend any webinar, all in a single app. It provides a live chat facility during the webinar and has a dedicated discussion forum separately for each webinar where people can exchange their thoughts and discuss them.
Research
Competitive Analysis
As I had mentioned before, there isn’t any app in the current market which would function the same as Virtual Scene. So I decided to study various already existent event ticketing apps and platforms as well as apps which use live video as a medium in them. In the process, I tried to understand why certain things were done in a certain way in those apps.
For ticketing apps, I chose to study Event Brite and BookMyShow. Whereas for live streaming, I decided to look at YouTube Live, Instagram live, Google Meet and Zoom ( Zoom and Google Meet don’t just function as 1-n broadcasting mediums but also as video conferencing apps)
Below are some of the screenshots I had taken while using those apps and collected from UISources, Mobbins and Play Store.
Event Brite currently is doing a great job being an event ticketing app right now but users have to wait for a mail from the organizer with the live stream which might tend to go unnoticed in their inboxes.
The users sometimes did not know how to enter an event or webinar. This was one of the pain points that people had mentioned in their PlayStore reviews.
Recently, BookMyShow had also started selling tickets for virtual shows. It followed a procedure similar to Event Brite. After registering for a show, the user would be sent an Instagram link (if it is a free show ) or a Zoom link ( in case of a paid show ) through SMS as well as an email.
YouTube and Meet, designed and developed by the same company, had a similar approach to live video player with live comments below the video player. Whereas, I found Instagram Lives relatively informal and thus unsuitable for webinars.
None of these live streaming apps or ticketing apps had a discussion forum for users to discuss the event or let users ask questions about the same. This was something I could use to my advantage and provide as a feature of Virtual Scene.
User flow
These are the ways that would be taken by the user to complete particular tasks or navigate through the app. I have divided them according to the tasks. By creating the user flows, I got to know the number of screens I would be required to design and what are features I would be including in the final app design and what are to be skipped.
These are the major flows of the app.
For the scope of this particular project, I haven’t considered payment and premium user flow. I hope to work on those parts of the project soon.
Wireframes
Branding
Logo
Colour Palette
Typography
Inter is a free and open source font family whose project is led by Rasmus Andersson, a Swedish maker–of–software living in San Francisco.
Design Iterations
Each screen had multiple iterations before deciding on the final design. This stage in the process also included experimenting with the font, colour and the logo. A total of nearly 120 screens were designed and iterated before finalizing on the 34 final design screens.
Final Design
Onboarding
Every app requires a strong onboarding to increase the likelihood of turning new users to permanent users.
I had decided to go ahead with a simple onboarding through which user gets to know the main functionalities of the app.
Login and Sign Up
Right after the onboarding, the users would have two choices in front of them: Login or Sign Up. They can also decide on whether they want to upgrade to a premium plan i.e. which gives them access to host events or skip to proceed with a normal account.
Home, My Tickets and User Profile
The home screen of the app would contain featured events which would be swiping image carousel and webinars would be displayed in categories selected by the user as their interests.
In My Tickets, events are categorized into two: Upcoming registered webinars and Previously attended webinars. The user would be directed to the respective event page when they click on the event cards ( In the home screen as well as the My Tickets screen ).
A user can change his profile details, update his interests and upgrade to a premium plan from the User Profile screen. A customer care chat feature is also available for users to address their grievances.
Search and Filter
The search feature can be accessed from the home screen and the user can filter through their search by date, the topic of interest and cost. There is also an option for viewing only free events.
Event Pages
This is the whole flow of event page from registering for the event to joining it when it’s live. The cancellation button would be disabled when there are 24 hours left for the event to go live. The discussion forum can be accessed from here by the registered participants.
Discussion Forum
The discussion forum is an exclusive feature for the registered participants which can be accessed from the event page. A user can create a thread to ask questions about the event or discuss the topic related to the event with fellow attendees. Each event has a separate dedicated discussion for it.
Video Player
The video player can be accessed from the events page when the event goes live and users can chat with their fellow attendees. When the event ends, the user is given an option to rate their event and provide feedback or suggestion.
Rather than leaving the empty states as blank screens, I decided to use free to use illustrations by Stories published on Freepik.
Conclusion
Due to time constraints, I had to choose what features to include in this project and what can be left out. The scope for this project expands even when one starts to work on the premium user’s features. That’s something I aim to work on in the future as well as the payment flow of the app.
With a deadline, rather a short one here, a person has to effectively plan their way through the project, that’s what did here by allocating each process enough time for me to work on.
Thank you Abhinav Chhikara for his guidance and Chethan KVS for his valuable feedback based on which I improved the design.
Do clap if you liked this case study. You can reach out to me on Instagram or Twitter in case you have any questions/feedback or just want to talk about design, I am up for it. Btw, try holding the clap button for a few seconds. Boom, 50 claps! 👏
