Everyone felt very isolated and tired of maintaining social distancing until Clubhouse breaks this isolation by providing voice based online social place for many people. The project aims to expand mobile into web version.
Sketch, Adobe XD, AfterEffect
Feb 2021 - July 2021
It is the most hyped app of the year so far, but no desktop version yet
After testing the app for few weeks, many users have very limited usage while working or studying. My focus was to provide beyond input for all users while using desktop that mobile can't covered.
With one tab, you have to join the room without knowing room information
Hard to keep track on closed friend's activity when there are many people in the room
Understand the limitations while using mobile and transform it over to desktop
Provide less screen time, but same input for all users
Discover attractive mobile app features to strength desktop version more
#1 Mini Widget Player
Do many other tasks while using Clubhouse
Takes only little space, but can mute yourself, raise hands, invite friends, exit yourself, and switch over to multiple pinned rooms
#2 User Confirmation
Want to avoid yourself from misjoining?
Can see all the room information/detail in the confirmation dialogue box and decide to join the room when you are fully ready
#3 Discoverability
Keep track on your favorites more faster
Easily track your favorite friend's status on the right side bar as well as multiple pinned rooms
Feature comparison with close competitors to see new opportunity area
Short survey to discover the demographic trends for targeted user
One on on interview to find out current limitations while using the app
I conducted basic feature comparison with close competitors, and notice that all the competitors already have desktop version
Desktop Feasibility
After I interviewed three active Clubhouse users to discover current difficulties, 3 out of 3 participants were interested using web version of Clubhouse only if they can decrease their screen time.
Main Interview Questions
Users Want
In design process, I divided my potential users of Clubhouse into two different groups: new and existing user and sketched story board to imagine how real time users will be using web version of Clubhouse.
I mainly had many user testings and iterations over landing screen and mini widget player to simplifying a complex information hierarchy.
#1 Landing Screen
I had to consider and relocate important components on the left/right side bar. On the mobile version, users can only find friend's status on the right side bar. Since it's a web, I had more rooms to relocate important components like schedule, multiple rooms, and friend's status.
1st iteration
Final design
Hard to focus on the middle page, easily get distracted by left/right side bar
Can easily find the schedule in the middle as well as multiple rooms through right side bar
#2 Mini Widget Player
I tried to locate categories that users often use while listening to Clubhouse on the mini widget player.
1st iteration
Final design
Need to be smaller and unnecessary to show "current speaker"in the mini player to optimize more space
Use drop down to access multiple rooms through the mini player as well
Adding too many visual elements might disrupt the existing visual hierarchy so I tried my best to stay in same visual UI as mobile version.
Challenges & Takeaways
Initially, I struggled to discover what users really want to see in the web version. In order to find design hierarchy for a brand new web version, I had to go over many user testings during the research as well as design process. Then, I realized that many current users are prefer to use it while working or studying. Now, it is resolved and become effective by using mini widget player to decrease their screen time.
.svg)