SearchNEU
Redesigning the mobile experience for a course search engine.
- Role: UX Design Lead — Interaction Design, Visual Design, User Flows, Prototyping, UX Research
- Team: 1 UX Design Lead 1 UX Designer 4 Developers 1 Project Manager
- Timeline & Status: 4 Months Launched in 2025
Overview
SearchNEU is a course search engine separate from Northeastern University's registration system. It offers better search and filtering, and sends text message alerts to students when seats open in high-demand classes.
SearchNEU was built desktop-first, with mobile compatibility added later in a rush — but students increasingly used it on the go, especially during registration when limited seats meant scrambling for alternatives last second.
I led the redesign of the mobile experience, turning what had been a major drop-off point into an experience students actually reach for.
- 38,000+ — students served
- 25,000+ — seat opening alerts sent a month
Figures: Walkthrough of the redesigned mobile flow.
Context: SearchNEU's mobile experience was so unintuitive that users never opened it on mobile again.
- “I don't get why people keep telling me to use SearchNEU for course registration, I opened it before and it genuinely sucked. I could barely even select the search filters.” — First-year student
- “Don't use it on the phone, there's too much scrolling to compare classes. Just open it on your laptop when you're home.” — Third-year student
- “Why is everything a toggle within a toggle. I can't see any course info after searching!!” — Graduate student
- “I think the developers gave up on mobile lol.” — Second-year CS student
- “This class filled up so now I don't even know what to register for, and I can't check what fills the same requirements til I get home cuz nothing works on mobile.” — Fourth-year engineering student
- “Too much text… too much reading… I already gave up.” — First-year international student
Figures: SearchNEU's original mobile screens.
The Problem: The most important course info was hard to reach on mobile because SearchNEU wasn't built for small screens.
The mobile experience was fundamentally bad at its one job: letting students compare courses easily and quickly. Toggles nested inside toggles and huge blocks of text meant scrolling through walls and tapping through several layers to reach the information students actually wanted.
SearchNEU was designed desktop-first, with mobile added later in a rush. As the desktop version received regular updates, mobile stayed the same slapped-together experience. It was finally time to give mobile the attention it deserved.
Figures: SearchNEU's search results page on desktop, which received the majority of design attention.
Solution: A redesigned mobile experience built for a smaller screen and larger touch areas.
Our Solution
Rather than squeezing the desktop layout onto a phone, we rebuilt the flow around how students actually search on mobile — and brought it in line with what desktop already offered.
Faster scannability: The most important info available at a glance. No more digging through toggles.
The redesigned search results screen has clearer hierarchy, more efficient use of the screen, and more information on each course card for quick comparison.
Nested toggles were removed and replaced with a dedicated course details page, and the cramped header was rebuilt to make the search bar far easier to see and tap.
Figures: Before and after: the course search results page. · The redesigned search results page, annotated.
Easier search filters: Finally, a filter selector built for mobile.
The previous filter modal was buggy and confusing. The redesign overlays the filters on top of the search page and grays it out, so users never feel like they've navigated somewhere else.
The modal is a bottom sheet that's easy to reach one-handed and expandable by swiping up when more room is needed. A three-option selector switches between Northeastern's schools (NEU, CPS, and LAW), matching desktop's functionality.
- Overlay design — keeps users visibly on the same page
- Bottom sheet modal — easily reachable while holding a phone
- Adjustable size — expandable by swiping up
- School selector — quickly switch between NEU, CPS, and LAW
- Collapsible filter sections — less clutter, cleaner UI
- Clear filters button and applied filter indicators
- Larger tap areas built for mobile
Figures: Before and after: the filter selector. · The redesigned filter selector in use.
A dedicated page for course details: Detailed course information in a page students can save and share.
The search results page's nested toggles were replaced with a dedicated course details page. This declutters the design and leaves room for more information without burying it.
It also brings mobile in line with desktop, so students no longer have to switch to a laptop to see everything about a course — and because it's a real page, a course they've found can be saved or sent as a link.
Figures: Before and after: the mobile course details experience. · The dedicated course details page, annotated.
Consistency with desktop: Designs that match across desktop and mobile.
Previously the desktop version carried more information and features, like dedicated course detail pages. Aligning visual design, information, and functionality across both removed a major source of user confusion.
Figures: The redesigned mobile experience alongside desktop. · Translating desktop's notifications table to mobile, annotated.
Easily turn on notifications: Compact, scannable seat opening alerts across course sections.
When you really need to get into one class, you can sign up for alerts across every section — except maybe that 8:00 AM one.
Course sections used to be space-inefficient and hard to compare at a glance, which matters when a course typically has five or more. Switching from cards to a table with clearer hierarchy makes sections easy to scan and compare, streamlining the decision of which alerts to turn on — and matches desktop.
- Better hierarchy and readability — for faster section comparisons
- More compact design — less clutter, improved scannability
- Campus filter — easily find courses at the right location
- New section alerts — get notified when a section is added
Figures: Before and after: seat opening alert notifications. · The redesigned notifications table, annotated. · Turning on seat opening alerts.
Final Designs: Final Design Gallery
Figures: The redesigned mobile experience end to end. · Final mobile designs. · Mobile designs matching desktop. · The notifications table across mobile and desktop.
The Process
As we identified earlier, the main problem with the previous mobile design was…
The problem: The most important course info was hard to reach on mobile because SearchNEU wasn't built for small screens.
So designing with clarity, hierarchy, and determining what our users found most important was the next step.
Research: We asked our users what info they cared most about.
A survey of 21 students rated each piece of course information on a 1–5 scale. Course name and code, class schedule, and available sections came out clearly on top — which told us exactly what had to survive on a course card.
Figures: Survey results ranking which course details students rely on most.
Layout: Then explored layouts to balance functionality with compactness and simplicity.
Low-fidelity wireframes let us test several directions fast — how much to show per card, where filters live, and whether course details expand in place or open as their own page.
Figures: Search results wireframes exploring card density and header layout.
Screen iterations: We iterated on the screens that carried the most weight.
Three areas needed the most iteration: the search results page with the course cards students scan, the details page they land on, and the filters that get them there.
Finding the course cards that are compact but informative.
The hardest part was seat availability. We tested visual representations (dots and bars) against numeric ones, and numbers won — “11/16 sections full” answers the question directly, while the visual versions needed decoding.
Figures: Card explorations comparing visual and numeric ways to show seat status.
Creating visual and functional consistency between desktop and mobile.
Created a separate page for course details, allowing for more space to fit the same amount of information that used to be only available on desktop.
Experimented with the layout and design patterns from desktop, but modified them for mobile to ensure visual consistency that reduces confusion in users when switching from desktop to mobile.
Figures: Course details page iterations, working toward parity with desktop. · The redesigned mobile experience alongside desktop.
Experimented with different filter selector layouts.
Eliminated the full screen option to remove confusion from users feeling like they navigated to a different page, opting for a modal overlay instead.
Ultimately went with the sliding up filter sheet due to it being adjustable in size from swiping up, allowing for more screen space for filter options when needed. This layout seemed most organic for mobile and was best received during user testing.
Figures: Filter wireframes testing side, bottom, and full screen approaches. · High-fidelity comparison of the side, bottom sheet, and full screen filter modals.
Collaboration: Enforcing file organization for better collaboration.
SearchNEU lacked a organization method for its Figma files, resulting in wasted time and frustration spent trying to find a specific page or design element within the 10+ files and cumulative 100+ pages.
We adopted a new organization system that used sections to group designs by subject (e.g. screen, user flow, prototype, iteration).
We also became more mindful of naming pages, marking which designer worked on what, and preparing screens to receive feedback by highlighting small changes between them.
Figures: The Figma workspace before and after adopting a sectioned organization system.
Retrospective
The redesigned mobile experience launched in 2025 and turned SearchNEU's weakest surface into one students rely on during registration. SearchNEU now serves 38,000+ students and sends 25,000+ seat opening alerts every month, and has been praised as the go-to place for all things course registration.
- “Awesome! Idk how people search for classes without SearchNEU.” — Reddit user
- “Thanks for this!! I was using Northeastern's ugly format like two hours ago. I wish I'd known about this earlier.” — Reddit user
- “SearchNEU is such a lifesaver, it's getting me through course registration season.” — Second-year student
- “Have you tried looking on this thing called SearchNEU for what fits your degree requirements? It's way easier than me fumbling around with this old thing.” — Academic advisor at Northeastern
- “Thank god for SearchNEU, otherwise I'd still be stuck with that 8:00 AM class every week.” — Third-year student
- “Wait, when did mobile get a facelift?? This looks fire.” — Second-year CS student
Lessons Learned
The importance of user feedback 💬
User feedback shaped the redesign. Research surfaced pain points and showed why and how different people use SearchNEU — including edge cases we hadn't considered, like last-minute sections added for hard-to-get courses.
Inconsistent designs cause confusion 😵💫
A big source of frustration was the gap between desktop and mobile, both visually and functionally. The redesign focused on reusing desktop's design patterns and optimizing them for a smaller screen.
Always think about the future ⏩
Designing for current needs isn't enough — systems, components, and flows have to make sense with what's coming. We accounted for roadmap goals like a tutorials/FAQ page and notifications management.