UX/UI Design, Web, Desktop App
Northeastern Clubs Redesign
Overview
A Northeastern University club and event discovery platform that is regularly updated with club and event listings to help students discover and engage with the NEU community.
Picking and attending clubs can be a hefty task for busy college students. For my Interaction Design 1 class semester-long project, I chose to focus on redesigning Northeastern’s existing club database to build a better system to help students find their passions and connect with like-minded individuals through a comprehensive list of clubs and events available on campus.
Whether you're looking to join a club related to your major, explore a new hobby, or simply socialize with other students, the newly designed Center for Student Involvement platform provides easy access to all of the exciting activities happening at Northeastern.
Role
UX Designer
Timeline
4 months
(Jan–April'23)
Tools
Figma
The Problem
Finding and committing to clubs is difficult and time-consuming for college students.
College students want to get involved in their campus communities, but how do they know which organizations are right for them? This process takes lots of trial and error that many don't have the time for. Given Northeastern's existing club database, how can we improve it to expedite the club search process?
Background
Original Center for Student Involvement Website
The Center for Student Involvement website serves to provide information about student organizations and upcoming events.
In summary, the website has three main purposes:
Find organizations
Attend events
Track involvement
Students
One issue I noticed about the website was that it lacked a personalized factor. As a student with a multitude of different interests, I value joining communities or gaining experiences that are relevant to exploring those interests further. With the CSI website, it felt like there were too many options being presented making it difficult to filter through.
Research & Identify
Primary Research: User Interviews
To kick off my research, I conducted 4 user interviews with fellow college students to ask them about their club experiences.
My first modal was a guided interview in which I asked open-ended questions regarding:
Motivation: Why do you join clubs?
Marketing: How do you hear about clubs and events?
Emotion: How do you feel when choosing clubs/going to events
Organization: How do you keep track of the events/meetings?
My second modal prompted students to rank 5 factors from the most to least important when joining clubs:
Club Commitment: Responsibilities and time/effort required
Club Community: How do club members feel about the club and the people in it
Growth: Takeaways from joining (skills & experiences)
Activities & Events: Exciting and engaging events
The Marketing: Good marketing tactics and social media presence
Findings: 2, 3, 4 were the most popular options. Students cited meeting new people, club culture, exciting and relevant experiences, and professional networks as alluring reasons to join clubs.
Affinity Mapping
I then took key concepts and ideas from the interviews and wrote them down on post-its to conduct an affinity mapping exercise. I organized the post-its into the recurring themes I noted. Once completed, I brought these groups into Notion to further organize them into the 9 different established categories.
Job Stories
I further consolidated these themes by identifying 3 job stories or user requirements that aligned with the key motivations and needs when joining clubs. These job stories provided further insights on tangible solutions and features I could implement into my redesign to make it relevant and helpful for the user.
When I’m deciding on which clubs to join, I want to gain insights on the club’s impact and opportunities so I can decide whether it’s worth investing my time into.
1
When attending club meetings for the first time, I want to meet passionate members so I can better understand the club environment and see if I can find my place there.
2
When attending club events, I want there to be engaging and impactful activities, so that I know if I can gain anything beneficial from joining.
3
Solution
Rating system
Club reviews with member testimonials
Find your fit test
Filter and sort system
Event attribute tags: workshop, speaker, food
Centralized calendar of events and meetings
RSVP and people going feature
Ideation
Lo-Fi Sketches
Wireframes
My Profile
Saved clubs
Saved events
My friends
Info Cards
Clubs
Events
Expanded Club View
Biography
Socials
Members
Find Your Fit Quiz
Curated results
Design System
I wanted the design system to stay on brand to the iconic Northeastern red, while also utilizing lots of white and neutrals to maintain a professional and easy on the eyes feel. Given this platform is designed to deliver information to students, I wanted to keep it as simple and readable as possible.
Wireframing & Prototyping
Lo-Fi Wireflows
Using the wireframes and initial sketches, I designed wireframes for 3 workflows:
Browsing campus events
Exploring organizations feed and club expanded profile view
Taking the Find Your Fit Quiz
User Feedback
Prototype User-Testing
After prototyping my wireframes, I enlisted 4 college students to help user test the redesigned platform. I gave each student 4 specific tasks to complete without any guidance, and assigned their ability to complete the task a usability score from 1 to 5 (1 = problems prevented task completion, 5 = no issues) in order to test the functionality of the redesigned website structure.
Check out the full user testing pdf results here.
Tasks
Take "Find Your Interests" quiz and favorite one of the clubs
⭐️
Imagine you are searching for new clubs, but you want results curated to your liking instead of having to browse through all the different organizations listed. Using this website, show me how you would find club suggestions based on your personal interests and follow some.
Find Out More Information about the Club
🔎
Now you want to browse through club suggestions and learn more about each individual club. Show me how you would discover all the upcoming events for the organization Scout and RSVP to one of their events and return to the homepage.
Forgotten Event Date
🗓️
You recently signed up for some club events, but you forgot which days they take place. Show me how you would access information on all the different events you’ve signed up for, and un-RSVP to one of them.
Popular Events
🔥
Now you want to explore different events beyond your feed. Show me how you would discover events that are popular right now and save some that you think are interesting. Next, filter events by the one’s your friends are also attending.
Results & Takeaways
High-Scoring Usability Tasks:
Task 1: (avg = 4.25) had the highest average usability score due to the explicit title and center placement on the homepage
Task 4: (avg = 4) super easy and intuitive; having the tag buttons above the events helped users filter by specific categories
Low-Scoring Usability Tasks:
Task 2: (avg = 3.25) most people interpreted this as sign-up for the Scout event on the homepage
Solution: Add less information on cards and use consistent phrasing
Task 3: (avg = 2.75) events that users are already signed up for are hidden in the "My Profile" section
Solution: Add in events you’ve signed up for on the events page or have an onboarding process
Once you click attend event button, show pop-up modal: “Saved to My Events”
Implementing Changes from User Testing
Final Designs
High-Fidelity Wireframes
Access my final pitch deck here.
Final Pitch Deck
Reflection & Learnings
Going through the full design process independently over the span of 4 months taught me the importance of constant iteration and incorporation of user testing insights. As the sole designer, it's easy to work in a silo and become overly familiar with your designs. This course implemented weekly check-in sessions and presentations which helped me in implementing constructive feedback, whilst also presenting the reasoning behind each design decision. Usability testing allowed me to identify roadblocks or pain points hiding in plain sight, thereby allowing me to provide better and more intuitive experiences for the end user.
Previous Project
Next Project
