Creating a web/mobile experience that allows students to search for and participate in clubs as well as giving club executives an efficient way to manage their organization’s online presence.

Student Activity Calendar

UX/UI Design
UX Research
User Interviews
Design System
Information Architecture
The Northeastern SGA (Student Government Association) wanted a platform that would replace the current use of NUEngage as the university’s primary solution for online campus engagement advertising. As a designer at Generate Product Development, I worked alongside designers and software engineers to deliver a mobile and web solution that functions as an organization and event marketing platform that drives engagement within Northeastern’s club ecosystem. The two primary stakeholders for this application are the undergraduate student population and club executives. Our client wanted to include a master event calendar, but the rest of the features were to be designed at the discretion of my team.
Jump to the Figma prototype
Time: January 2024 - Present
‍
​Team: 4 leads, 4 designers, 6 developers

Role: Designer​

Tools: Figma, Illustrator
Problem Statement

How might we remove obstacles in the club search and club management process?

Clubs and extracurricular organizations are a core part of college and building a sense of community on campus. Northeastern lacks a well-maintained, centralized tool that promotes extracurricular activities. Students have difficulty finding clubs that match their interests and staying up to date with clubs that they already know. Club executives also face challenges with the existing platform. Most clubs use Instagram or word of mouth to get new members and to inform current members about their events.
The Solution

A way to find information about clubs that match your interests

For the first part of the project we focused on the mobile app, which caters more to students. The app’s main focus is to simplify and centralize the club search process and to solve the issue of club engagement at Northeastern. We developed this project with transparency and exploration in mind The mobile app has six core features.
Login & Onboarding - We wanted the Student Activity Calendar to be  a standalone from Northeastern so we made sure that users could access it without having to go through Northeastern SSO. However, we did use email verification to make sure that users were NEU students. In addition to this, we wanted to give users the option to browse clubs without making an account as prospective students of parents of prospective students might want to see the extracurriculars offered at Northeastern. The onboarding flow is also where users get to choose their interests to get club recommendations.
‍Homepage - The homepage shows users events that are happening as of that day. It also shows users events that they're following and events that might be of interest to them.
Club View - Users can view who is on the executive board as well as general contact information. There is also an FAQ section where users can submit questions they have about the club. There is key information such as the club offerings, recruitment cycle, size, and membership type. Users also get the option to follow clubs and turn on notifications for events.
Event View - This would show users information like date, time, location, description, and tags. If applicable, there would be an RSVP button where users can rsvp to the event or be added to the waitlist. There’s also a section which shows the specific location of the event and would take the user to google maps or apple maps. A key thing we focused on was making sure users would get notifications on events they added to their calendar.
Explore Page - The explore page has two main parts – the club search and the event search. The club search allows users to filter clubs based on defining characteristics. It also recommends clubs to users based on the user’s listed interests. Users can sort and filter clubs by popularity, size, the recruiting cycle, and more. The event search features four views – clubs you are following, a general calendar, recommendations, and upcoming events.
User Profile - This is where users can see what clubs they follow and are a member of. Users can also adjust settings like how often they get notifications and their interests. The profile also has a calendar view which shows users events that they’ve saved and events from clubs that they’re following or are a member of.
Competitive Research

Researching the problem of decentralization when it comes to club information

The four existing alternatives we looked at were Instagram, Engage, Partiful and Luma. Instagram is used by clubs as the primary marketing tool to advertise to the public. Instagram is also used heavily during the recruitment cycle to push applications out to prospective members. Engage is Northeastern's current solution to student involvement decentralization. However, it is rarely used by the student body and by clubs. Partiful and Luma are event management websites where users create events and invite guests. Northeastern clubs sometimes use this to manage RSVPs.
User Research

Interviewing students to understand their goals and pain points

To get a better understanding of Northeastern's club culture and student population, we conducted user interviews various students on campus. Here was our thought process and some of the main takeaways during our research. We were able to interview a good mix of students.
Main Insights
- Students wish they would have know time commitment before joining clubs?
- Keeping up with clubs at fall fest was really difficult
- Would be nice to be able to share both a club and their meetings immediately
- Fall fest was big for fraternities/greeklife (good to meet everyone in person)
- Many people joined clubs because of their major
- Didn’t realize how competitive some of the clubs were (wish they would have known how to better prepare)
- Was attracted to a club because of how new it was (allowed them to avoid some of the red tape)
- Most people learn about clubs through word of mouth
- Common theme of trying to join a bunch of clubs at once and not sticking with any of them freshman year
- Not enough substance on engage to give a holistic image of the club
- Need to know when meetings times are and locations
Information Architecture

Effective navigation to guide users through the app

When planning the site map for the app, we focused on three things. We needed to improve the visibility of Northeastern organizations with both current and prospective students; provide a space to for users to browse and RSVP to events, as well as receive timely notifications reminding you of upcoming activities; and offer clubs valuable analytics and feedback on their events. We incorporated the six core features into an intuitive flow for users.
User Flows

Evaluate existing interfaces and creating intuitive information architectures

We looked at the existing solutions from our competitive research and created user flows for each main feature. We explored the different types of users who would use the product and the different goals they would have with the app.
Initial Designs

Creating lo-fis and iterating based on user feedback

Our initial designs went through a lot of changes throughout the process. One main thing we decided on was removing the general calendar from the homepage and keeping it on the profile page and explore page. The homepage would have a more minimal design and just feature events that are coming up or events that align with the user's interests.
Design System & Components

Creating a consistent visual language across all pages

One challenge that arose was the level of customization each club would have. Many clubs take great care in making sure their marketing graphics are visually engaging and match the branding of their organization. That is not the case for every club, and we had to find a solution that allowed clubs to feature their graphics while also making the app look clean and unified.
Final Design

The final design and completed user flows

Check out the final iteration of the app and see how everything came together!