Clubhouse Reactions

Web Design
Client
Clubhouse
Project Type
Concept, UX Design
Tools
Figma, Rotato
Overview
Clubhouse is a drop-in audio social networking app that enables people around the world come together to talk, listen and learn from each other in real-time. Users are able to chat with the people they follow, or hop in rooms as a listener and hear what others are talking about. To join the conversation in a room, users are able to use the hand raising feature and moderators in the room (identified using the green bean) are able to invite them to speak.
My contribution
As a user of the Clubhouse app, I noticed that reactions to statements during conversations were indicated by flashing the mute/unmute icon. The same reaction was used to express agreement, disagreement or to indicate the user's desire to speak. As a result, it can be unclear what the flashing mic was indicating. To solve this problem, I had an idea to add a feature that provides the users with carefully selected emojis which could be used to express the different emotions they were hoping to express.

To this effect, I browsed through the emoji library and selected multiple emojis that properly convey a wide range of emotions. By using these reactions, users are able to have more interactive conversations in rooms. From games to conversations about investment and job opportunity, users are able to add the interact better without having to flash their mute icon repeatedly.

A second problem was identified during the design process - where do we place the reactions? This was as a result of the fact that a celebration was usually shown on the user's profile during the first week of them joining. The solution: I decided to place the icon before the user's displayed name. This provided the space required for the placement of the reactions.
How to react
When a user is in a room and is on stage as a speaker, an emoji icon are is shown at the bottom in addition to the "Leave quietly", "Ping" and "Mute/Unmute" icons. To react to a statement made by a fellow speaker, tap the emoji icon area and a modal pops ups with the chosen emoji. Choose a reaction and it appears on the bottom left of your profile image. The last reaction used appears in the emoji icon space.
The fun doesn't end there. A few nifty extra functionalities were added to make it even easier to use and further improve user interaction. To use the last reaction without launching the emoji modal, the user can simply double tap the emoji icon. To express a more intense reaction, the user can press and hold the emoji icon to flash the chosen reaction.
Final UI Design
After designing the UI in Figma, a demo video was created using Rotato and After Effects to show the different ways the reactions could be used.

Like what you see?
Drop me a line!

I'm more than happy to answer any questions or discuss new opportunities so feel free to reach out to me any time at

You can also fill the form below and I'll get back to you.

Thank you! Your message was sent successfully.
Oops! Something went wrong while submitting the form. Please try again.