GraduateNU

Empowering Northeastern students to customize their plan of study through an intuitive and flexible interface.
Project Overview
As the lead UI/UX designer on GraduateNU, a Sandbox Software Consultancy project at Northeastern University, I mentored another designer, designed new features, and improved upon existing designs to ship with developers. I participated in weekly crit meetings with designers and my team of developers to discuss project implementation following 2 week sprints.

Try it here: https://graduatenu.com/
Role
Lead UI/UX Designer
Team
5 Developers
2 UI/UX Designers
1 Project Manager
Duration
Sep 2024 - Present
Tools
Figma, Notion, GitHub
ContextImpactReflection
CONTEXT
What is GraduateNU?

All students at Northeastern University use a a tool called the Degree Audit as well as Excel spreadsheet templates given by academic advisors to help them plan out their coursework for the next 4 years of college.

Degree Audit
Excel spreadsheet
Problem

The combination of the confusing Degree Audit and several Excel Spreadsheets leave many students feeling overwhelmed. There is also a lack of responsive academic advisors to help each student figure out their plan of studies.

This leaves students feeling lost on their own and more likely to make mistakes in their plans


SOLUTION
A student built and student empowered app

Students can now create their custom plan of studies with easy drag & drops and understandable UI. After launching the beta app in Fall 2023, we have since started getting many feedback & bug requests from the school community! Now, I work to address user feedback by quickly shipping designs that are technically feasible.



Learn about the various features I shipped so far:
Pre/Co-requisitesSandbox areaMinorsGeneric featuresIntegrating SearchNEU
✌️ Pre/Co-requisites
SNEAK PEEK!
Redesigning course errors
Before
After

PROBLEM
Confusing diagram designs for students

Many classes will require pre-requisites (class you must take beforehand) and/or co-requisites (classes you must take together). When a student places a class that needs either of those but is missing in their plan, they will receive an error and when clicked on, a modal with a diagram will pop up. However, the diagram that tells this information on pre/co-reqs is difficult and complex due to the many conditionals that are often nested in one another.

Before design

Breaking down the existing modal

How might we easily show students what complex combinations of classes they must take?



INFO ACCESS
Making the modal more accessible and understandable
Originally, the modal had icons that would display the meaning of the errors on hover. However, this was not accessible-friendly and at first glance, a user may not understand what these errors mean. This led me to remove this functionality and simply display the information.
Before popup info icons
After popup with info taken out


EXPLORATION
Trying out different design layouts and functions
I wanted to try out several different visual ways of grouping requirements by what a user has to take (strokes, colored backgrounds, tags, etc.) and then got feedback from other designers and developers on what intuitively made the most sense. I also really wanted to reduce the usage of the words "or" & "and" to make it more easily digestible.


REFERENCES
Utilizing existing patterns and creating new ones!
After discovering the problems in my iterations so far, I dived deeper into the livesite's existing patterns as reference to see what's already working.

Already on the livesite, is this modal to Add Courses. For consistency and scalability sake, I used the same patterns to represent classes & NU path tags and the interaction with the icons & button. To act as a nested "or", I designed a new dropdown that would hold more than one class but limiting the user to select one.

Getting rid of nested "ors" with a dropdown!
I created a new pattern that fit our internal design system that could hold two options. By using the dropdown and changing the language to "Choose ONE of the following," I was able to get rid of one of the nested "ors" which would be the case across any 2x nested "or"!
Original diagram
New dropdown

FINAL FEATURE DESIGN
A redesign using visible language and user-friendly patterns that makes the user's life easier
I combined my ideas and the references I looked at to arrive at an interactive modal that showcases co-requisite and pre-requisite classes in an understandable way.

When a user clicks the plus buttons to add these missing classes to their plan, they will turn into checked icons to indicate that. Whichever other classes that do not have to be taken will be grayed out! This allows the user to easily understand what classes are being fulfilled and what is no longer applicable.

Then, the user can click the Add Courses button to add those missing required classes to their plan!

DESIGN SYSTEM
Updating the internal design system for scalability and reusability
🏖 Sandbox area
PROBLEM
User feedback asked to make the app feel more personnable

While the app is great for accurately building a course of plan based on Northeastern's requirements, GraduateNU had no customizable functionality that would cater to each individual's unique plan.

How might we integrate a way to customize one's plan according to unique needs?



EXPLORATION
Discovering the best location for users, developers, and future scalability
A. Sidebar that opens drawer when opening
B. Dropdown with cards that open a modal
C. Dropdown with sticky notes


FINAL SOLUTION
A "Sandbox" area that will house new custom features such as adding notes that can retain across students' accounts
➕ Minors
PROBLEM
Many students have minors in addition to their majors and want to see those requirements
It's common for students to pursue minors in addition to their majors whether it be for a passion or to supplement their studies but GraduateNU had not yet supported this.

How might we show users both major and minor requirements without overwhelming the UI?



SOLUTION
Using tabs to separate requirements and improve scalability for multiple minors

With the ability to toggle between major and minor requirements, all the requirements can be replaced which saves real estate in the side bar and prevents endless scrolling. In addition to the tabs added in the sidebar of a user's plan, I added usability of minors in the modals where a user creates a new plan and modifies a plan.

🐛 Generic features
PROBLEM
Users may want to see different course options but may not know which one to choose right away

It is more than likely students will be uncertain and change their mind several times throughout their college career. However, even if they don't know what course exactly they may be taking, they may definitely want to know what requirements they would be fulfilling.

How might we account for users unsure about their future courses?



SOLUTION
Creating "Generic" features for different requirements for those that haven't decided what exact courses they want
PROBLEM
Sandbox has a sister app that allows students to browse the Northeastern course catalog

SearchNEU holds data on class details, professors, classrooms, times, and gives students the power to enable notifications for when seats open. Despite how intertwined the two apps are, they had no connections to one another.

How might we direct users to learn more about classes at another app in a technically feasible way?



SOLUTION
Utilize info icons to open SearchNEU tabs

The most simple and scalable design solution was adding info icons next to each class which when clicked on, would open a new tab of SearchNEU where a user can learn more about that class!



IMPACT
Improving GraduateNU through student feedback
To get real-time student feedback, we have a google form on our mainsite's navigation bar where users can submit their thoughts. We use the answers to then tackle the real wants and problems of Northeastern students. So far, I've shipped 4 features in 3 weeks and will only continue doing so! As a result, my user-centered designs have dramatically improved user satisfaction and usability!


REFLECTION
Navigating a student community project with engineers
🎊 Being in a small team with talented engineers meant we could ship fast. But this also meant there could be discrepancies or design errors in the livesite that the engineers coded. That's where checking consistency between the the livesite & designs and then communicating were really important!

🖥 Exploring various ideas is great but, checking in with what's feasible on the technical side must always follow. Having a computer science background helps me a lot while designing because I can already have a sense of what is/is not possible but, discussing with the engineers in my team who are much more in the weeds of it, truly grants me even more perspective.

👏 On a similar token, the engineers and other members of my team always bring great ideas! Collaboration is key in a student-run project building a product for other students. We know each other best!



Check out my other work!
Join
An entertainment app that strengthens community over collaboration and synced actions
Addgene
Redesigned research pages, data tools, educational resources, and built a design system for scientists and educators
NBCUniversal
Created patterns and hi-fi prototypes for enterprise-grade design systems, improving scalability and consistency