0 to 1 | ToC Web App | Education Tech｜Design System | Responsive Design
Melcourses Cluster Search Engine
Role
Lead UX Designer
Worked with a PM, 3 UX Team Members & 3 SW Engineers
Timeline
Sep 2024 - May 2025
Tasks
0 to 1 Product Design
Design System
User Research
Design Iterations
Cross-functional Collaboration
Tools
Figma
Notion
OVERVIEW
Melcourses Cluster Search Engine is a centralized tool designed to simplify how undergraduates explore and choose academic clusters at University of Rochester, who often struggle to locate relevant academic guidelines and course groupings.
As part of the 0 → 1 Product Design, I led the end-to-end interface design and refined the user search path to reduce cognitive load and help students navigate academic choices with confidence and clarity.
IMPACT
We succeeded in growing +250% Monthly Active Users (MAU) across the platform
These enhancements underscore our commitment to delivering a more effective and user-centered platform experience for our users.
81
Net Promoter Score during the recent course registration period
2000+
Registered University of Rochester students on the platform
46
Academic departments endorsed and funded the project
HIGHLIGHTS
An intuitive cluster search engine that organizes scattered course data into easily understood groupings, helping students discover and compare clusters and classes effortlessly
PROBLEM SPACE
Students Complain, We Listen
What's the problem?
The University of Rochester offers a unique “cluster” system — optional sets of three related courses outside a student’s major or minors, designed to encourage exploration across disciplines.
While clusters provide flexibility, the university’s cluster search website made the selection process complicated and confusing. As a previous user myself, I struggled with the tool during my first two years and eventually abandoned it, relying instead on peers and my academic advisor to plan my courses.
Define User Group
We identified two distinct user groups navigating the cluster search engine. The first group begins in an exploratory stage, browsing without clear goals. Over time, these students transition into the second group: users with defined cluster goals who actively plan remaining courses. This evolution shaped how we approached the redesign, ensuring the tool supports both discovery and decision-making.
Define User Flow
Building on these user groups, we mapped the existing user flow of the cluster search engine to understand where each group experienced the most friction.
The current flow starts with setting filters, browsing a static list, and opening cluster details on separate pages. Exploratory users often restart searches as their interests shift, while goal‑oriented users repeatedly check requirements. Both struggle with one‑time filters, back‑and‑forth comparisons, and unclear language that drives them to seek help from peers or advisors.
Validate User Struggles
To validate these pain points and better understand the specific breakdowns in the university’s current cluster selection website, we conducted in-person usability testing with 10 undergraduate students.
We designed a testing script in Notion first and asked participants to use the existing tool to find a cluster that fulfilled both their graduation requirements and personal interests. Throughout the sessions, we tracked their search time, navigation patterns, and verbal reactions to measure satisfaction and efficiency.
25 min
Avg Task Time
to find one suitable cluster
3/10
Avg Satisfaction Score
100%
of the participants repeated Search flow
80%
of the participants are confused with website's navigation and filter
PROBLEM STATEMENT
How might we simplify the cluster selection process for University of Rochester undergraduates so that they can confidently find, understand, and choose academic clusters without confusion or unnecessary repetition?
GOAL
We Designed Our Own Tool
Product Goals
Pain Points to Opportunities
Through usability testing, interviews, and heuristic evaluation, we uncovered recurring pain points in the cluster search process. We synthesized these into design opportunities to guide the solution.
LAYOUT
Clear, Adaptive, and Visually Prioritize
Information Layout
Supporting Quick Filtering and Visual Priority
I applied a three-column layout, with each section serving a distinct function. The structure balances quick access to cluster filters with a clear separation of tasks. Visual hierarchy centers on the middle column, keeping course information in focus while the side columns provide contextual tools and references.
Lo-Fi Design
I began with low-fidelity wireframes to quickly explore layout options and validate the core user flows. At this stage, the focus was on information architecture, navigation patterns, and the placement of key elements.
First Iteration
Our initial concept was to provide a 4-year academic planning tool — an idea inherited from earlier discussion and blueprint of the project across the platform.
However, usability testing and interviews with our target audience revealed a misalignment: the majority of our users were freshmen and sophomores who had not yet committed to a fixed four-year plan.
Instead, they expressed a strong desire to explore academic options during their first two years. This insight prompted us to reconsider whether we should promote it in the MVP.
Interview Script - 4-year plan
Interview Notes
Second Iteration
Based on these findings, we redesigned the right-hand column as a Cluster Search Guide to help new students select clusters aligned with their intended majors.
Thinking Out of the Frame
In discussions with the development team, we identified an opportunity to extend this into a search history feature, allowing users to revisit and compare their past searches. This pivot transformed the feature from a static informational panel into an evolving exploration tool, aligning better with students’ decision-making journey while supporting long-term academic planning.
INTERACTION
From static info to interactive flow
1 Smart Dialog for Navigation
Guiding Users through the Selection Process
We transformed the school’s original website, previously a static information listing page, into an interactive decision-support tool. Instead of passively displaying course and cluster details, the redesigned platform actively engages students in the selection process.
By introducing dialog modal design, the interface provides contextual guidance at key decision points, helping users evaluate requirements and explore relevant options without cognitive overload.
This shift from static content to guided interaction not only improved information discoverability but also empowered students to make more confident and informed choices during cluster and course selection.
2 Linked save & edit
We designed a save-and-edit flow where saved items automatically appear in the sidebar save history. This cross-module linkage allows users to revisit their selections in context and adjust them according to their evolving schedules. By making progress persistent and editable, the system supports flexible exploration while reducing the risk of losing important decisions.
VISUAL DESIGN
Design System for Scale
Color
In this design system, color was primarily applied to tag components to visually differentiate cluster categories. Each level of information—such as divisions, departments, and class tags—was assigned distinct color variations, allowing users to quickly scan and recognize which category a cluster belonged to without relying solely on text labels. This consistent application of color reduced cognitive load and supported more intuitive navigation when comparing multiple clusters side by side, especially in dense course selection scenarios.
Design Specs
I not only ensured that prototypes were fully interactive and delivered with clear interaction logic, but also placed strong emphasis on meticulously documenting behaviors and design rationale. This careful documentation supported transparent communication with developers and reduced ambiguity during implementation.
To further streamline collaboration, I established an engineering handoff process dedicated to aligning with developers, ensuring clarity, consistency, and efficiency throughout the build phase.
RESPONSIVE DESIGN
Clarity & Accessibility Across Devices
Transferring Main Features
Ensuring Functionalities on Smaller Screens
The web version relied on a three-column layout to display different functions side by side, but this approach could not translate directly onto mobile without overwhelming the limited screen space.
To resolve this, I redesigned the structure into a top navigation system. By introducing clear and recognizable icons, users can easily switch between functionalities, maintaining the same breadth of features while ensuring smooth navigation on a smaller device.
Adapting Guided Flows to Mobile
The course selection flow on desktop relied on a dialog box to guide users step by step. Translating this to mobile required balancing clarity with limited screen space. I introduced a bottom sheet design that surfaces guidance when needed, keeping information dense yet digestible. This approach preserved continuity of the user journey by providing support without fully interrupting the task flow.
REFLECTION
I learned a lot during the product lifecycle:
Iterative, user-centered design
Cross-functional collaboration
Feature prioritization and trade-offs
Documentation for alignment
