Clubhouse app could pop more with a better UX

So, there’s a new app in town for iPhone users that seems to be rising in popularity every single day. If you haven’t heard about it yet, it’s called Clubhouse. It is currently an invite-only mobile application that allows people from all over the world to essentially communicate and connect. Even your favorite celebrities.

I would be lying if I said I wasn’t a little excited when receiving an invite to join the app. From an outside perspective, it just seemed pretty exclusive to join. However, once I downloaded and went through the app, I realized a few areas within their features and elements I didn’t understand right away. So, I decided to do a quick redesign on those areas where I thought could be improved.

Which Room?

The home feed mainly displays the active rooms that are available for you to join. What I like about it is that Clubhouse would place the rooms that host any of the people you follow at the top of the feed. That way, if there was someone you follow that you admire and want to join the same room as them, you can join in right away.

Now about the design, my first initial thought was how the visual hierarchy was structured. A lot of the different texts seemed to relatively be similar in size and there wasn’t much separation from the name of the room and the names of the people. My second thought was not understanding what the bottom right icon of the dots was for. Didn’t think touching those dots would bring you a list of your friends or mutual followers available to create a room with.

Updates:

1. Increased the font size of the room name and decreased the font size of the names of the people to bring the focus more on the title of the room than the names of the people.
2. Added a thin line in-between the room name and names of the people to show a more clear look at the different sections within those elements.
3. Names that are in green indicate the people you follow.
4. Changed the bottom right dots icon to a more familiar users icon look, so users will know that icon will lead to a list of active friends or mutual followers.
5. Changed the little house icon to a blue color because at first, I thought it was an icon representing rooms, but it indicates that there is a larger group or network of people under that name. Because the “Start the room” CTA is in green, I wanted to switch colors (another color they use on their app) to differentiate the representation of a room and a group or network of people.

Who’s Talking?

Once you’re in a room, you are now able to connect with anyone in there for the most part. You can listen to people in the high-ups and learn the ins and outs of whatever the topic of the room is. It also displays followers followed by the speakers. In case you’re not able to connect with any of the speakers, you now know and have the opportunity to connect with mutual friends or followers of the speakers.

Okay, now back to the design of it. With a room of A LOT of people with sections that are not clearly divided, it can be confusing on who the speakers are, who the followers followed by the speakers are, and who are just listening in. Everything seemed to be laid out one after another without really giving a clear differentiation of elements and labels.

Updates:

1. Added a top header section in green color (to keep consistent with the green color they use) for the name of the room to clearly understand what the room name is.
2. Added a subheader for the speakers/moderators because there was no label to show who the main speakers of the room were.
3. Everything below the speakers/moderators would be the followers followed by the speakers and the people listening in on a very light gray background to show a separation between the main speakers’ section and the rest.
4. Updated the “Followed by the speakers” text to black, so it displays more clearly.
5. Added a red outline over who’s currently speaking because the app right now shows a light grayish color on who’s talking, which is hard to catch right away in a room with a lot of people. Red is visibly easier to notice and can bring the attention of users faster than the current light grayish color.

I’m still very new to the app, so these are just quick little things I noticed right away. However, I did thoroughly enjoy redesigning this and thought this was a very good practice for me to work on the consistency and visual hierarchy of an app. I think this app can truly set a positive direction for a lot of people if used the right way. It is definitely a different branch of how social media can evolve.