Neu Center for Student Involvement Website Redesign
UI/UX, Web, Desktop app
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 new CSI platform provides easy access to all of the exciting activities happening at NEU.
Tools
Figma
Role
UX Designer
Timeline
Jan – April 2023
(4 months)
Challenge
Finding and committing to clubs is a difficult task 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 CSI Website Design
The Center for Student Involvement website has three main purposes: find organizations, attend events, and track involvement. It serves to provide information about student organizations and upcoming events.
One issue I noticed about the website was that it lacked a personal 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 that it was difficult to filter through.
Research and Identify
Primary Research: User Interviews
To kick off my research, I conducted 4 user interviews with college students to ask them about their experiences with clubs.
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 asked students to rank 5 factors from 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/engaging events
-
The marketing: Good marketing tactics and look good in the public eye and on their socials?
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.
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.
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.
Lo-Fi Prototypes
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, and 3) Taking the Find Your Fit Quiz.
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 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.
Takeaways
Keep
-
Task 1: (avg = 4.25) has the highest average usability score due to the obvious wording and center placement on the homepage
-
Task 4: (avg = 4) super easy and intuitive; having the tag buttons above the events helps the users filter by specific categories
Change
-
Task 2: (avg = 3.25) most people interpreted this as sign up for the Scout event on the homepage
-
Add less info on cards
-
Use consistent phrasing
-
-
Task 3: (avg = 2.75) events that are users are already signed up for are hidden in "My Profile"
-
Add in events you’ve signed up for on the events page or have an onboarding process
-
Once you click attend event button, show popup: "Check My Events" or “Saved to My Events”
-
Hi-Fi Prototypes
Wireframe Rundown
Figma File
Final Pitch Deck
This final deck compiles my 4-month design process and research in redesigning the CSI website.