How I could’ve been a billionaire by “accidentally” creating a Clubhouse-like app for a Design exercise before Clubhouse was a thing!

This article explains my take on a design brief I was given as my takeaway assignment for the role of a UI/UX Designer.

You have full right to choose not to trust me when I say I designed this app/concept before I had any clue about Clubhouse. I hail from India and being an Android user for almost three years now, even though Clubhouse was around when I was asked to do this exercise, I had no clue what it was, how it operated, or what are its features. I didn’t even see the glimpses of the same. At the same time, I’m also not saying folks at Clubhouse copied me (Just Kidding 😜) because this is the first time I’m making this assignment public. This was an assignment given to me as a takeaway design exercise and I was given 8 hours to research, design, and document. Prototypes were optional and I chose to not do as most of the interactions were quite obvious.

Spoiler Alert! I did clear the round. My assignment made the cut.

Brief

A mobile app that allows you to voice-chat with someone interested to discuss a similar topic of interest.

I read the brief twice or maybe thrice even and not to divert or wander off with many ideas I had it constantly kept open on another screen.

I wanted to keep this app very user-centric and technologically practical, for which I did the following studies:

1. User Interview and self retrospection
2. Competitive study

Ideas

I started by looking at the concept of podcasts. Why you ask? because podcasts are audio-only and I love to listen to them while I’m working. This led to another idea that what if there was a service where I connected with my friends and we worked while talking. Just the way you do at office when this world wasn’t pandemic struck.

The second concept I wanted to base it on was an idea of just walking in your office and stopping by a colleague’s cubicle/workstation for a quick chat or meeting them over for a tea/coffee.

I wanted the app I’m designing to be that simple, Intuitive, and not at all demanding/screaming for your attention. I started with some competitive research.

Research

I checked some of the following apps for inspiration (inspiration nowadays is blatantly copying stuff. Is it just me or anyone else feel the same? 😝):-

1. Google Podcast:- Really neat UI. I love the segregation of podcasts according to genres. Makes it really easy to find what you are looking for even when you don't know what you are looking for.
2. Zoom:- I especially love the idea of having breakout rooms within your session. It is like having a corner with your amigos inside an office. This concept of breakout rooms has shaped my end product immensely.
3. Facebook live, Youtube live:- One of my favorite podcasts to listen to while working is “The Internet Said So”. It is a podcast by four friends, coming together to talk on a random topic. Their live Youtube sessions feel like you are sitting with friends and having a casual conversation. More often than not, my parents have asked me why am I talking to four random dudes over a video call (it feels like that. Trust me). I wait every Tuesday for the new episode. This has inspired setting up a scheduling feature for upcoming live or recorded podcast sessions.
4. Discord:- Absolutely head over heels for the UI and UX of Discord. I love how they have handled the experience around a user being part of multiple channels and how easily she/he can navigate between them. I also like how streams are broadcasted over voice channels and the different roles participants have within that server. Again, gives a sense of live room hangout.

Jumping straight into user research and understanding their pain points.

User Research

I tried to understand what the user’s goal might be within the brief that was. They are as follows:-

• Find people with common interests

• Voice chat with people on certain interests

• Build a community of people with similar interests

Understanding the Users:- Interviewed someone who would love a service I was aiming for and conducted self ethnography to note down the priorities, requirements, and pain points for each one:-

• Looking for rooms or discussions as per interests

• Explore the rooms across the world

• Inability to start a conversation

• End up not speaking in public groups

• Not getting intimation about upcoming events/talks

Categorizing Users based on research:-

Active Users:- Users who are actively looking for discussion rooms around the world

Passive Users:- Users who are listeners and occasional speakers

Building a Persona

Persona helped me to focus on a certain user case, motivations, and requirements

Introducing Rohan (see what I did there? 😉)

Rohan is a podcast enthusiast. He loves listening to discussions on world issues and feels as if he could contribute.

He also wants to be a speaker along with his friends and wants to reach out to the larger audience

Goals:-

• Appropriate discussion rooms as per his interests
• Contribute to the discussions
• Have a voice discussion with his friends

Pain points:-

• Finds it hard to break the silence
• Find people with common interests
• Difficult to contribute within large groups

Based on the persona, I tried to formulate a User story and App features according to that.

Rohan’s Story

Listing down app features

Features to be included in the application

Task flows to navigate the app

I know it is not essentially how a task flow would look like but this is the best I could do, given strict timelines of which I have contributed a major portion to user research and feature ideation.

Jumping to designing an actual app now.

Information Architecture

Planned the layout of the application. Please excuse my poor handwriting.

Information Architecture which aided the wireframes and the final app designs

Wireframes

Thinking back to Rohan’s main goals, I sketched the screens for the app.

Some of the main screens of the app

Identity Design

One thing I absolutely love to add to the assignments even when I’m not asked is to design a logo and branding for the application. I enjoy punny and metaphorical app names. Taking inspiration, I named my app as follows:-

App logo ideation

Final Screens

They say when in doubt, use blue. Given that I was running out of time, I didn’t put much time into defining the UI aesthetics of the application. I used a variant of blue that was not Facebook, Twitter, Linked In, etc. Below are the final app screens:-

Interests and Home screens

1. Filter your feed with your interests
2. Voice chat rooms
3. Tags for reachability and better search functionality
4. Find like-minded people all across

Screens for Voice Chat Room and Baton Circulation

1. Some of the Room specifications. Rooms can be public or private
2. Icebreaker questions for people to start discussing. Moderators can change them as and when the conversation in the chat room takes a different turn. This is to help people joining, later on, to know where the talk is going on
3. Ongoing questions which the members might be asking
4. To avoid overlapping of people talking, pass the baton feature allows moderators to start the circulation of baton amongst the attendees, each person gets the baton, which prompts them to speak. If they don’t want to, they can pass. If they are inactive, the baton stays with a person for 10s before it gets passed on to next. Baton also pushes people who are slightly uncomfortable to speak up and share.

Room creation screen

1. accessibility of your voice chat group:
   public:- anyone with similar interests can access
   Followers:- only your followers can access
   Private:- A private room with people you select
2. Assign roles to the co-speakers
3. Repeating voice chat event, for which you can select date and time (a recurring event)

That was all from my side. It was an 8 hour, jam-packed design sprint which had me on my toes throughout. It was a great learning for me and I will try to communicate some of the main lessons which I will take along for bigger projects.

Learnings

1. Constraints are good, your best friends even:- Setting constraints for yourself is essential. Constraints made me not wander off wild with the plethora of features. This helped me focus on designing what was asked and tick off all the essential checkboxes.
2. Cover that extra mile only if you have time:- This stems from the above point. Sticking to constraints and planning my time ahead of jumping right into the assignment allowed me some time to design and name the logo and application. The jury really enjoyed my take on it.
3. Make sure you do what is asked:- Read the brief and keep reading it from time to time. It’s not about beautiful UI, it is about delivering what is asked. I consciously kept checking brief and deliverables that were asked of me, I make it a point to write down all the necessary points for better understanding.

Again, as I write this article, Clubhouse has taken over by storm. I’m a fan of what they have done and spend most of my free time on it listening to random rooms, sometimes contributing, and sometimes just having a chat with friends. It feels like a breeze and a much-needed service in the world we live in now.

Thanks for reading this case study! I would love to hear your thoughts, feedback, and suggestions on it. I would love it if you can tell me if my design process is healthy, as I feel I spend a lot of time on research and almost all the time end up rushing through converting insights into interfaces.