Clubhouse
Clubhouse is a social audio app for iOS and Android where users can communicate in audio chat rooms that accommodate groups of thousands of people. Originally designed for podcasts under the name Talkshow, the app was rebranded as "Clubhouse" and officially released for the iOS operating system in March 2020.
Project - Website Design
Duration - 3 Weeks
Team - C Johnson, Devan Guerra, Marcel Zaleski
Tools - Figma, Google Suite, Photoshop, Adobe Color
Role - Design Lead, UX/UI Designer
The Challenge
A year after the app's release, the number of weekly active users was greater than 10 million, but the user base declined 21% during three weeks from late February to early March. During the pandemic, online gaming became more prevalent as gaming became a popular medium for social activity initial stay at home orders, lockdowns, and social distancing. Clubhouse wants to expand into the online gaming market. However, just how that will be done has yet to be considered. Clubhouse is also seeking opportunities to add a service experience to its overall project.
Problem
Users need a comfortable and encouraging platform to participate in conversations to build knowledge and a following about similar interests.
Solution
A one-stop social platform where users can communicate through live audio and chat rooms. Content creators can create rooms that strike users with similar interests, allowing them to join into the conversations. This also includes building communities, engagement, and connections.
HYPOTHESIS
Users want to be able to communicate with online gamers through a web based application.
RESEARCH
User Interviews
We organized 6 interviews and 6 surveys in order to learn more about gaming culture and habits. We synthesized our results through affinity mapping and I went ahead and pulled out 3 key takeaways from this affinity map:
1. Users need to communicate with other gamers.
2. Users want to find other gamers who have similar interests.
3. Users need a beginner-friendly space to learn more about their favorite gaming content.
Survey Results
DEFINE
Persona
We created two personas based on our research synthesis. Steven is our primary persona and represents the gaming content creator Clubhouse is hoping to reach and build a positive experience for.
Competitive & Comparative Analysis
Clubhouse vs Discord vs Twitch
With Clubhouse’s expansion into the online gaming community, we did extensive research on both competitive and comparative gaming applications. We wanted to mainly focus on gaming apps to better understand our users’ needs, pain points, and goals.
Steven - “Gaming Content Creator”
Background
Steven is 18 years old and a full time student majoring in engineering. When he is finished with his school work, he enjoys spending his free time playing video games with his friends. He also formed his own gaming community from live streaming on Twitch. He loves to discuss new updates on his favorite games with his followers on and off stream. He has thought about making a Discord server for his community, but he has a hard time scheduling content with classes. Finding a time to speak with his following outside of text chat is the ideal way to connect further.
Need & Goals
One platform for all social communication
Access to tech updates and game news
Expand his social network
Collaborate and connect
Pain Points
Build an engaging and loyal following
Unfair revenue split between platform and creator
DESIGN
Sketches
Before we began sketching, I led my team in reviewing Clubhouses’ iOS app and Discord’s web application. We concluded from our user interviews that a web-based application is the best choice as the target device because the majority of our users play online games through a PC, rather than a console. We wanted to create a space for both new and experienced users. We had similar designs such as a global sidebar and navigation bar, as well as horizontal layout of different cards, or “rooms.”
Wireframes
For our low-fidelity wireframes, I designed some frames to help build a foundation of our designs. Then I organized and consolidated with my team to finalize the website designs. I decided on the size and arrangement for the log-in and sign-up pop-up screens. I chose this to reflect Clubhouse’s current sign-up process as well as keeping into consideration of user visibility.
We agreed upon a sidebar that allows Steven to be able to view his profile, following, his current rooms, and recommended rooms. We also wanted to keep Clubhouse’s app features by including the necessary icons onto a global navigation bar.
MID-FIDELITY PROTOTYPE
Usability Test
Goal
Users will make an account in under a minute.
Logistic
Remote testing
Unmoderated: Users are given a prompt and complete the task independently.
Participants
Gamers & Non-gamers
Tasks
Create an account.
You are You are a content creator looking for a space to connect and interact with your followers. Please create a room for your followers to interact with you.
Use the Clubhouse site to look for some new content you want to check out.
Results:
We conducted usability tests on our prototype. Our targeted users were gamers & non-gamers. One of the main tasks was to make an account for clubhouse. 6/6 users were able to create a new account. The sign-up button discoverability was successful due to the button’s size and text visibility and prominence.
Our next major task for our users was to “create a room” button. This task was difficult for our users bc 0/6 users were able to locate the create a room button bc the button is only located in the profile page. Most of our users initially clicked on the side bar’s “my rooms.”
Key Takeaways:
A recommendation will be to add the button to the global navigation bar to allow users to create a room from any page.
Some feedback that we learned from our usability tests include a universal create a room button, audio/cc buttons, and dark mode since 100% of our users prefer using dark mode for gaming.
“As a gamer, I would use this myself. The popular games that I play are on the front page so it’s easy for me to access. ”
— Andrew Nguyen
DELIVER
Iterations
Universal “create a room” button
100% of users prefer dark mode
Clubs/room/houses onboarding text too small
Sidebar expand/collapse button change
Audio/cc “buttons”
With the iterations in mind, I facilitated the tasks to my team members and also helped Devan, my teammate, on the design style guide. I also monitored the design iterations for consistency and standards of our design style guide.
Next Steps
How to continue Clubhouse?
We presented to a group of 24 designers and I’m proud with what my team and I accomplished in span of 3 weeks. There are many features from the app that was not implemented in our website design as we prioritized the main feature of communication and engagement with users.
To further work on Clubhouse, I aim to focus on iterations on Clubhouse’s high-fidelity prototype through usability testing. Some more good direction for the future are light and dark mode toggle, responsive mobile app design, monetization opportunities and capabilities, develop features from the app, and revenue distribution system.