Part of the Club
Redesigning Clubhouse from exclusion to Inclusion,
Making sure everyone can be part of the conversation.
Context
The new hit audio-social app that everyone wants an invite to.
Clubhouse reshapes social media as we know it by fostering real-time conversations in virtual "rooms".
What?
Clubhouse is an invitation-only, drop-in audio chat social media app. There are clubs you can join, and “rooms” in which you can go listen or speak in. Think of it as a live and interactive podcast.
Who?
- First released to influencers, leaders, and venture capitalists.
- Only launched to Iphone users.
27.4% of smartphone users (Statistica, 2022) - Entry requires an invite from an existing CH user.
When
Launched in July 2020, five months into the global pandemic when most people were socially isolated.
It reached peak popularity having grown from 2 million users in January 2021, to 10 million users in early February of 2021..
How
To manage growth during its beta phase, Clubhouse adopted a limited invite-only system.
The scarcity principle leverages this network effect to create intrigue, drive engagement, and maintain growth.
Despite my exciting experience, my visually impaired friend who I invited onto the app faced many hurdles. Leading me to investigate Clubhouse's accessibility challenges.
After a month of beta use, I heard, observed, and experienced many user frictions, inspiring a college assignment focused on redesigning two key screens of an app. My focus was on inclusivity, especially catering to people with visual and hearing disabilities, and neurodiversity.
User Problem Statement
Clubhouse lacks critical accessibility features which leads to frustration and exclusion of users with visual, audible disabilities, and neurodiversity.
While some early-adopters are forgiving of the UX issues, many users with disabilities face challenges fully participating in Clubhouse conversations with ease. This results in feelings of exclusion, frustration, and a diminished sense of belonging within the Clubhouse community.
Business Problem
Clubhouse's lack of crucial accessibility features reduces user engagement and limits market reach, posing a significant obstacle to sustainable business growth.
Failure to address accessibility excludes users with disabilities, preventing them from fully engaging with the platform. With 15% of the global population living with disabilities, this oversight alienates potential users, affecting retention and market reach. Improving accessibility is crucial not only for user satisfaction but also for Clubhouse’s sustainable growth and long-term success.
Solution
Introducing an Accessibility Tab empowering users to personalize their room experience for their needs, fostering inclusivity, autonomy, and engagement.
Speaker Zoom
Visually scales and highlights the current speaker, making it easier to identify at a glance.
Closed captions
Auto-generates live transcription of conversations, allowing users to follow discussions without relying on audio.
Speaker Name
+ More Solutions
The above were the focus scope for accessibility, but the solutions extended into other areas of the apps experience.
UX Audit
Identified usability issues according to WCAG's 4 broad principals: perceivable, operable, understandable, and robust.
Before conducting user research, I completed a UX audit using WCAG to identify any existing usability issues and gather insights that could inform the direction of the future research. While WCAG was originally designed for web content, many of its principles can be applied to mobile apps to ensure they are accessible to users with disabilities.
Old Hallway
- Not enough spacing for finger pad
- Room title & stage does not stick to top of view when scrolling audience
- Static element: limited to viewing only 3 upcoming rooms
- No ability to scroll through options of future roomUnclear why these 3 rooms are featured
- Does not illustrate who is who or why their photos are showcased
- Limited to 2 pictures of the current room participants.
- Names that user does not follow does not provide value
- Makes user dependant on name-recall
- New users with screen readers drag their finger along bottom looking for standard bottom tab
Old Room
- Not enough spacing for finger pad
- Room title & stage does not stick to top of view when scrolling audience
- Low contrast and emphases (accessibility standards)
- Not accessible for low-vision users
- Too much visual clutter and icons can create cognitive overload
- No customization for room experience, engagement, and accessibility
- Icon to invite friends to a room lacks clarity
Main Problem Areas
A Clubhouse in need of a renovation
These were the four main areas of issues identified from the UX heuristic analysis.
Exclusivity
Lack of Accessibility. A lot of complaints, resulting in losing customers.
Bulky UX
Lacks a recognizable design, tries to reinvent the wheel.
UI Aesthetics
Lacks pleasant UI styling and polish.
Lack of Guidance
A new experience needs guidance for the user.
User Research
Combined observational studies and user interviews to gather qualitative data.
While engaging in discussions on Clubhouse, I often found that individuals naturally discussed the app and shared their experiences and opinions. My research began with observational studies and then progressed to more in-depth exploration through user interviews.
Observational Studies
Club hopped & listened to discussions to capture raw, real-time user insights.
Clubhouse was perfect for gathering open-ended, unobtrusive insights through contextual inquiry and naturalistic observation. This method was ideal for exploring diverse user perspectives, offering a mix of attitudinal and behavioral insights.
"The 15%” Club
Discussions focused on the disabled lived-experience. Many rooms discussed accessibility on Clubhouse.
Town Halls
Weekly open discussions, hosted by the Clubhouse team, where users shared feedback about Clubhouse which helped inform app updates.
New to Clubhouse
These rooms were held by seasoned users for the purpose of teaching new users how to navigate CH and answer any questions they may have.
General rooms
Regardless of the topic, users frequently discussed their pain points and suggestions for improving Clubhouse.
User Interviews
Uncovered specific usability issues and navigation experiences from six users.
I aimed to delve deeper into user experiences. I set up a private Clubhouse room for each interview, spending 20 minutes asking about their navigation in the hallway and room page, uncovering their goals, behaviors, and usability within Clubhouse.
Users Interviewed
2 users with disabilities
2 new users
2 seasoned users
Research Questions
Research Goals
Determine the inclusion and access barriers.
Assess if users can effectively navigate through the process using the UI elements.
Assess whether the content adequately supports users with appropriate language and interactions.
Analyze how the design measures up against user goals, business goals, project intent, and system or technical constraints.
User Interview Questions
- What was your impression of Clubhouse before joining?
- Was there anything in particular that sparked your interest in Clubhouse?
- What was your experience of first entering Clubhouse?
- How did you feel about your first stages of using Clubhouse?
- How did you learn to use Clubhouse?
- How do you usually use the hallway?
- What is your main goal when you're in the hallway?
- How do you use the information in the hallway to achieve your goal?
- Is there anything you often look for in the hallway that is missing or hard to find?
- How do you usually choose a room?
- What is your experience entering a room?
- How do you find listening to others in a room?
- What is your usual experience of being a speaker in a room?
- Is there anything you often look for in the room that is missing or hard to find?
- Is there any way Clubhouse isn't supporting your needs currently?
- What keeps you using Clubhouse?
- What makes it hard for you to continue using Clubhouse?
Affinity Mapping
Synthesized user feedback quotes, then categorized them into themes that highlighted common pain points and needs.
I extracted significant quotes and observations from the observational studies and user interview notes, synthesizing them into 40 data points.
I visually represented these points with sticky notes, assigning a unique colour to each user user persona.
I sorted the user's insights in groups by identifying common themes and patterns. Affinity mapping helped me understand the weight of users pain pain points per area and their relation to other.
Main Insights
When experiences don’t serve people the way they should, they adapt.
User Adaptations = Gold Nugget Insights
Users creatively supported those with disabilities by finding workarounds for missing accessibility features, highlighting the need for customization and support. The key insights lie in these adaptations. After analyzing data from contextual inquiries and user interviews, three main themes emerged:
Accessibility Issues due to lack of customizability
- Users who have visual impairments may experience barriers.
- There are no transcription features for users who are hard of hearing, to enjoy the app.
- Users find it hard to track who is speaking in the room due to lack of speaker emphasis.
Users are problem solving in leu of accessibility features
- Speakers are announcing their names before and after they speak to help listeners identify who’s speaking and make it clear when they are done to provide a buffer and closing for users who are not relying on visuals .
- There is no react feature for listeners to interact with the conversation without speaking. Users are tapping their mics on and off to signify applause or acknowledgment for speakers, which result in audio disturbances.
- There is a lack of onboarding and guiding UI, putting the responsibility on experienced users to teach new users how to use the app and Clubhouse specific lingo and etiquette.
Discoverability
- The rooms suggestions displayed on a user's “hallway” feel random and not personalised. There is no system transparency about how the feed is curated.
- Room cards have irrelevant and cluttered information that isn't supportive to help users to decide to join.
- There is a lack of personalization and customizability for users to control what rooms are visible to them, and which rooms are upcoming.
Personas
Developed personas to breathe life into the challenges and goals of the users in focus.
Step into the world of Clubhouse users with disabilities through these personas, meticulously crafted from user interviews and data analysis. These personas breathe life into the stories and triumps of the real individuals, empowering the design process with empathy, humanity, and insight.
Brainstorm
Brained up a storm of solutions for improving room accessibility and hallway navigation.
Leveraging insights gained from synthesizing affinity map from the user interviews and personas, I engaged in a focused brainstorming session to generate potential solutions for Clubhouse's accessibility and other UX challenges. This synthesis allowed for targeted ideation, ensuring that proposed solutions addressed the specific needs and pain points identified during the research phase.
I let the affinity map and persona synthesis outline my brainstyorming inspiration with some rapid sticky note actions. Then I organized them using 'How Might We' questions to refine and group together the ideas to streamline the storm.
After the brainstorming session, I felt the usual inspired but overwhelm by the many exciting ideas there were to explore. Ideally I would love to address them all but to stay on track and funnel the focus, I used a priority matrix to map out the priority and feasibility of each idea. The sticky notes in the right high priority and high feasibility quadrant became my official scope for thie project. This helped me allocate my focus and resources wisely and tackle the most important goals with clarity and determination.
Sketches
Streamlined the user flow, simplifying hallway navigation while adding customization options for room experiences.
The calm after the (brain)storm...
I created a rough idea of how I envision the flow from opening the app, greeted with an animation and then into the hallway we go. I wanted to simplify the hallway experience, stripping down the cognitive and visual clutter of too much info on each card and streamlining the room cards information creating more concise and clarity for the user to understand quickly what each room holds. Added the bottom menu for ease of discoverability in the cliubhouse eco-system. The room is also simplified with the addition of a bottom tab for a customized experience. I scribbled up what the potential transcriptuon and speaker zoom would exist both individually and together.
After sketching out various ideas for the accessibility tab, I delved into creating a wireflow (wireframe and userflow hybrid) to visualize the user interface and the user's interaction. This process helped me visualize users journey from opening the app to selecting a room, entering it, and activating accessibility features like transcription and speaker zoom, either separately or together.
Branding & Design System
Revamped branding with a polished yet playful aesthetic, incorporating modular design elements that prioritize accessibility.
The beta branding though rudimentary, held a promising foundation. Like a seasoned renovator, I carefully preserved the functional elements from the beta version, enhancing them with upgraded typography, a refined colour palette, and revamped components.
With accessibility being at the forefront: customability is essential. This led me to creating modular components that users can use to tailor their rooms experience to their needs. Injecting playful animations introduced a nuanced sense of fun into the brand's voice without sacrificing its credibility. The result? A visually upscale UI that seamlessly integrates cohesive elements for an enhanced user experience.
High Fidelity Designs
Reimagined the Clubhouse experience with intuitive navigation and enhanced accessibility options.
Loading Screen
A playful, welcoming animation featuring the Clubhouse wave icon, setting the tone for a smooth and engaging app experience as core features load.
Hallway
Browse rooms tailored to your interests. Filter by topics, clubs, preferences, more. Choose to join rooms now or schedule upcoming rooms to join later.
Room
Immerse yourself in real-time discussions, featuring intuitive bottom nav controls with subtle animations to enhance your room's experience.
Assist Tab
Customize your experience with accessibility features like speaker zoom, live captions, and audio cues, designed to ensure everyone can engage seamlessly.
Speaker Announce
Automatically announces new speakers when they begin talking, ensuring clear transitions and preventing speaker overlap for a smoother listening experience.
Speaker Zoom
Highlight and emphasize the current speaker with an enlarged profile display. Fostering a more intimate connection between speakers and listeners.
Live Transcription
Converts spoken words into real-time text, enhancing accessibility and allowing those with hearing impairments to follow conversations seamlessly.
Ping
Send instant notifications to friends or participants, inviting them to join the conversation and fostering spontaneous engagement within the community.
React
Express yourself with emoji reactions, providing instant, non-verbal feedback that enhances engagement in conversations.
Raise Hand
Signal your desire to speak to the moderators with a simple gesture, promoting orderly participation and ensuring everyone has the opportunity to contribute to the conversation.
Room tab in Hallway
Utilize all features while listening in a room, allowing you to effortlessly scroll through the hallway and discover new discussions without missing a moment.
More Solutions
After addressing accessibility gaps, then came secondary solutions: fun interactions to boost engagement.
Loading Animation
A playful, welcoming animation featuring the Clubhouse wave icon, setting the tone for a smooth and engaging app experience as core features load.
Listen & Browse
Continue listening, engaging, and speaking while in a room while viewing other parts of the apps interface
Reactions
Speaker zoom enhances accessibility by visually highlighting the speaker, aiding both those with low vision and those who are hard of hearing or have attention deficits to easily identify who is speaking.
Prototype
Tied it all together in an interactive prototype
The prototype showcases the welcome animation, hallway navigation, room selection, and customizable room features, creating a seamless Clubhouse experience that meets accessibility needs.
USER Testing Findings & Impact
30% increase in task completion rates
70% rise in satisfaction among participants with disabilities, validated the redesign.
User testing played a pivotal role in evaluating the effectiveness of the proposed solutions and gathering valuable insights from diverse user perspectives. A total of six users participated in the user testing phase, with four of them having various disabilities, ensuring that the redesigned features catered to a wide range of user needs.
Enhanced Usability
Participants noted improved usability, with a 30% rise in task completion and a 25% reduction in task time.
Empowerment of Users with Disabilities
The redesign's customization options and tailored features allowed them to fully engage with the platform, leading to a 70% increase in satisfaction among participants with disabilities.
Streamlined Communication
Improved communication effectiveness, particularly for users with hearing impairments. Feedback indicated a 50% reduction in communication barriers and a 35% increase in user engagement metrics within rooms.
Positive User Sentiment
Participants noted increased enjoyment and a higher likelihood to recommend the app, with a 60% boost in Net Promoter Score (NPS) and a 75% rise in positive feedback compared to pre-redesign.
Solution Impact
Implementing accessibility features elevates Clubhouse to capture a larger market share.
Accessibility doesn't just impact users, it has great business impact too.
Customer Satisfaction = Market Share
Research shows that businesses that prioritize accessibility experience increased customer satisfaction, loyalty, and market share.
Competitive Edge
By prioritizing accessible design, Clubhouse can expand its user base, enhance user satisfaction, and gain a competitive edge in the social media landscape.
User Engagment
Studies conducted by the Nielsen Norman Group indicate that accessible design leads to a 35% increase in user engagement and a 90% rise in unique visitors for social media platforms.
Market Growth
Research by the World Bank suggests that businesses that prioritize accessibility can unlock a market potential of over $6 trillion globally.
Before & After
Revamped Clubhouse to ensure users with disabilities can participate fully, breaking down barriers and fostering inclusivity.
Hallway
Room
Next steps
Community engagement & collaboration with advocacy groups to continuously improve accessibility features.
Facilitate community-driven initiatives to promote accessibility and inclusivity within Clubhouse.Collaborate with advocacy groups and organizations representing users with disabilities to gather feedback and insights for improving accessibility features.
Collaborate with advocacy groups and organizations representing users with disabilities to gather feedback and insights for improving accessibility features.
Host accessibility-focused town hall events to engage users in discussions about improving the platform's inclusivity and accessibility.
Reflections
I learned that I am incredibly passionate about accessibility and inclusive design.
WCAG standards don't always directly apply to mobile platforms. It's important to identify which guidelines are most relevant and how to effectively adapt them for mobile use.
Accessibility design benefits everyone.
The importance of continuous testing and iteration to achieve the best possible accessibility outcomes.
I learned a lot about accessibility standards with IOS mobile app design such as touch points, typography hiearchy.
When apps have features like audio that go beyond the functionality of native IOS accessibility features, the design must have its own customizable accessibility features.
Users agency and autonomy goes hand in hand with customizability.
The experiencal wisedom of lived-experts is our best guide.
