Introduction
As a member of the User Experience Design Club on campus, I collaborated with a team of four peers to design a prototype to replace the current course scheduling website—UR Student. UR Student serves as a platform for viewing available courses and creating saved schedules, but its interface has significant usability issues. In the following section, I’ll showcase the research our team undertook and highlight the specific page I was responsible for designing.
Note: After completing this design, I was recruited to work on MelCourses— a real course planning website developed by students and endorsed by the University. Although I joined their team mid-way through development, I conducted additional research based on University feedback and designed new flows. You can view my work here.
Surveying
We started by conducting a survey among the student population to find trends in course planning methods. Analyzing our 33 responses, we found that a large majority of people create multiple schedules when planning, and they tend to switch between many tabs.
To get more qualitative insight, we conducted 5 one on one interviews with students. Finally, we compiled our data to create an affinity map of issues, finding these key pain points:
Flow to search pool of available courses requires scrolling through massive dropdowns and entering case-sensitive search terms
No way to duplicate schedules or copy classes
Need to tab back and forth between many websites to check major requirements
Problem
Navigation
Issues with user control and freedom— no ways to exit interactions on most pages, users are locked into unnecessarily long flows
Massive dropdowns means excessive scrolling— must hide unnecessary information
Difficult to see all the relevant information in one place
Can’t see which classes fulfill which requirements
Can’t read major requirements while you’re picking out courses, have to tab back and forth
Can't see pre-requisites for courses
Based on the two problems identified, our team devised the following features and improvements.
Improved course search flow
Instead of redirecting users through the same five-step process to add a single class over and over, we decided to consolidate relevant information onto one page.
Major requirements page
Users can search a specific degree, and for each sub-requirement needed to earn the degree, they can see the pool of courses that fulfill that sub-requirement and save the ones they are interested in.
Calendar page
Courses are displayed in calendar format much like UR Student, but with the added functionality to edit and remove them right on the calendar.
Profile page
Place to indicate intended major, minor, and other requirements - colored wheels display progress.
Color coding - every course that fulfills a major will have a colored tag corresponding to that major’s color on all other pages
With these page concepts in mind, we split the task of prototyping among the members of our team. I worked with another designer, Yuting, on the course search and major requirement page.
Iteration 1
Course search page
Search options stay on the left and each course appears as an expandable card so users aren’t redirected to another page just to view more course details.
Major requirements page
All the courses for a program would appear on the left and could be dragged into requirement buckets— cards with a certain number of slots users had to fill with courses, each representing a different requirement.
Iteration 2
Course search page
We decided to make course cards expand with a dropdown to view more information about them. However, some on our team noted that the expanded course card would be so long users would have to scroll to see all necessary information. We addressed this in our next iteration.
Major requirements page
Although we now had a higher-fidelity prototype, one of our team members noticed a flaw— it would be more intuitive if the place to search and select a major was on the left, so users could scan from left to right as they moved through the process.
Iteration 3
Course search page
Detailed information modal wireframe
Course adding modal wireframe
We began to draft an alternate flow for the course search page— instead of having lengthy dropdowns that overwhelm users with information, clicking on cards can open a modal.
Clicking on the body of a course card would allow users to see detailed information— the corresponding modal would also contain a next button to navigate users to the course adding modal.
The course adding modal would direct users to then choose which sections (lecture, lab, and recitation) they want to add to their schedules. Users could reach this step right from the search page by clicking a plus button visible on each course card.
Major requirements page
We moved the requirements bar to the left of the screen so users could scan left to right as previously mentioned. However, we noticed some issues—
There is no header to indicate what degree we're looking at
There's no indicator to help users see how far they are through a degree
There is no way to add these courses to schedules
The page is not useful— users must manually drag courses into requirement buckets to plan out what they will take
We revisited our research and realized this page should serve to consolidate sources of information so courses and requirements are all in one place. Users need to be able to see what courses they need to take for their degrees, add those courses to their schedules, and visualize their progress.
Final Prototype
In the end, we decided to merge the two pages into one since they both served the same function— allowing users to search for and add courses to their schedules.
We finished the course modal we wireframed in the previous iteration and revamped the major requirements page to include course cards, more degree information, and progress bars.
Although the project itself never moved past the hi-fidelity prototype stage, as mentioned previously, I was recruited to work on MelCourses— the course planning website project with the same target audience and goal. The insights I gained through the research we conducted on this project informed my ideas when it came to designing for MelCourses. You can see my work here.