Clubhouse

The Clubhouse app brings an exciting twist to social media, but it has a long way of providing a more intuitive user experience. Here I give it a shot!

With enough apps to fill the social media space, Clubhouse is a refreshing concept of interacting with people by voice. And with big names like Elon Musk giving it a shot, people are flocking to try the app!

In a nutshell, Clubhouse allows you to follow specific topics and based on that, you will be suggested rooms in which you can voice chat with the rest of the audience. It is like a podcast where everyone can chip in. How does it make it any different from other social media platforms like Twitter — is that you don’t have to spend time synthesizing your thoughts into (limited) text. Instead, you can be more impromptu and engage more efficiently with the rest of the audience.

The app is currently available only for iOS (as of Feb’21) and is admittedly different looking than other apps in generalLike the use of emoticons ✌🏽 in buttons and the friendly-looking “squircle” shaped profile pictures!

Squircle profile pictures (room interface)

But when it comes to intuitiveness and usability, it does have problems at certain spots. And upon sharing my thoughts on the app’s UX with my fellow mates (to prune the perspective bias), they too had some views on similar lines.

Hence I decided to collect those opinions and try improving the interface with few ideas. This article will only cover the “room” interface and the rest of the app in further articles.

The “Room” experience

The room interface is the heart of the application, where the users spend most of their time. It has a grid for profiles of those present in the room, and they are split between stage (speakers+moderators) vs audience (listeners). Anyone from the audience can raise their hand, and the moderator then allows that person to be on the stage and speak.

Current design

The overall interface of the room is spotless and efficient, as you get to see only the image and the first name of a person. But the problem starts when there are many people on the stage, and it becomes one hell of an experience trying to figure out who’s is currently speaking. This is mainly because the active speaker never comes up in the grid of profiles, and if that person is not visible in the viewport, you keep scrolling up and down in the stage area tracking speakers.

Accompanying this rough behaviour, there are other minor issues like you don’t get to see the room’s plan or the count of speakers/audience or

The current design for room

If you click a profile, there comes a bottom sheet (that’s what material design calls it) with the bio of that person and a set of actions.

The current design for viewing profile inside a room

Ideated design

I started by picking the most impacting problem at hand — tracking the active speaker and re-did the interface for the stage area.

Ideated design for room

Another missing factor in the current design is room agenda/information, and there is no way to access that while being in the room. This becomes a problem when people join the space in the middle (thereby missing the introduction by moderator), and they have no way to know what that room is strictly talking about.

Also, with people switching to languages that may be unknown to some in the audience, it can be an excellent addition to have the language(s) in the room plan/information and, in a way, regulate it. 💬

Ideated design for room agenda/information

Lastly, I made some changes to the profile interface as well to improve the visual hierarchy of the content.