ClubsNEU

Context

Clubs are an integral part of campus community and with co-op, students often don’t have classes during the semester to stay connected. While observing the disconnect between clubs and students, I decided to create a medium to efficiently facilitate student-club interaction.

As a Design Lead, I led and mentored three other designers to conceptualize a new way for students to find and connect with communities within Northeastern.

Role

Product Designer

Timeline

Jun - Aug 2023

Disciplines

Interaction Design

Visual Design

Content Strategy

Team

Individual

Role

Design Lead

Timeline

Mar - Sep 2023

Team

4 Designers

3 Engineers

IDEA SYNTHESIS

It all started when I began to attend various co-op panels…

Among the great advice I was given, there were a few questions that were consistently asked each panel. One of those questions was “If you were to redo your undergrad experience from the beginning, what would you do?” The answer that kept repeating was...

“I wish I was more involved with clubs”

QUICK STATISTICS

That got me thinking what club involvement on campus was like...

While finding concrete statistics on every club’s active members is essentially impossible, I decided to pick some of the more well known clubs on campus.

Sandbox at Northeastern

(4.4% participation rate) had 132 applications when there are around 3000 students in the school of computer science.

SASE Northeastern Chapter

(1.0% participation rate) has around 20 regular members and when there are roughly 2000+ asian STEM majors.

How do students connect with clubs?

Participation seemed rather low for a school of 20000 undergraduates. This seems to point towards a disconnect between clubs and students.

THE PROBLEM

Too many semi-functional solutions increases friction for students finding their community.

The current solutions all have their benefits and downsides. Each downside increases friction for current and incoming students to find their communities. Having many semi-functional solutions also forces students to “bounce around” causing more frustration.

Fall Fest

Fall Fest is Northeastern’s club fair. Clubs table outside with posters to inform students about their organization.

Pros

Lots of club information

Easy to search for clubs

Cons

Happens once per year

Hectic and crowded

Instagram

Instagram needs no introduction since i’m sure everyone is familiar with how it works.

Pros

Lots of club information

Stay updated with events

Cons

Difficult to search and filter

Clutters personal feed

Neglects smaller clubs

NUEngage

NUEngage is the official club database for Northeastern created by Anthology.

Pros

Run by Northeastern

Cons

Lack of club information

Difficult to search and filter

Confusing UI

VISUAL DESIGN IDEATION

Crafting the ideal club card

Club cards display the basic information to identify the club before clicking to view more. They play a dominant role in shaping the visual experience. Therefore, this singular piece went through the most iterations by far.

Choosing the core layout

The card chosen properly displayed the hierarchy of information from top to bottom making the card easier to scan while having plenty of space for longer names. It satisfied all the requirements while being space efficient.

Color distinction = confusion

Initially, I had 6 distinct colored tags to distinguish types of clubs. I soon realized after card sorting that people have different ideas when it comes to categorizing clubs. I then decided to go with a single color for universal clarity.

Safer tags

The grey tags seem much less aggressive and no longer felt like an error state. It also decreases eye strain. Thus we have arrived at the final card design.

INTERACTION DESIGN IDEATION

Maximizing search efficiency

When clicking on a club card, we had two options to display the additional information. A new loaded page or a full screen modal.

Redirected page

While it was a perfectly fine option, this requires the user to click the browser's back button to return to the home page. This often causes problems with the database not saving the user's position in the database. Overall it is slower and less efficient.

Full screen modal

Compared to a page redirect, a full screen modal allows the user to pop in and out of club pages without resetting their position in the database. This allows for quick navigation throughout the database making it the ideal interaction.

FUNCTIONAL DESIGN IDEATION

Being the core interaction point, the goal was to create a toolbar that maximized search flexibility while encouraging exploration for all levels of curiosity and knowledge.

Toolbar Orientation

While I had initially preferred a top toolbar to encourage exploration, I soon realized that the decrease in quality of user experience was not a worthy tradeoff. Adding the left toolbar increased filter accessibility while increasing vertical screen real estate. Keeping the filter tabs on top provided a middle ground for exploration.

GRANULAR DESIGN DECISIONS

How can we create a environment that encourages exploration?

With the primary user base being underclassmen, we want to encourage them to discover new clubs and interests as they continue their college journey.

Filter tabs

Inspired by Dribbble, I admired how their filter tabs encouraged exploration rather than immediately narrowing a search to a very specific topic. This is in contrast to most databases serving the purpose of quickly gathering information.

Discover page

Opening with a discover page tailored to their interests opens the opportunity to also introduce adjacently similar clubs for students to check out. The page refreshes every week to always introduce new and interesting clubs.

HUMAN CHALLENGES

How can we alleviate the anxiety of attending a club alone?

Many users mentioned the anxiety of going to a club alone as a roadblock for participation. While ideating a solution, we focused on one with the highest effectiveness and the lowest effort for implementation.

Similar profiles

Located on your personal profile page, similar profiles allows you to find students with similar interests and backgrounds. Feel free to shoot them a message with the contact information on their profile!

FINAL PRODUCT

Club search tailored without the hurdles

If you don’t have a northeastern email, don’t worry. You can still use the app in limited capacity to protect the personal information of students.

Your personal profile is powerful

This is your personal profile. It displays your clubs, interests, contact information and similar profiles. Your interests will allow us to recommend clubs on your discover tab.

Search, filter, discover

With a comprehensive and accessible search and filter system, you’ll be able to find the clubs that fit your interests in no time.

A club page that has all the information

Never feel lost again. Get all the club information at a glance from basic information to events. If you want to ask more questions, you can always contact a member on the executive board.

REFLECTION

We're just getting started here...

Designing a successful full scale product requires planning and time

Designing a complex large scale app doesn't just take a few months. It is important to think about many different use cases and design for everyone. Especially the people who ground the product and help insure it’s longevity.

Don't be afraid to iterate

We often come up with an "ideal" solution that required lots of effort to develop. Later down the design process, that solution may not fit anymore. It is important to set aside sunk cost and focus on the user experience.

Leading an team is more than being organized

This was the first time I ever led a team and it was a learning experience for sure. Beyond being organized... giving constructive feedback, and being engaging and charismatic are some traits that I would like to work on as I continue to grow.