Role: Sole Product Designer and Researcher
Timeline: 6 Weeks
Tools: Figma, Miro
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.
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:
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
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.
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
After gathering feedback, I identified several opportunities to improve usability:
Navigation Bar Placement: Initially placed at the top, the navigation bar was moved to the bottom of the screen to align with mobile UX best practices.
Homepage Layout: A dynamic event banner and reorganized event listings were added to make the homepage more actionable and relevant to users.
Visual Spacing: Adjustments were made to margins and button sizing to improve touch targets and create a cleaner, more user-friendly interface.
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.
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.
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.
Reflection
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.
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.