The live website can be viewed at https://melcourses.com.
Introduction
MelCourses is a course lookup and schedule building website that scrapes University of Rochester course data to help students plan more easily. It improves upon the University website by providing a simple, clean UX and many extra features (visualize time conflicts, more search filters, 4-year plan). It was built by the student organization RocLab, which aims to create software solutions to meet the needs of the university community.
I was recruited to work on MelCourses shortly after designing my own separate course scheduling website prototype, which can be viewed here. Joining mid-way through development in December 2023, I first focused on redesigning existing flows based on user feedback. However, my first major contribution came the following fall, when I led the mobile design. This case study will highlight that process.
Impact
Mobile design helped drive adoption to over 1,400 students during November 2024 course registration
Increase of peak monthly active users from 13% to 20% of the undergraduate population
Earned official University endorsement as the primary course planning resource for students
Problem
At the start of the semester, the MelCourses team set a goal to launch a mobile layout in time for the upcoming course registration period.
I was initially given one month to design and test the mobile experience, but the timeline was unexpectedly shortened to just two weeks. This was driven by the need for new components and significant development effort.
The challenge was balancing stakeholder needs: developers had to work within technical constraints, while the design team (including myself) advocated for the best possible user experience. With limited screen space on mobile, we needed to carefully decide what information to prioritize, what details to hide, and how to manage complexity without overwhelming users.
How might we design a mobile experience that makes the most important details clear at a glance?
How might we hide complexity in a way that keeps it accessible when needed?
How might we balance development constraints with delivering the most intuitive design?
On desktop, MelCourses splits the flow into two main pages:
Course Search page - students look up and add courses here. A mini-calendar appears when adding, so conflicts can be visualized immediately.
Schedule page - students view and refine their schedules, switching sections, exporting, and visualizing time blocks.
The challenge was adapting this two-page flow to mobile, where limited space meant these interactions had to be rethought.
Because of the short timeline and different constraints from developers and designers, multiple rounds of back-and-forth feedback weren’t feasible. I decided to run a quick exploration phase, creating six distinct variations of the mobile flow. This approach allowed stakeholders to compare concrete options side by side and pick and choose the strongest ideas, rather than debating theoretical tradeoffs.
Option 1 - All screens nested under hamburger menu
Option 2 - One page, search bar on the schedule page
Option 3 - Tab switch navigation, schedule selector on top
Option 4 - Tab switch navigation, schedule selector on calendar only
Option 5 - Icon header navigation, schedule selector on calendar only
Option 6 - Search page is a drawer that pops up from schedule
The team ultimately combined the icon tab navigation from Option 5 with the drawer-based course adding from Option 6.
Initial iteration
On the desktop version of MelCourses, the sidebar on the right contains a full schedule visible on both the Search and Calendar pages:
On mobile, there wasn’t enough space for this persistent view, so I explored the idea of using a pop-up.
I realized users rarely switch their sections on the Search page, so it was only necessary to include the full schedule list on the Calendar page, which I nested under the plus button:
On the Search page, users just had to know which schedule they were adding courses into. To address this, I added a dropdown selector at the top of the Search page to indicate the target schedule:
Iteration 2
After reviewing the initial design, concerns about schedule selection came up:
Bon (Team Lead): “Users might miss selecting a schedule first on the Search screen—they’re thinking about searching, not which schedule to add to. How could we move this option so their attention is directed correctly?”
Fin (UX): “I tested this with my friends—some of them missed the selector entirely and added courses to the wrong schedule.”
I decided it would be best to move the schedule selection inside the course-adding drawer, so it becomes a conscious step in the flow. This guided users to the correct schedule without extra steps, reducing errors while keeping the interface clean.
Final Prototype
After iterating through multiple flows and prototyping solutions, I finalized the mobile design while ensuring alignment with desktop functionality. Here are the key improvements:
Simplified icon header
The two core pages were given prominent icon placement for quick navigation, while secondary features (4-year plan, cluster search, etc.) were tucked under a hamburger menu to reduce cognitive load.
Confirmation Popup
Added a confirmation popup when adding a course, including a link to view the schedule, to reassure users that their action was successfully completed.
Swipeable drawer
Inspired by the Google Calendar app, users can swipe the drawer up and down to view and select course sections. This solution balances limited screen space while allowing interaction with the schedule. Full visualization and section selection cannot occur simultaneously, so this was the most practical compromise.
After completing the design, I conducted usability testing over three days with representative users, asking them to locate key features and perform typical tasks. The results indicated a high task success rate and low error rate, with participants consistently able to find and interact with core functionality with ease. Based on this feedback, minor refinements were made before handing the design off to developers.
The final mobile layout was implemented in time for the next course registration cycle. You can view the live website at https://melcourses.com.
Working on MelCourses’ mobile design taught me the importance of balancing user needs, technical constraints, and time pressure. By exploring multiple design variations early and combining the strongest elements, I was able to quickly deliver a solution that satisfied both users and developers.