UI / UX Design | Spring 2025
GraduateNU
Overview
During Spring of 2025, I joined Sandbox, a software consultancy club at Northeastern University. There, I have amazing opportunities to design interfaces for student-developed projects. This past semester, I worked on UI/UX design for the GraduateNU website, a degree planning tool for Northeastern students.
Approach
Collaborating in a team of 6 developers and two other designers, we strived for an optimal user flow to create, edit, change, and save degree plans through GraduateNU. We used Figma to design, and coding languages and tech stacks such as Nextjs, React, Typescript, Vercel, Node, AWS, and PostgreSQL.
My Role
UI / UX Designer
Deliverables
Google Sign in Button for login
Import / Export Feature
Navigation bar redesign
Team Members
Developers: Kobe Zheng, Dennis Wang, Jake Langlois, Shireen Kumar, Ameeka Patel, Liam Carvajal
Designers: Connie Lin, Daniel Jacob
New Navigation Bar + Import / Export Features
New Google Sign In Feature
Context
GraduateNU is an degree planning tool created by Northeastern (NEU) students, for Northeastern students. Our goal is to help students plan better and navigate NEU graduation requirements to create a personalized plan of study.
Problem
Challenge
How might we continue optimizing the user flow of GraduateNU and make planning one's degree more comprehensive?
Responsibilities
My objectives were to research and design:
A google sign in option for first time users
An Export / Import feature for managing schedules
Design Process
Research
Sign in with Google Feature
My first step was to research the method of utilizing official Google branding systems and the process of incorporating a "google sign in" button onto the login page.
I researched the guidelines through the official google branding documentation online, and pulled inspiration from design sites of past implementations of google sign in options.
Import /Export Feature
The goal of this feature was to include options to import an existing plan through JSON, txt, or CSV file, and to export the plan one makes on GraduateNU to a JSON file.
I researched many implementations of export and import user flows, and finally drawing inspiration from designs of Notion and Google Drive. In my opinion, these designs were the most intuitive and comprehensive.
Ideation
Sign in with Google Feature
Some initial ideas played with the typeface weight and color, and button border color in order to optimize readability and match the GraduateNU branding.
Import /Export Feature
The goal of this feature was to include options to import an existing plan through JSON, txt, or CSV file, and to export the plan one makes on GraduateNU to a JSON file.
I researched many implementations of export and import user flows, and finally drawing inspiration from designs of Notion and Google Drive. In my opinion, these designs were the most intuitive and comprehensive due to its straightforward user flow.
Final Design
Sign in with Google Feature
In the end, we chose a design that reflected both ours and Google's brand guidelines, while also delivering an easy-to-navigate experience for the user, with it being placed strategically under the sign up options.
A goal was for users to stay long term on GraduateNU and create account rather than signing in as a guest. The "Continue with Google" button has allowed the option of seamlessly signing in without the hardships of re-entering your information.
Import /Export Feature
For the final product, we designed an export and import user flow, in addition to an updated navigation bar at the top of the interface. We decided to update this in order to effectively include the new features with all the existing features the application offers.
New Components
Old Navigation bar layout
Challenges
Design
Key challenges included:
Adapting to an unfamiliar design system,
Establishing effective cross-functional communication with both designers and developers
Navigating my first role as a UI designer within a collaborative team environment.
This experience highlighted the importance of transparent communication and knowledge sharing, areas where I had previously worked independently but learned to value as essential components of successful team-based design processes.
Impact and Takeaways
Teamwork!
326 Slack messages sent from 01/08/2025 - 07/07/2025
2 Designs fully handed-off and implemented
I was able to make an impact on the team by maintaining proactive communication through regular check-ins to ensure project alignment. I also leveraged strategic calendar management to optimize team coordination and meeting efficiency. Notable team successes involved close collaboration with developers to successfully implement multiple product features, active participation in weekly design critique workshops that strengthened our design decisions, and applying brand expertise to help establish comprehensive brand guidelines that standardized our visual identity across projects.
In the future, I hope to continue mastering these skills in order to further better my team and create a more inclusive and dedicated environment. These skills I have developed have truly shaped my design and professional abilities. I cannot wait to further explore these tactics in future professional works!