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:

  1. Find organizations

  2. Attend events

  3. 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:

  1. Motivation: Why do you join clubs?

  2. Marketing: How do you hear about clubs and events?

  3. Emotion: How do you feel when choosing clubs/going to events

  4. 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:

  1. Club Commitment: Responsibilities and time/effort required

  2. Club Community: How do club members feel about the club and the people in it

  3. Growth: Takeaways from joining (skills & experiences)

  4. Activities & Events: Exciting and engaging events

  5. 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

Using this research, I drafted lo-fidelity sketches to visualize the different webpages I wanted to redesign as well as the new features I wanted to implement. 

Wireframes

I then transferred these sketches into Figma to design wireframes for my 5 screens: home, events, clubs, find your fit, and profile page. I utilized card elements to consolidate event and organization details in one space. 

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:

  1. Browsing campus events

  2. Exploring organizations feed and club expanded profile view

  3. 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

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 them a usability score from 1 to 5 (1 = show stopper, 5 = no issues) in order to test the functionality of the redesigned website structure. 

Check out the full user testing pdf results here.

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

I'm so happy you're here!

© Autumn Fung 2024

Made with love and fueled by many boba/matcha runs 🧋🍵.