ClubHouse
PROJECT SUMMARY
Problem: Students struggle to join student organizations due to a high-pressure, disorganized process.
Role: Sole Product Designer and Researcher.
Outcome: A high-fidelity prototype for all your house party needs, including requests, upvotes, party recaps, and RSVPs.
Role: Sole Product Designer and Researcher
Timeline: 6 Weeks
Tools: Figma, Miro
The Problem & Context
In my digital product design course at the University of Michigan, we were asked to design a digital product that solves a problem for University of Michigan students. I struggled for a bit to find out what problem I could help to solve, until it became obvious. I heard student after student complain about not being in enough clubs, getting rejected from clubs, or just not being able to find a club they liked. After hearing these complaints, it became clear what the goal of my app should be.
ClubHouse is a mobile app I designed to help University of Michigan students discover and apply to student organizations more easily. The app addresses common challenges by offering features like advanced filters, trending club pages, and a personalized matching quiz.
I led this project independently, from initial concept and user research through to the final high-fidelity prototype.
Discovery & Research Process
While UMich has a vibrant club culture, students often struggle to get involved due to a lack of accessible tools tailored to their unique interests, time constraints, and experience levels.
Through interviews with several students, I identified a key problem: many students found the club recruitment process to be overwhelming and disorganized. This feedback informed the central problem statement:
RESEARCH SNAPSHOT
Interviews: 12
Findings: Most students feel intimidated by the club recruitment process and struggle to find student organizations that genuinely fit their skill sets and needs.
UMich students desire a simpler way to find and join student organizations so they can reduce stress and ensure an easier way to track deadlines and events.
Audience & Goals
RATE MY FIT
I wanted this feature to help students understand a club’s expectations without treating selectivity like a verdict.
Method: Uses a student's resume and inputted information about goals to check if a given org matches user's experience and desires
Risk: There is a risk that this will further discourage students from applying to clubs they want if the algorithm says it is a bad fit
Validation: Ask students how they would feel about being given certain ratings from student orgs and if it would alter their decision
Through formative research, I uncovered several common pain points:
Hesitation to apply for clubs perceived as too selective
Difficulty finding clubs that align with personal interests or experience
Limited access to diverse organizations that help build a well-rounded resume
My goal was to design a solution that lowers these barriers and streamlines the discovery process. ClubHouse addresses these challenges with:
A "Find My Club" quiz to match students to relevant organizations
A "Rate My Fit" feature to help students evaluate their likelihood of acceptance
Tailored club type recommendations based on user goals and experience
Throughout the research process, I primarily focused on busy Ann Arbor students who don’t have time to research clubs extensively, particularly during large-scale events like Festifall and Winterfest. These users range from first-year students seeking their first org to upperclassmen looking for one final club to complete their involvement portfolio.
Below are user personas developed from my early research to guide the design process.
Design Process & Iterations
I began the design process by creating a set of sketches to begin defining the basic structure, user flows, and core functionality of ClubHouse. At this stage, the focus was purely on layout and usability, the sketches are very crude.
Low-Fidelity Wireframes
The next step was to begin designing my low-fidelity wireframes. The initial wireframes were kept simple in black and white, using placeholder text styles and basic layouts, as shown below.
Incorporating Feedback & Creating the Design System
Following the wireframing stage, I developed a full visual design system to bring the ClubHouse app to life. I wanted the visual identity to feel distinctly "Michigan," so I built a color palette around the University of Michigan’s maize and blue, with black, gray, and red as complementary accent colors.
For typography, I explored several rounded fonts before selecting Mulish for its clean, approachable, and highly readable design. I also designed a custom bubble-style, italicized logo using Mulish to further establish the app’s playful yet professional tone.
Accessibility Considerations
I would check the core visual choices in the actual product flow, not just in static screens.
Contrast: Used WCAG guidelines to verify that all color combinations fit accessibility needs
Tap targets: All key tap targets are at least 44px to ensure usability and accessibility for impaired users
High-Fidelity Wireframes
Using the design system, I iterated on the wireframes to create polished high-fidelity mockups that incorporated the new visual styles. These can be seen below.
The designs focused on creating a visually cohesive, intuitive experience that was easy to navigate and aligned with mobile app best practices.
Results & Reflection
This project culminated in a fully designed high-fidelity prototype of ClubHouse, showcasing key features such as personalized club matching, an event-aware homepage, and a streamlined navigation system optimized for student use. Below are examples of some of the finished frames and a link to the full prototype.
This was my second-ever project in Figma and my first time designing a mobile app, which introduced several important learning curves. I realized that mobile apps require different interaction patterns than websites, such as prioritizing bottom navigation bars for easier access, and I adapted my designs based on user feedback.
Through this project, I also gained a much deeper understanding of design systems in Figma, including the use of components, color styles, and text styles. Building a mini design system allowed me to efficiently create reusable layouts and quickly iterate across multiple screens.
Overall, this project helped me move beyond basic visual design toward systematic, scalable thinking in product design. It made me more confident in using Figma as a professional tool and helped me develop the ability to quickly adjust and improve wireframes based on feedback rather than sticking with first drafts.
I view ClubHouse as a major step forward in my growth as a UX designer, both technically and creatively.
What I’d Do Differently
In a future iteration, I'd like to actually test a working prototype with users to see if this app does help to make their recruitment process easier and alleviate some of the stress that comes with this process.
Next Steps
To continue developing ClubHouse, I would prioritize:
Adding more interactive elements, such as scrollable sections, animated transitions, and responsive buttons
Collaborating with backend developers to start building a functional prototype
Conducting a small pilot launch with willing student organizations to gather real-world feedback
Enhancing the design with microinteractions to make the experience more dynamic and polished
I believe that once fully fleshed out, ClubHouse could offer real value to students by simplifying the process of getting involved on campus.