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/
Teammates
Teammates
2 Engineers, 4 Designers and 1 PM
2 Engineers, 4 Designers and 1 PM
Role:
Role:
UX Designer -> 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 / Javascript
IMPACT
IMPACT
IMPACT
Students, faculty, and staff from across the University of Rochester took advantage of our technology
Students, faculty, and staff from across the University of Rochester took advantage of our technology
Students, faculty, and staff from 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'S THE PROBLEM?
SO WHAT'S THE PROBLEM?
SO WHAT'S 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
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
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
ON WORKDAY
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
“I don’t know why the university hasn’t created a more streamlined way to plan courses” - Emily
IMPACT
Students, faculty, and staff from across the University of Rochester took advantage of our technology
2000
Registered students
46
Departments
6
Schools
How might we simplify the process for students to explore semester classes, quickly access comprehensive details about each class, and seamlessly integrate their chosen classes into their schedules for planning and registration?
How might we simplify the process for students to explore semester classes, quickly access comprehensive details about each class, and seamlessly integrate their chosen classes into their schedules for planning and registration?
How might we simplify the process for students to explore semester classes, quickly access comprehensive details about each class, and seamlessly integrate their chosen classes into their schedules for planning and registration?
How might we simplify the process for students to explore semester classes, quickly access comprehensive details about each class, and seamlessly integrate their chosen classes into their schedules for planning and registration?
1 / Streamlined Course Description Viewing with Accordion Format
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / Streamlined Course-to-Save Process
This dialog modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.
DISCOVERY RESEARCH
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
Synthesizing findings from qualitative studies (n=16), college students nowadays share a preference for
Color Coding and Visualization
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 and plans.
9/16 of student members use tools like Notion and Google Calendar to color-code and visualize their course schedules and plans.
Quick and bite-sized information
Quick and bite-sized information
Quick and bite-sized information
As people's attention span is getting shorter, student members prefer an intuitive experience without feeling overwhelmed by excessive information.
As people's attention span is getting shorter, student members prefer an intuitive experience without feeling overwhelmed by excessive information.
Customization and Control
Customization and Control
Customization and Control
Students are eager to take control of the information they receive and enjoy actively engaging in how they view and plan their classes.
Students are eager to take control of the information they receive and enjoy actively engaging in how they view and plan their classes.
Accessible and easy planning process
Easy planning process
Accessible and easy planning process
Unlike traditional software design, modern student users prioritize ease of use and accessibility, favoring tools with minimal learning curves.
Unlike traditional software design, modern student users prioritize ease of use and accessibility, favoring tools with minimal learning curves.
COMPETITIVE AUDIT
COMPETITIVE AUDIT
COMPETITIVE AUDIT
Accordion Format and Dialog Modals are two frequently implemented UX design models that help streamline complex processes:
Accordion Format and Dialog Modals are two frequently implemented UX design models that help streamline complex processes:
Accordion Format and Dialog Modals are two frequently implemented UX design models that help streamline complex processes:
Accordion Format ✅
Accordion Format ✅
Help provide quick and bite-sized info
Gives user control over the info and focuses user attention on one course at a time.
Navigation in mobile or compact layouts.
Help provide quick and bite-sized info
Gives user control over the info and focuses user attention on one course at a time.
Dialog Modal ✅
Dialog Modal ✅
Effective for quick tasks or actions.
Usually used for confirmation and forms
Familiar UX patterns like Google Calendar, Notion and so on
Effective for quick tasks or actions.
Usually used for confirmation and forms
Familiar UX patterns like Google Calendar, Notion and so on
Tabbed Navigation ❌
Tabbed Navigation ❌
Overusing tabs can lead to clutter.
Mobile versions require thoughtful redesign (e.g., converting tabs into dropdowns).
Overusing tabs can lead to clutter.
Mobile versions require thoughtful redesign (e.g., converting tabs into dropdowns).
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 to select labs and workshops
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
FINAL DESIGN AND ENGINEERING HAND-OFF
1 / Streamlined Course Description Viewing with Accordion Format
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / Streamlined Course-to-Save Process
This dialog modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.
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 to select labs and workshops
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
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?
FINAL DESIGN AND ENGINEERING HAND-OFF
1 / Streamlined Course Description Viewing with Accordion Format
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / Streamlined Course-to-Save Process
This dialog modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.
SOLUTIONS
1 / Streamlined Course Description Viewing with Accordion Format
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / Streamlined Course-to-Save Process
This modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.
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
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 :)
FINAL DESIGN AND ENGINEERING HAND-OFF
1 / Implementing the accordion format for students to view course descriptions quickly and efficiently
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / A dialog modal allowing students to add courses, labs, and workshops while simultaneously viewing their current schedule
This modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.
LEARNINGS
In this collaborative project, I learnt:
Design system craftmanship
Utilizing reusable, scaleable, and consistent design elements from a well-established design kit 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
As a very visual person, this was the first project I worked on creating something that is functionally and experience focused rather than aesthetically focused, aiding rapid prototyping.
Test, test, and test
Before launching a product, ensure it undergoes thorough testing. You might discover more UX bugs than anticipated
OTHER UX PROJECTS
OTHER UX PROJECTS
SOLUTIONS
1 / Implementing the accordion format for students to view course descriptions quickly and efficiently
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / A dialog modal allowing students to add courses, labs, and workshops while simultaneously viewing their current schedule
This modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.
COMPETITIVE AUDIT
Accordion Format and Dialog Modals are two frequently implemented UX design models that help streamline complex processes:
Accordion Format ✅
Help provide quick and bite-sized info
Gives user control over the info and focuses user attention on one course at a time.
Dialog Modal ✅
Effective for quick tasks or actions.
Usually used for confirmation and forms
Familiar UX patterns like Google Calendar, Notion and so on
Tabbed Navigation ❌
Overusing tabs can lead to clutter.
Mobile versions require thoughtful redesign (e.g., converting tabs into dropdowns).
LOW-FIDELITY PROTOTYPE
How might we use the accordion format to help students view different courses quickly ?
LOW FIDELITY
LOW FIDELITY
HIGH 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 to select labs and workshops
Option B
Drop-down menu to select labs and workshops
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 :)
ENGINEERING HAND-OFF
1 / Implementing the accordion format for students to view course descriptions quickly and efficiently
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / A dialog modal allowing students to add courses, labs, and workshops while simultaneously viewing their current schedule
This modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.
LEARNINGS
In this collaborative project, I learnt:
Design systems are magical
Minimalistic design is underrated
OTHER UX PROJECTS
OTHER UX PROJECTS
OTHER UX PROJECTS
OTHER UX PROJECTS
SOLUTIONS
1 / Implementing the accordion format for students to view course descriptions quickly and efficiently
A menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click) - to help students view courses’ descriptions quickly.
2 / A dialog modal allowing students to add courses, labs, and workshops while simultaneously visualizing their current schedule
This modal would function as a pop-up window that overlays the main interface, providing real-time visibility into any courses already added.