Redesigning CMU's Course Planning Tool

This project is a self-driven design challenge aiming to enhance the functionality and usability of Carnegie Mellon University's course planning tool.

When I was planning the courses for my first semester at CMU, I was quite disappointed by the bad user experience of the course planning process. Many of my classmates also complains about the current system. Although there is a course planning tool in the student portal, it did not help very much on the planning process. Therefore, I try to do some research on the current UX of the course planning tool, and redesign a more helpful and enjoyable course planning experience for CMU students.

Duration:
3 weeks
2021 September

Role in project:
Individual project
Research + Design + User Test

‍Tools used:

Figma

After Effect

Background

The course planning tool had tons of usability issues and was not helpful for the planning process.

In the CMU Student Information Online system, there is an interactive tool for students to plan their course schedule before registering for courses. However, the current function only focus on the planning of time schedule: there is no place for students to add comments or visualize their thoughts for them to prioritize their desired course.

I saw some design opportunities in making this tool not just a schedule checker, trying to enhance the function and experience of the course planning tool and make it more useful for students.

Redundant user flow disturbed the students

To understand current students' experience of the planning tool, I had a conducted some quick interview with undergraduate and graduate students. Here are what they said about the current planning system:

“...The tool is only useful to check time conflict between courses...”
“...It is hard to use this system to do research on classes...”
“...It does not provide an overview for me to compare between plans...”
“...I need to constantly move back and forth checking my notes and this tool...”
“...Wish there is also a mobile version to help me check courses anytime anywhere...”

Based on the information from the interview, I used some flow model to see the opportunity points within the course planning experience, and then organized the insights into 3 major problems and opportunities:

Problem 1

Lack of visual differentiation between "consideration" and "decision"

From the interview, I learned that there are some differences in the nature of the course students added into this system: some courses are required or must-take courses which are actually neither an option nor the part of the "planning" process, while other courses are still under consideration and need to be "planned" on the schedule.

However, the courses added into the planning tool all show up in the same column: it is hard for students to distinguish between the above-mentioned difference: the required courses and the courses that are still under consideration.

Moreover, once the selected course is deleted, students need to manually enter the course or search for it again to add it back. It causes some trouble while students need to frequently compare with each plan.

Problem 2

Students hate moving between different tabs or devices

Except for the official course information, people usually record another course information from other sources such as student forum, alumni feedback, etc. They usually record such information at other places such as Google docs or hand written notes.

Therefore, while students are trying to compare each course on the planning tools, they need to frequently going back and forth between their own note and the planning tool interface.

Problem 3

Trade-off between different plans was not clear

Students usually encounter some trade-off between plans due to the time conflicts. However, it is hard to see the complex trade-off relationship between each plans.

Problem 4

Poor responsiveness made mobile use cases challenging

During the interviews, I found that there are some user scenarios that might be benefited from a mobile version of this planning tool. For example, when users randomly hear some information about a course from his friends on the road, he might want to add the course into his shortlist immediately with his phone. However, this web app is not really compatible with mobile phones: the experience to plan course with this tool on a mobile phone is a disaster.

“image: Freepik.com”

UI Traps and accessibility issues

Beside the above-mentioned problems, there are also many minor usability problems in the current system, including some counterintuitive visual layouts and accessibility problems on the color palette, which has undermined the overall UX of this tool.

Ideation

Clarify the differences between the pool of selection and redesign the user flow

My ideation process focus on clarifying the type of information on the planning tool, including the type of the courses, the course info, the category, etc.

The initial idea was to create multiple sections or columns to place different type of courses. I though about how students usually identify the key information on each courses. The things I came up with includes required and elective courses, class time, workload, knowledge domain, etc. I re-arrange the section on the planning tool based on the priority of these information: how important is it while planning a coursework?

Concept validation

Quick user tests with CMU students

During the design process, I keep discussing my design idea with the students in CMU to seek some instant feedback and preferences from the end users. I arranged several round of quick user tests with my classmates to help me debug and improve the current user flow and UX details.

Key design decision

Drag and drop interaction is more intuitive for users to move the courses

Most of the interviewees love the idea to separate the course column. However, to move the course between the shortlist and the final choice column, my original design is to let users click on a button to move the courses. However, during the user tests, 4 out of 5 users tried to directly drag and drop the courses when I asked them to move the courses. Moreover, they also wish to have the feature to reorder the courses in each column. Therefore, I changed to a drag and drop interaction for this feature.

Key design decision

The "grouping" function was inspired by the users during the user tests

The grouping function was suggested by the users during the early rounds of user tests. Some of the users expressed the need to change the color of courses to better differentiate their selection. This inspired me to design the grouping function that helps them to better organize the interface.

Design Solution

Enhanced functions and improved usability

Here is my redesigned interface for the course planning tool. I have re-arrange the layout of the components to make the interface fit to the user flow, and add some extra functions to help address the above-mentioned problems.

Two separated column to distinguish between shortlisted courses and final choices

Different from the original interface, I have divided the course catalog into 2 separated column: one column for shortlisted courses and another column for final choices. The extra column of course catalog provide students more flexibility to categorize required or must-have courses and the courses to consider.

In this redesigned interface, when students add courses by course numbers, the courses will first appear in the shortlist and will not show on the schedule. Students may drag and drop the courses in the shortlist to the final choices column, as shown in the animation below:

Course lock to fix required courses

As mentioned before, there are always required courses in every study program which are not an option for students. Courses that have time conflict with required courses do not need to be considered. Therefore, I designed a function for students to "lock" the required courses. After dropping the courses into the decision column, there will be a lock icon appear on the course that students may click on it to fix the course on the schedule.

If there are courses that have time conflict with locked courses, they will be automatically kicked out form the final choices column, and there will be an alarm message if users attempt to add any conflicting course into the decision column.

Note-taking tool to help organize information in the same page

To solve the problem that students need to move back and forth between the interface and their own notes, I added a note-taking tool on each course. If students click on the sticky-note icon on each course, a note-taking space will appear for students to briefly record the information they have collected from various resources. Therefore, while considering the course plan, students no longer need to leave this planning tool. They may stay on the same page and directly look into the notes recorded on each course to see the detail, which makes the course planning flow much more simple and efficient.

Grouping courses to see the pattern of selection

Considering the mess when the user add too many courses into the schedule, how might we find out the pattern of the mess and then clarify them through any visual affinity strategy?

Through the interview, I found that students usually plan courses based on the area (e.g. design-related, programming related, management-related, etc.) of the course: students would first decide on what area of courses they want to take, and then list out several options for each area and do the planning. For example, if a student plans to take one "design" course in the next semester, he might have a pool of design-related courses to consider.

To make the system cater to such need and help students get a clearer overview of their course plan, there is a "grouping" function for students to add similar courses in one category. If the user drag a course to the other one, they will be added into a group with customizable group name. Since that adding the courses into one group means the courses have become an option, the lock icon will disappear until the final decision is made and the courses are ungrouped.

Checkboxes to quickly show / hide grouped courses

To make it easier for students to compare the courses within the same group, there is a checkbox for each course. Students can simply check/uncheck each course to make it appear/disappear on the schedule.

A mobile version that extends the user scenario

As aforementioned, I discovered some potential user scenarios that might happen on mobile phones. Therefore, I also made the tool become responsive, creating a mobile version as a supplemental tool for the extended user scenarios.

Since most of the students still plan the course with their computer, it is not necessary to provide the exact same feature sets on the mobile version. Therefore, I prioritized the potential user scenario that might happen on the mobile phone only.

“image: Freepik.com”

WCAG AAA level color contrast accessibility

Originally, the color palette for the color-coded course units does not provide enough color contrast and failed to comply with the accessibility guideline. In my redesigned version, I used pastel, light color palette for the background of each course and dark color for the texts, raising the accessibility to the WCAG AAA level.

Outcome

A streamline, hassle-free course planning experience

Through the redesigned feature, the new user flow for course planning has become much more smooth and linear, without the need to constantly moving between different pages.

Feedback from users

5 of 5 users love this redesign 🎉

After the final iteration of my design, I presented my solution to 5 of my classmates at CMU. They all gave me positive feedback on my redesign, especially on the concept of double course columns and the locking function. Here are some of the quotes from the users:

"...Definitely want to use it!..."
"...Love the locking function. It save me a lot of trouble!..."
"...Really like the concept of having additional column to put courses!..."
"...I wish there could really be this mobile version..."

Reflection

Designing with the users, and learning from the users

Through this experience, I see the importance to have users' participation in the design phase. Since the topic I chose for this project is very easy for me to find target users to help me test the product, I keep discussing my design idea with my classmates to seek instant feedback and inspirations. They did helped me a lot on debugging and improving the UX details of my design and pointed out some blind spots that I did not see. This experience inspired me that "participatory design" is not only to design with the users, but more importantly, to learn from the users.