Designing a Better Course Catalog for 11,000+ Users at Northeastern Univesity
Product Design
UX Research
Design Systems
Project Summary 📝
OBJECTIVE
To refresh and improve SearchNEU, a student-run alternative to Northeastern University's existing course catalog, by establishing a robust design system and enhancing the platform's overall user experience
ROLE
Product Designer
RESPONSIBILITIES
Designed and implemented a scalable design system to streamline team workflows and ensure UI consistency
Led UX enhancements, including UI components and a mobile-first redesign
Conducted UX research to identify key pain points and validate design decisions
Collaborated closely with developers to ensure seamless implementation
IMPACT
SearchNEU serves 7,000+ unique users monthly, with traffic surging to 11,000+ during peak registration periods. By implementing a cohesive design system and enhancing mobile usability, we improved accessibility, efficiency, and engagement for students and faculty alike.
PHASE 1
Establishing a Scalable Design System 🧩
The Problem
Without a structured design system, inconsistencies across UI elements led to inefficiencies for both designers and developers, The lack of proper documentation resulted in redundant design work and slower development cycles.
Research & Strategy
To build a scalable system, I researched industry-leading design systems and audited SearchNEU's existing UI components, identifying inconsistencies in typography, color usage, and component structures.
Key Initiatives
Typography Standardization
Conducted a type audit to unify styles and remove redundant text variations
Color System Optimization
Created a structured color palette for consistent UI application
Reusable Components
Built a Figma component library, reducing design redundancy and increasing efficiency
Comprehensive Documentation
Established clear guidelines for designers and developers, ensuring long-term success
Outcome
The design system laid a strong foundation for scalable and consistent design, improving collaboration between teams and setting up future designers for success.
PHASE 2
Applying the Design System to Improve UX 🎨
Enhancing User Engagement with Strategic UI Updates
Banners to Drive Awareness for New Resources
To highlight additional resources, such as GraduateNU, I introduced banners to the homepage. This approach maximized visibility while ensuring a non-intrusive user experience.
Modals to Encourage Users to Take Action
Since SearchNEU operates as a free service, funding the seat notification feature required user input to demonstrate its value to university leadership. We strategically introduced a modal prompting users to share their experiences via a Google form, leveraging modals only for high-priority interactions like user research.
Toast Notifications for Subtle, but Effective Reminders
A toast notification was introduced to unobtrusively remind users about the feedback form, ensuring continued engagement without disrupting their workflow.
PHASE 3
Redesigning the Mobile Experience for On-the-Go Users 📲
The Problem
SearchNEU's mobile experience lagged behind its desktop counterpart, limiting accessibility and engagement for students needing quick access to course information.
User Research & Insights
Through surveys and user testing, we identified that:
Course name, schedule, and seat availability were the most critical pieces of information
Mobile users prioritized efficiency, preferring a quick glance of information over dense content
Course Card Redesign: Before & After
We restructured the mobile course card to prioritize essential information:
Emphasized course name
Numerical seat status indicators
Standardized course card sizes for uniformity
Outcome
The mobile redesign increased usability, providing a streamlined experience for students check seat availability, course schedules and locations on the go.