CASE STUDY
SearchNEU
Redesigning Mobile
Overview
My Role
As a UX Designer at Sandbox Software Consultancy, I worked on the SearchNEU team to enhance the mobile experience.
Redesigned 20+ screens and created a new filter modal
Revamped the flagship notification feature for mobile
Conducted 10+ user interviews to identify pain points
Team
2 UX/UI Designers (including me!)
4 Developers
1 Project Lead
Tools
Design - Figma
Development - Next.js, Typescript/Javascript, Node.js/Express, Elasticsearch, AWS + Terraform, PostgreSQL, GraphSQL, Docker
Duration
September - December 2024 (4 months)
Currently in development! 🔧
PREVIEW
This project is currently in development and will be deployed by April 2025! 🚀
The demo video below shows the final prototyped design in Figma.
Demo of the redesigned SearchNEU mobile screens.
Redesigned SearchNEU mobile screens.
Problem
About SearchNEU
SearchNEU is a student-built course search engine that makes it easier for Northeastern students to find classes, view professor details, and sign up for text notifications for seat openings of filled classes at Northeastern University.
Originally created by Ryan Hughes in 2017, it has been continuously improved by Sandbox, Northeastern's student-led software consultancy.
The SearchNEU desktop landing page (click on images to enlarge them).
ISSUES WITH COURSE REGISTRATION
The official system, Banner, is frustrating and outdated.
Hard to scan and compare course details at a glance
Outdated UI designs with an especially poor mobile experience
Unintuitive search and filtering features
Difficult to find courses that fit graduation requirements
Courses fill up fast, forcing students to check back constantly.
Students often struggle to get into required courses due to limited seats.
Even waitlists reach capacity quickly
Banner lacks notifications, so students are forced to keep manually checking to catch an open spot
Banner, Northeastern University's official course search and registration system (on desktop).
How SearchNEU Solves this Problem
User-friendly search & filtering: Makes it easier to find courses that fit requirements
Text notifications: Alerts students when a seat opens up or a new section is added
Adoption and impact: SearchNEU sends 7,000+ notifications per month
SearchNEU, Northeastern's student-built course search tool (desktop).
The Problem with Mobile
SearchNEU was originally designed as a desktop-first platform, with mobile compatibility added later in a rush. As a result, students struggle to use key features like searching, filtering, and signing up for notifications efficiently on mobile devices.
Given that many students rely on their phones for quick, on-the-go access to course information, the lack of an optimized mobile experience leads to frustration and missed opportunities.
SearchNEU's original mobile designs.
PROBLEM
SearchNEU design isn't optimized for smaller screens, making it hard for on-the-go students to check course information.
Pain Points
It's hard to scan course details quickly due to information being cluttered or buried
Frustrating interactions, like buttons and key actions appearing outside the screen
Desktop and mobile designs are inconsistent, causing confusion
Searching requires too many steps with many nested toggles
Too much information on one page or within toggles
No dedicated course detail page, making it difficult to share or bookmark
This led to confusion and frustration from mobile users, leading to decreased student engagement and adoption of the notifications feature.
Key Issues (with Mobile)
Inefficient use of space: Poor layout and hierarchy create visual clutter
Buggy experience: Screen misfits and broken interactions
Inconsistent design from desktop: Lack of visual and functional cohesion
Overcomplicated search results: Course details are shown in nested toggles
Solution
SOLUTION
A reimagined mobile experience that prioritizes ease of use and better utilizes the limited screen space.
To improve the SearchNEU experience for on-the-go students, we redesigned the mobile experience with the smaller screen size in mind, focusing on these areas for improvement:
Creating more easily scannable search results
A new separate course details page
Notifications feature
Search and filters
Consistency with desktop designs (design and content-wise)
Redesigned SearchNEU mobile screens.
Demo of the redesigned SearchNEU mobile screens.
Key Improvements
Faster scannability - Improved information hierarchy
Dedicated course details page - Eliminates unnecessary nested toggles
More course details on mobile - Previously desktop-only information now added
Compact notifications tables - Easier section comparisons and subscribing
Improved search and filters - Enabling faster and easier course discovery
Consistency with desktop designs - Reducing confusion with cohesion
Impact 🚀
Northeastern's only solution for time-sensitive seat openings besides waitlists
Directly impacts 7k+ monthly active users, sending 25k+ notifications per month
Improves viewing course information on mobile for an audience of 38k+ students
IMPROVEMENT #1
Scan and compare course details at a glance.
The redesigned search results screen now has better hierarchy, efficient use of the screen size, and more information on course cards for quick and easy comparison.
The UI has been decluttered by removing nested toggles, replacing them with a dedicated course details page.
The cramped header was redesigned to make the search bar more prominent, allowing users to more easily see, tap on, and type into the search bar.
Before and after redesigns, mobile search results page.
Redesigned mobile search results page.
IMPROVEMENT #2
A dedicated page to course details.
The search results page's nested toggles were removed, replacing them with a separate course details page.
This declutters the design, allowing more space for additional information without the need for so many toggles.
This also allows the design to be consistent with desktop, causing less confusion among users who previously had to use SearchNEU on desktop to view all the information on a course.
Before and after redesigns, course details page on mobile.
Redesigned mobile course details page.
IMPROVEMENT #3
Mobile notifications redesigned to be compact and scannable.
Previously, course section details were space-inefficient, making it difficult to compare options at a glance, especially when courses typically have 5+ sections offered.
By improving hierarchy and switching from a card to table format, course sections are now easier to scan and compare, streamlining the decision-making process for choosing which notifications to sign up for.
Key Improvements
Better hierarchy and readability - For faster course section comparisons
More compact design - Reduced clutter for improved scannability
Campus filter - Easily find courses at the right location
New section alerts - Get notified when a new section is added
Before and after redesigns, notifications feature on mobile.
Redesigned notifications feature on mobile.
Demo of the redesigned SearchNEU notifications table for mobile.
IMPROVEMENT #4
A new filter modal built for ease of use on mobile.
To remove confusion from users feeling like they navigated to a different page, the filter modal overlays on top of the search page and grays it out.
The filter modal is adjustable in size and can be made larger by swiping up, allowing for more screen space for filter options when needed.
A selector with 3 options allows for easy switching between different schools at Northeastern (Undergraduate, College of Professional Studies, and School of Law) while providing more consistent functionality with SearchNEU's desktop experience.
Key Improvements
Overlay design - Preventing confusion by keeping users visibly on the same page
Bottom sheet modal - Easily accessible while holding a phone
Adjustable modal size - Expandable by swiping up for more visibility
School selector - Quickly switch between NEU, CPS, and LAW
Collapsible filter sections - Reduces clutter for a cleaner UI
Clear filters button - Easily reset filters
Applied filter indicators - Provides clarity on active filters
Before and after redesigns, filter modal (on mobile).
Demo of the redesigned SearchNEU filter modal for mobile.
IMPROVEMENT #5
Improved consistency between mobile and desktop designs.
Reducing confusion with users by ensuring consistent visual design, information, and functionality with mobile. Previously, the desktop version had more information and features like dedicated course detail pages.
Improved consistency between mobile and desktop for the course details page.
Improved consistency between mobile and desktop for the notifications table.
Process
UX RESEARCH
Determining what information students find most important.
One of the main priorities of the mobile redesign was improving readability through hierarchy, efficient use of space, and ensuring the most important information easily visible (no longer hidden in excessive nested toggles).
This first required input from users on what information they find the most important, which was determined through conducting 5+ user interviews and 20+ survey respondents.
Asking students in a survey to rank course information from not important (1) to most important (5).
Survey results where students were asked to rank course information from not important (1) to most important (5).
User Interviews
Conducted 5+ user interviews of people from different backgrounds (e.g. majors, year of study, schools, experience with course registration) to better understand why and how they use SearchNEU and identify pain points with the desktop and mobile versions.
Sample questions:
What tools do you typically use when looking for classes?
Which device(s) do you typically use to research classes?
Have you ever used SearchNEU to sign up for notifications for seat openings?
What features are valuable and why?
What prevents you from using SearchNEU?
If you could change anything, what would it be and why?
I noticed you did ______. Why?
What do you expect to see in our product in the future?
Tasks users were asked to do (on desktop and mobile):
Look up a course a user wants to enroll in that is full
Sign up for a notification
Check the status of notifications
Unsubscribe from a notification
PROJECT SCOPE
Prioritizing what designs to tackle first.
After conducting UX research, it was determined that revamping mobile designs were a top priority thanks to the amount of students that wanted a quick and easy solution for checking course information on-the-go, (especially when considering Northeastern's official Banner solution has a difficult to use mobile experience).
This took priority over other plans that weren't as impactful or time sensitive, such as a generator to determine all the possible schedules you could take based on your requirements and input.
We then determined the specific screens that needed to be redesigned to revamp the mobile experience.
Search results
Filter modal
Course details page
Notifications table
SearchNEU's original mobile designs.
EXPLORATION AND ITERATION
Exploring layouts to balance functionality with compactness and simplicity.
Quickly experimented with different wireframes to test layouts that varied in hierarchy, compactness, features, and design.
Ultimately decided to avoid toggles due to the limited screen size on mobile, prioritizing the most important course details on the cards and putting the more complex notifications for course sections information into a table on the individual course details page instead.
Wireframes for the search results page.
Wireframes for the filter modal.
Iterating on course cards to be compact but informative.
Experimented with displaying different amounts of information based on UX research on what users found most important.
Explored different ways of visually and numerically representing seat opening statuses using color, percentages, show number of sections full versus available, etc.
Different iterations of course cards.
Iterating on the course details page to be consistent with desktop visually and functionally.
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.
Different iterations of the course details page and notifications table.
Experimenting with different filter modal 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 bottom filter modal due to it being adjustable in size from swiping up, allowing for more screen space for filter options when needed.
Different iterations of filter modal layouts.
Making collaboration easier in Figma with organized files.
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.
Before and after of organizing SearchNEU's Figma design files.
Final Designs
MOBILE REDESIGNS
Finalized mockups for SearchNEU's revamped mobile experience.
Scroll to the “Solution” section for additional information on finalized designs.
Demo of the redesigned SearchNEU mobile screens.
Redesigned SearchNEU mobile screens.
Improved consistency between mobile and desktop for the course details page.
Improved consistency between mobile and desktop for the notifications table.
Reflection
LEARNINGS AND GROWTH
The importance of user feedback 💬
User feedback was essential in shaping our redesign. Through UX research, we uncovered pain points and learned more about why and how different people use SearchNEU. For example, certain courses are especially hard to get into, resulting in last minute sections being added to a semester, creating a new edge case for notifications.
Inconsistent designs cause confusion 😵💫
A big contributor to user frustration and confusion was the inconsistencies between desktop and mobile designs, both visually and functionally. To combat this, the mobile redesign was especially focused on reusing design patterns from desktop but optimizing them for a smaller screen size.
Always think about the future ⏩
While designing, we had to consider not just current needs, but how the product will evolve. This is important for designing systems, components, and user flows that will make sense with upcoming features.
We currently are working on a tutorials/FAQ page and notifications management features!
A SearchNEU team dinner!
Thanks for reading!
Let me know if you have any questions or feedback for this case study :)