ABOUT THE PROJECT

Frontstage is a place for live events. Bringing the experience of offline events online. You go to an event you can go to any stage and see the live performance on that stage, you can talk to random people at the event, you have your own group and you are also constantly seeing other people enjoy the event.

Bringing all of this to the online world is the main vision of frontstage. A quick stage switcher, a public chat room to talk to random people and enjoy, creating a private room with your friends and enjoying on a video call with them while also seeing videos of random people who are enjoying the event are some things that were added to make the platform a lot more in sync.

PROBLEM STATEMENT

Making online event attending in sync with offline event sync. Giving people a similar experience during the pandemic.

Market Research

The video streaming market is huge but not a lot of them are event-based. We tried to take cues from applications which people use on a daily basis to give them a similar experience in terms of not having a huge learning curve. The main applications of research were twitch and Instagram live.

Design Elements

ICONS USED

BUILDING A DESIGN SYSTEM

The platform is majorly video-based with overlays over it. Keeping this in mind colours were made vibrant and strong to have good visibility over video.

GENERAL COLOURS

THEME COLOURS

FONT FAMILY

PRE DESIGN PLANNING

USER JOURNEY

The user has two major flows on the application one to join a room and one to create a room. Everything else is right in front of the user as features.

The flow and the features were documented out in charts.

SUBMITTING A VIDEO FLOW PLANNING

One major decision taken from the product managers was that the video submitted will be only via phone. So the user could either open the feature via phone and directly record it but for desktop, the flow was planned as the user would see a QR code, which they can scan and open on their phone to record it once again.

The recorded and submitted video would appear on the platform on the right-hand side.

ROOM JOINING OR CREATING FLOW PLANNING

The user can land on the platform and move along to join or create rooms. The flow chart for the same was documented before but this was a UX flow for where each and everything would be appearing on the page and how the user can move along the flow.

DESIGN SCREENS

MOBILE SCREENS

The mobile screens were made with keeping in mind the user will always be seeing the video stream while being able to interact with other features and moving along the platform.

Keeping this in mind the designs were made with the top 40% as the video is the main area.

DESKTOP SCREENS

The desktop flow was drafted as planned in the ux flow. Keeping the private chat and video area on the left side and the public chat area on the right side.

Make it a simple concept of talking to the people who are close to you via the left panel and public people via the right panel. Differentiating both interactions was important to give users the freedom to do both without being overlapped.