ClubConnect App and Responsive Website
Project overview: case study
The Product Club Connect is a Los Angeles-based organization focused on campus engagement at UCLA. The organization needs a tool that helps students discover and join clubs and communicate with club leaders. Club Connect’s primary target users include UCLA students who are looking to get involved on campus and find communities that match their interests.
Project duration June 2024 - Aug 2024
The problem 30% of students do not participate in clubs or organizations per year at UCLA. The strategy team at UCLA's Student Life and Wellness Center has identified a lack of general knowledge about available campus clubs and limited understanding about the benefits of involvement as crucial drivers for continued declining student engagement.
The goal Design an app that will improve awareness on the topic of campus organizations and help students discover their own communities of interest.
My role UX designer leading the app and responsive website design from conception to delivery.
Responsibilities Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Softwares Figma, Sketch, and Adobe Photoshop.
Understanding the User
User Research
Personas
Problem Statement
Competitive audit
Ideation
User Research
Summary
I used UCLA's Student Life and Wellness Center’s data on student club participation to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling badly about not being involved in campus activities, but they didn’t actively seek out or join clubs. The feedback received through research made it very clear that users would be open and willing to increase their campus engagement if they had access to an easy-to-use tool to help guide them.
Persona 1: Matt
Problem Statement:
Jason is a working student who needs club recommendations, a way to immediately join, and tools to communicate with club leaders because they want to get involved and make it a part of their routine.
Persona 2: Emily
Problem Statement:
Emily is a working student who needs exciting new club opportunities that make discovering, joining, and engaging with clubs easier because most of the clubs they’re interested in are either closed or require interviews that they want to avoid.
Competitive audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Club Connect app.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on features for immediate club joining and instant communication with club leaders.
Starting the design
Digital wireframes
Low-fidelity prototype
Usability studies
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Club Connect app. These designs focused on delivering personalized guidance to users to help discover their ideal clubs.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing an available club, deciding to join, and using the communication tools.
Usability study: parameters
Study type
Unmoderated usability study
Location
Los Angeles, University of California (UCLA)
Participants
7 participants
Length
30-60 minutes
Usability study: findings
Round 1 findings
1. Club Recommendations - Students want easy access to club recommendations that specifically use the interests they indicate.
2. Club Registration - Students struggled with the registration process for clubs.
3. Instant Joining - Students wanted clear signals for when they could instantly join clubs.
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to browse clubs that specifically use the interests available in user profiles.
Additional design changes included adding an option to “instant join” to the “club details” page, and providing a clearer indication of which clubs are accepting new members before joining.
Additional design changes included adding an option to “instant join” to the “club details” page, and providing a clearer indication of which clubs are accepting new members before joining.
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View the Club Connect high-fidelity prototype
Accessibility considerations
Clear labels for interactive elements that can be read by screen readers.
Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.
Responsive Design
Information architecture
Responsive design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Club Connect sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Going forward
Takeaways
Next steps
Takeaways
Impact:
Users shared that the app made discovering and joining clubs seem like something they could actually achieve. One quote from peer feedback was that “the Club Connect app helps bring caring about campus involvement to a personal level in a way that’s easy and engaging.”
What I learned:
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Thank you for your time reviewing my work on the Club Connect app!