Looking For Fashion?




Exclusive App for Webinars — UI UX Case Study


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 video as a media format and come up with a mobile app design which uses it interestingly.

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 Virtual Scene would be the right approach to this problem.

What is Virtual Scene?

Given the current 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 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.

User Review for Event Brite on PlayStore

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.

Remainder SMS for BookMyShow’s Virtual show

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.

Confirmation mail for BookMyShow’s virtual concert

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.

The login would be preceded by onboarding screens.
User can switch to sign up from login right after onboarding.

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

Some of the wireframes I created before moving to design them on Figma

Branding

Logo

Final Logo (L) and logo iterations before settling on one (R)

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

Few Screen Iterations example

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.

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 Chikkara for his guidance and Chethan KVS for his valuable feedback based on which I improved the design.


Exclusive App for Webinars — UI UX Case Study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.