FrontRow Chat

UI

•

UX

•

Interactions

2022

A custom chat environment with add-on features, that helps in better user engagement, and enhancing the learning experience on FrontRow App.

Custom features

On the Frontrow app, chat is the primary channel where students get to interact with each other. For this to become a more organic behaviour and useful for the students, they need to be engaged in interesting ways. These custom features are inspired from real world activities and games.

Antakshari

Antakshari using audio chat

Diss battles

Chat battle for rap students

Reactions

React with emojis

Message Threads

Discussions under messages

1 • Antakshari

This is a version of the real world Antakshari game, but is played as individuals rather than two teams. The feature is integrated into the group chat and the control is given to a moderator from FrontRow. The objective of the feature is to drive more engagement among students and finding good talents.

Moderator's side

The moderator can start the Antakshari from FrontRow web dashboard, setting a time and duration. They inform in the group prior an Antakshari event is going to happen.
When the event just starts, the initial letter is chosen by the moderator for the students to start singing.
After each song is completed, the moderator needs to change the letter by himself.

For the students

Once the Antakshari is on, students can only send audio recording in the group. The UI adapts to Antakshari mode by disabling regular features like text, media etc.
Students can record and share their song in the group. Other students can vote by reacting to the recordings. Each recording is tagged with the relevant alphabet.
Winner is selected based on the total no.of likes they received for their song(s), from the other students in the group.

2 • Diss battle

Rap battles are popular stages for amateur rappers to tune their skills and get exposure. Inspired from the same idea, diss battles are introduced. Rap students can diss each other in the diss battle events, and get voted from everyone. Helps the students to fine tune their lyric writing and dissing skills.

One can watch the battle before enetering, and decide whether to join or not

Students enter the battle by dissing everyone in the group

New joinees gets visibility in the group

Anyone can diss anyone by dissing back a message

Leaderboard can be accessed from the header bar

Moderator declares the winner based on total likes

3 • Reactions

Need of reactions is to quickly acknowledge messages, use as a voting method for live events like Antakshari and so on.
Moreover it brings a factor of delight and appreciation to the students

Tap and hold a message to bring up the reactions menu

4 • Threads

Since students use chat groups mainly for feedbacks on their performance and works, a lot of discussions can happen under one message. Individual reply mechanism will lead to a pretty long chat, and will be difficult to keep track of multiple topics. Hence the idea of threaded replies is a good add-on to the cause.

Start a thread by replying to a message using tap and hold

Threads have a different treatment with preview and count of the replies

For discussions inside a thread, a sub level modal is provided

Message cards

Message cards are the most prominent part of the UI. These are designed as much sleek as they can be, while giving enough breathing space and margins, to not over-crowd the UI.

Message types

UI components

The layout is a generic one made to accomodate different components. Whereas the components can change to multiple variants of their own, depending on the context of the chat.