Implementing a new course planning experience for 10,000 U of Rochester students
Implementing a new course planning experience for 10,000 U of Rochester students
Implementing a new course planning experience for 10,000 U of Rochester students
Implementing a new course planning experience for 10,000 U of Rochester students
The website was launched on Dec 2023 here at https://melcourses.com/
The website was launched on Dec 2023 here at https://melcourses.com/
The website was launched on Dec 2023 here at https://melcourses.com/
The website was launched on Dec 2023 here at https://melcourses.com/
Teammates
Teammates
2 Engineers, 4 Designers and 1 PM
2 Engineers, 4 Designers and 1 PM
Role:
Role:
UX Designer -> Product Design Lead
Product Design Lead
UX Designer -> Product Design Lead
Product Design Lead
Date:
Date:
Sep 2023 - Present
Sep 2023 - Present
Tools
Tools
Figma / HTML / CSS / Javascript
Figma / HTML / CSS
Figma / HTML / CSS / Javascript
IMPACT
IMPACT
IMPACT
Students, and faculty across the University of Rochester took advantage of our technology
Students, and faculty across the University of Rochester took advantage of our technology
Students, and faculty across the University of Rochester took advantage of our technology
2000+
2000+
2000+
Registered Rochester students on Melcourses
Registered Rochester students on Melcourses
Registered Rochester students on Melcourses
46
46
46
Departments (Computer Science, Digital Media, etc) endorsed and funded the project
Departments (Computer Science, Digital Media, etc) endorsed and funded the project
Departments (Computer Science, Digital Media, etc) endorsed and funded the project
6
6
6
Schools have used this website for their course planning and advising (Arts and Science, Simon Business School, UR Medical School...)
Schools have used this website for their course planning and advising (Arts and Science, Simon Business School, UR Medical School...)
Schools have used this website for their course planning and advising (Arts and Science, Simon Business School, UR Medical School...)
SO WHAT WAS THE PROBLEM?
SO WHAT WAS THE PROBLEM?
SO WHAT WAS THE PROBLEM?
The past course-planning process on Workday and the university's platform was overly lengthy, and complex, requiring students 10+ steps to add a single class the saved schedule
The past course-planning process on Workday and the university's platform was overly lengthy, and complex, requiring students 10+ steps to add a single class the saved schedule
The past course-planning process on Workday and the university's platform was overly lengthy, and complex, requiring students 10+ steps to add a single class the saved schedule
ON WORKDAY
ON WORKDAY
User flow Break-Down💀
User flow Break-Down
User flow Break-Down
“Going through all this process is so annoying and daunting” - Jacob '25
“I hate course planning season. I don’t know why the university hasn’t created a more streamlined way to plan courses” - Emily
“Going through all this process is so annoying and daunting” - Jacob '25
“I don’t know why the university hasn’t created a more streamlined way to plan courses” - Emily
“Going through all this process is so annoying and daunting” - Jacob '25
“I I don’t know why the university hasn’t created a more streamlined way to plan courses” - Emily '26
THE PROBLEM
The current course-planning process on Workday and the university's platform is overly lengthy, and complex, requiring students 10+ steps to add a single class the saved schedule
ON WORKDAY
User Flow Break-Down 💀
“Going through all this process is so annoying and daunting” - Jacob '25
IMPACT
Students, faculty, and staff from across the University of Rochester took advantage of our technology
2000
Registered students on Melcourses
46
Departments endorsed and funded the project
6
Schools sed this website for academic advising
How might we make it easier for students to browse classes, see all the key details fast, and drop their picks straight into their schedule for planning and registration?
How might we make it easier for students to browse classes, see all the key details fast, and drop their picks straight into their schedule for planning and registration?
How might we make it easier for students to browse classes, see all the key details fast, and drop their picks straight into their schedule for planning and registration?
How might we make it easier for students to browse classes, see all the key details fast, and drop their picks straight into their schedule for planning and registration?
SOLUTIONS
1 / Streamlined Course Description Viewing with Accordion Format
Designed an accordion menu that expands course details within the same page, letting students browse and compare options quickly without extra page navigation.
2 / Streamlined Course-to-Save Process
Created a 3-click flow (view → preview → save) using a dialog modal overlay. The modal provides real-time visibility into already saved courses, making the process faster and more transparent.
3/ Mobile Opitimization
Since students usually rely on their phone calendars, it’s important to make sure the user flow is fully optimized for mobile web.
DISCOVERY RESEARCH
DISCOVERY RESEARCH
Synthesizing findings from qualitative studies (n=16), college students nowadays share a preference for:
Synthesizing findings from qualitative studies (n=16), college students nowadays share a preference for:
Color Coding and Visualization
Color Coding and Visualization
9/16 of student members use tools like Notion and Google Calendar to color-code and visualize their course schedules.
9/16 of student members use tools like Notion and Google Calendar to color-code and visualize their course schedules.
Quick and bite-sized information
Quick and bite-sized information
As attention spans are shrinking, students prefer an intuitive experience without feeling overwhelmed by excessive information.
As attention spans are shrinking, students prefer an intuitive experience without feeling overwhelmed by excessive information.
Customization and Control
Customization and Control
Students are eager to take control of the information they receive and enjoy actively engaging in viewing and planning their classes.
Students are eager to take control of the information they receive and enjoy actively engaging in viewing and planning their classes.
Accessible and easy planning process
Easy planning process
Unlike traditional software design, modern student users prioritize ease of use, favoring tools with minimal learning curves.
Unlike traditional software design, modern student users prioritize ease of use, favoring tools with minimal learning curves.
LOW-FIDELITY PROTOTYPE
LOW-FIDELITY PROTOTYPE
LOW-FIDELITY PROTOTYPE
Implementing the accordion format for the course card design
Implementing the accordion format for the course card design
Implementing the accordion format for the course card design
LOW FIDELITY
LOW FIDELITY
LOW FIDELITY
HIGH FIDELITY
HIGH FIDELITY
HIGH FIDELITY
Based on user feedback, the "Add to Schedule" button has been moved to the front of the course card and redesigned with a clearer call-to-action. Since adding courses is a core user task, this update enables users to quickly add courses to their schedules without needing to expand the card.
Furthermore, the "Major," "Minor," and "Cluster" tags have been removed for the MVP stage, as sourcing data for diverse program requirements proved too complex and time-intensive.
Based on user feedback, the "Add to Schedule" button has been moved to the front of the course card and redesigned with a clearer call-to-action. Since adding courses is a core user task, this update enables users to quickly add courses to their schedules without needing to expand the card.
Furthermore, the "Major," "Minor," and "Cluster" tags have been removed for the MVP stage, as sourcing data for diverse program requirements proved too complex and time-intensive.
But what about the overall experience of choosing and adding courses to the schedule?
A/B TESTING
Option A: Dialog Modal is the most optimal solution with the shortest task time and highest users’ satisfaction rate
We developed two concepts to streamline the course selection and scheduling processes. Following that, we conducted A/B testing with users to determine which option allowed them to complete the tasks in the least amount of time.
Option A
Pop-up Dialog Modal to select labs and workshops
Option B
Drop-down menu to select labs and workshops
Option A
Pop-up Dialog Modal
Option B
Drop-down menu selection
Average Task time
8 seconds
18 seconds
Satisfaction Rate
9.5/10
6/10
Qualitative Feedback
“Wow I love how it pops up here instead of leading me to a different page”
“After picking the workshops and labs, I have to scroll back up to add the class to the schedule, which is kind of annoying and time-consuming”
ITERATION
Despite the high satisfaction rate, users still express frustration with the dialog design because they cannot see whether newly added courses conflict with their saved schedule.
“I wish there could be a way to see if the course I add crash with others. I always need to switch screens”
“Oh it crashes. I wish I could view what I have saved”
“Lol. It crashes with CSC 212, now I have to remove it”
Therefore, we implemented a calendar view within the dialog modal :)
FINAL USER FLOW
A streamlined 4-step user flow with a clear start and end
We cut redundant steps to significantly save users time and boost overall efficiency.
Before
After
DISCOVERY RESEARCH
Synthesizing findings from qualitative studies (n=16), college students nowadays share a preference for:
Color Coding and Visualization
9/16 of student members use tools like Notion and Google Calendar to color-code and visualize their course schedules.
Quick and bite-sized information
As attention spans are shrinking, students prefer an intuitive experience without feeling overwhelmed by excessive information.
Customization and Control
Students are eager to take control of the information they receive and enjoy actively engaging in viewing and planning their classes.
Accessible and easy planning process
Unlike traditional software design, modern student users prioritize ease of use, favoring tools with minimal learning curves.
LEARNINGS
In this collaborative project, I learnt:
Design system craftmanship
Creating reusable, scaleable, and consistent design elements taught me the importance of forward-thinking in design—anticipating future needs and ensuring the system could accommodate them.
Involving engineers in the design process
Having engineers early in the loop to identify technical constraints, test design concepts, and implement feasible solutions was very valuable.
User testing, testing, and testing
Before launching a product, ensure it undergoes thorough testing. You might discover more UX bugs than anticipated
OTHER UX PROJECTS
LEARNINGS
In this collaborative project, I learnt:
Design system craftmanship
Creating reusable, scaleable, and consistent design elements taught me the importance of forward-thinking in design—anticipating future needs and ensuring the system could accommodate them.
Involving engineers in the design process
Having engineers early in the loop to identify technical constraints, test design concepts, and implement feasible solutions was very valuable.
User testing, testing, and testing
Before launching a product, ensure it undergoes thorough testing. You might discover more UX bugs than anticipated
A/B TESTING
Option A: Dialog Modal is the most optimal solution with the shortest task time and highest users’ satisfaction rate
We developed two concepts to streamline the course selection and scheduling processes. Following that, we conducted A/B testing with users to determine which option allowed them to complete the tasks in the least amount of time.
Option A
Pop-up Dialog Modal to select labs and workshops
Option B
Drop-down menu to select labs and workshops
Option A
Pop-up Dialog Modal
Option B
Drop-down menu
Average Task time
8 seconds
18 seconds
Satisfaction Rate
9.5/10
6/10
Qualitative Feedback
“Wow I love how it pops up here instead of leading me to a different page”
“After picking the workshops and labs, I have to scroll back up to add the class to the schedule, which is kind of annoying and time-consuming”
ITERATION
Despite the high satisfaction rate, users still express frustration with the dialog design because they cannot see whether newly added courses conflict with their saved schedule.
“I wish there could be a way to see if the course I add crash with others. I always need to switch screens”
“Oh it crashes. I wish I could view what I have saved”
“Lol. It crashes with CSC 212, now I have to remove it”
Therefore, we implemented a calendar view within the dialog modal :)
FINAL USER FLOW
A streamlined 4-step user flow with a clear start and end
We cut redundant steps to significantly save users time and boost overall efficiency.
Before
After
Final User Flow
A streamlined 4-step user flow with a clear start and end
Before
After
Final User Flow
A streamlined 4-step user flow with a clear start and end
Before
After
Final User Flow
A streamlined 4-step user flow with a clear start and end
Before
After
Final User Flow
A streamlined 4-step user flow with a clear start and end
We cut redundant steps to significantly save users time and boost overall efficiency.
Before
After
But what about the overall experience of choosing and adding courses to the schedule?
SOLUTIONS
1 / Streamlined Course Description Viewing with Accordion Format
Designed an accordion menu that expands course details within the same page, letting students browse and compare options quickly without extra page navigation.
2 / Streamlined Course-to-Save Process
Created a 3-click flow (view → preview → save) using a dialog modal overlay. The modal provides real-time visibility into already saved courses, making the process faster and more transparent.
3/ Mobile Opitimization
Since students usually rely on their phone calendars, it’s important to make sure the user flow is fully optimized for mobile web.
But what about the overall experience of choosing and adding courses to the schedule?
A/B TESTING
Option A: Dialog Modal is the most optimal solution with the shortest task time and highest users’ satisfaction rate
We developed two concepts to streamline the course selection and scheduling processes. Following that, we conducted A/B testing with users to determine which option allowed them to complete the tasks in the least amount of time.
Option A
Pop-up Dialog Modal to select class sections
Option B
Drop-down menu to select class sections
ITERATE
Despite the high satisfaction rate, users still express frustration with the dialog design because they cannot see whether newly added courses conflict with their saved schedule.
Therefore, we implemented a calendar view within the dialog modal :)
LEARNINGS
In this collaborative project, I learnt:
Design system craftmanship
Involving engineers in the design process
Testing, testing, and testing
OTHER UX PROJECTS
OTHER UX PROJECTS
SOLUTIONS
1 / Streamlined Course Description Viewing with Accordion Format
Designed an accordion menu that expands course details within the same page, letting students browse and compare options quickly without extra page navigation.
2 / Streamlined Course-to-Save Process
Created a 3-click flow (view → preview → save) using a dialog modal overlay. The modal provides real-time visibility into already saved courses, making the process faster and more transparent.
3/ Mobile Opitimization
Since students usually rely on their phone calendars, it’s important to make sure the user flow is fully optimized for mobile web.
LOW-FIDELITY PROTOTYPE
How might we use the accordion format to help students view different courses quickly ?
LOW-FIDELITY
HIGH-FIDELITY
But what about the overall experience of choosing and adding courses to the schedule?
A/B TESTING
Option A: Dialog Modal is the most optimal solution with the shortest task time and highest users’ satisfaction rate
We developed two concepts to streamline the course selection and scheduling processes. Following that, we conducted A/B testing with users to determine which option allowed them to complete the tasks in the least amount of time.
Option A
Pop-up Dialog Modal
Option B
Drop-down menu
ITERATE
Despite the high satisfaction rate, users still express frustration with the dialog design because they cannot see whether newly added courses conflict with their saved schedule.
Therefore, we implementing a calendar view within the dialog modal :)
OTHER UX PROJECTS
OTHER UX PROJECTS
OTHER UX PROJECTS
OTHER UX PROJECTS
SOLUTIONS
1 / Streamlined Course Description Viewing with Accordion Format
Designed an accordion menu that expands course details within the same page, letting students browse and compare options quickly without extra page navigation.
2 / Streamlined Course-to-Save Process
Created a 3-click flow (view → preview → save) using a dialog modal overlay. The modal provides real-time visibility into already saved courses, making the process faster and more transparent.
3/ Mobile Opitimization
Since students usually rely on their phone calendars, it’s important to make sure the user flow is fully optimized for mobile web.