Major Declaration at Dartmouth
Reexamining the major declaration process to make the process more easily navigable and facilitate exploration of major possibilities
Deliberables
Deliberables
Figma Prototype
Figma Prototype
Role
Role
UI/UX, Research
UI/UX, Research
Team
Team
3 Designers
3 Designers
Time
Time
10 weeks
10 weeks
Summary
Summary
After interviewing Dartmouth stakeholders and researching other universities’ solutions, we redesigned DartWorks, Dartmouth College’s platform for major declaration, so that students can easily navigate resources and formal processes to efficiently explore major possibilities.
After interviewing Dartmouth stakeholders and researching other universities’ solutions, we redesigned DartWorks, Dartmouth College’s platform for major declaration, so that students can easily navigate resources and formal processes to efficiently explore major possibilities.
Problem: Navigation, Efficiency, and Exploration
Problem: Navigation, Efficiency, and Exploration
Point of View Statement: Early career Dartmouth students need to easily navigate resources and formal processes to efficiently explore major possibilities.
For this project, we focused on UX more than UI in order to avoid a jarring transition for upperclassmen that were already used to the old design. Our emphasis was on creating features to address every insight and pain point possible.
Point of View Statement: Early career Dartmouth students need to easily navigate resources and formal processes to efficiently explore major possibilities.
For this project, we focused on UX more than UI in order to avoid a jarring transition for upperclassmen that were already used to the old design. Our emphasis was on creating features to address every insight and pain point possible.
User Research: What do Dartmouth stakeholders think of the major declaration process?
User Research: What do Dartmouth stakeholders think of the major declaration process?
We interviewed 11 people including Dartmouth students, students from public & private universities (MIT, Vanderbilt, UT, and Penn State), a Dartmouth professor, Dartmouth alumnus, and a registrar employee. Starting with Dartmouth students from different class years, we isolated pain points in the existing platform.
With the existing platform, the declaring process can be separated into two parts. In the first part, research, many students engage in a back and forth process where they check multiple websites for requirements and correspond with a professor back and forth. Students often have a personal spreadsheet for documentation.
We interviewed 11 people including Dartmouth students, students from public & private universities (MIT, Vanderbilt, UT, and Penn State), a Dartmouth professor, Dartmouth alumnus, and a registrar employee. Starting with Dartmouth students from different class years, we isolated pain points in the existing platform.
With the existing platform, the declaring process can be separated into two parts. In the first part, research, many students engage in a back and forth process where they check multiple websites for requirements and correspond with a professor back and forth. Students often have a personal spreadsheet for documentation.
Many students found this process to be frustrating:
Many students found this process to be frustrating:
“My major plan was rejected multiple times because I didn’t meet requirements.” -D’24
“I have to constantly switch tabs to different websites to find information.” -D’24
“I didn’t know how to explore my interests when I declared, otherwise I would have done a major modification.” -D’23
The second part is actually logging courses into the platform. The current platform doesn’t accommodate many edge cases (such as the Quantitative Social Science major) and can be difficult to navigate.
The second part is actually logging courses into the platform. The current platform doesn’t accommodate many edge cases (such as the Quantitative Social Science major) and can be difficult to navigate.
“My major plan was rejected multiple times because I didn’t meet requirements.” -D’24
“I have to constantly switch tabs to different websites to find information.” -D’24
“I didn’t know how to explore my interests when I declared, otherwise I would have done a major modification.” -D’23
Pain Points: What is causing user frictions?
Pain Points: What is causing user frictions?
Additionally, the platform itself contained multiple UI/UX frictions.
Additionally, the platform itself contained multiple UI/UX frictions.
5) Extraneous information: Additionally, many of the courses shown are not relevant to a major. The highlighted courses do not apply to an undergraduate major at Dartmouth.
3) Redundant User Interface: While there are multiple ways to add a class, it creates a redundant UI to have so many plus buttons for a single term.
1) Vertical/horizontal scroll:
A combination of both vertical and horizontal scroll makes the interface confusing and inconsistent.
2) Confusing verbiage and placement: “Plan” is used to open up a page with major declaration when the actual declaration features are at the bottom of the page.
4) Unclear requirements: There are labels of “active” and “locked”, which are not intuitive or clear. Students aren’t sure which to choose with so little distinction.
2) Confusing verbiage and placement: “Plan” is used to open up a page with major declaration when the actual declaration features are at the bottom of the page.
4) Unclear requirements: There are labels of “active” and “locked”, which are not intuitive or clear. Students aren’t sure which to choose with so little distinction.
3) Redundant User Interface: While there are multiple ways to add a class, it creates a redundant UI to have so many plus buttons for a single term.
1) Vertical/horizontal scroll:
A combination of both vertical and horizontal scroll makes the interface confusing and inconsistent.
5) Extraneous information: Additionally, many of the courses shown are not relevant to a major. The highlighted courses do not apply to an undergraduate major at Dartmouth.
5) Extraneous information: Additionally, many of the courses shown are not relevant to a major. The highlighted courses do not apply to an undergraduate major at Dartmouth.
3) Redundant User Interface: While there are multiple ways to add a class, it creates a redundant UI to have so many plus buttons for a single term.
1) Vertical/horizontal scroll:
A combination of both vertical and horizontal scroll makes the interface confusing and inconsistent.
2) Confusing verbiage and placement: “Plan” is used to open up a page with major declaration when the actual declaration features are at the bottom of the page.
4) Unclear requirements: There are labels of “active” and “locked”, which are not intuitive or clear. Students aren’t sure which to choose with so little distinction.
How Might We Questions
How Might We Questions
From these insights, we generated the following how might we questions:
From these insights, we generated the following how might we questions:
HMW streamline the major declaration process through a straightforward and consolidated user experience?
HMW streamline the major declaration process through a straightforward and consolidated user experience?
HMW spark intellectual curiosity and allow students to explore a variety of major/minor possibilities?
HMW spark intellectual curiosity and allow students to explore a variety of major/minor possibilities?
HMW make DartWorks a useful tool for students early in their academic careers?
HMW make DartWorks a useful tool for students early in their academic careers?
Industry Research: How did other colleges address these insights?
Industry Research: How did other colleges address these insights?
I wanted to see how other institutions addressed these pain points. Two student portals stood out to use in research: MIT and Vanderbilt.
I wanted to see how other institutions addressed these pain points. Two student portals stood out to use in research: MIT and Vanderbilt.
MIT’s platform used a side panel that showed requirements. Furthermore, this side bar showed all courses, including future ones, so that students could add courses to their plan ahead of time. This function solved the issue of users constantly switching between tabs of the ORC, their department website, Dartworks, and their planning document. We took inspiration from this combining of features and added a side panel to our own prototype.
MIT’s platform used a side panel that showed requirements. Furthermore, this side bar showed all courses, including future ones, so that students could add courses to their plan ahead of time. This function solved the issue of users constantly switching between tabs of the ORC, their department website, Dartworks, and their planning document. We took inspiration from this combining of features and added a side panel to our own prototype.
Vanderbilt’s platform has a feature called “What if?” which incorporates all of the current courses the user has taken and shows their progress towards other majors. In this way, students can explore other majors, minors, and modifications ahead of time. This feature would solve the issue students face when they pick up other majors or minors later on in their academic career and struggle to finish in time. We did not add this to our existing prototype and instead intend to add it in our next steps. However, we did use this inspiration to auto populate courses taken into our platform.
Vanderbilt’s platform has a feature called “What if?” which incorporates all of the current courses the user has taken and shows their progress towards other majors. In this way, students can explore other majors, minors, and modifications ahead of time. This feature would solve the issue students face when they pick up other majors or minors later on in their academic career and struggle to finish in time. We did not add this to our existing prototype and instead intend to add it in our next steps. However, we did use this inspiration to auto populate courses taken into our platform.
Features
Features
Our team generated the following features to address all of these friction points.
Our team generated the following features to address all of these friction points.
Auto populate courses
Auto populate courses
To encourage students to explore a variety of major/minor possibilities, we implemented an auto population of courses taken and removed courses irrelevant to majors from being the first to pop up. Seeing as all courses are sorted into buckets by requirement on one side panel and the rest are searchable in the other panel through a “browse additional courses” button, we reduced the amount of time, scrolling and clicks needed with the previous model.
To encourage students to explore a variety of major/minor possibilities, we implemented an auto population of courses taken and removed courses irrelevant to majors from being the first to pop up. Seeing as all courses are sorted into buckets by requirement on one side panel and the rest are searchable in the other panel through a “browse additional courses” button, we reduced the amount of time, scrolling and clicks needed with the previous model.
Organized by year
Organized by year
The previous interface was organized by term, showing three at a time. However, many students planned their courses by academic year and needed a display that showed an overall timeline.
The previous interface was organized by term, showing three at a time. However, many students planned their courses by academic year and needed a display that showed an overall timeline.
Straightforward delete/add functionality
Straightforward delete/add functionality
The plus button allows two ways to add a course to the plan to make the feature as accessible as possible: one way to add a course is to drag and drop the course into the term slot and the other is to click on the plus button. A dropdown menu will appear and the user can then select which term to add the course to. This removes repetitive UI elements from the previous platform while still providing multiple options to add a course for accessibility.
The plus button allows two ways to add a course to the plan to make the feature as accessible as possible: one way to add a course is to drag and drop the course into the term slot and the other is to click on the plus button. A dropdown menu will appear and the user can then select which term to add the course to. This removes repetitive UI elements from the previous platform while still providing multiple options to add a course for accessibility.
Visible side panel showing requirements in buckets
Visible side panel showing requirements in buckets
Not knowing requirements and which classes fulfill which one was a common issue mentioned in user research. This feature removes the extra steps of having to switch back and forth between the department website and the DartWorks platform to check requirements.
Not knowing requirements and which classes fulfill which one was a common issue mentioned in user research. This feature removes the extra steps of having to switch back and forth between the department website and the DartWorks platform to check requirements.
Course Description and terms offered in second side bar
Course Description and terms offered in second side bar
This feature saves time for users that are often switching tabs in a back and forth process to find when courses are offered.
This feature saves time for users that are often switching tabs in a back and forth process to find when courses are offered.
When clicking on one of the buckets, “theory and algorithms”, a second side menu pops up with courses that fulfill that requirement. A search bar at the top allows for quicker searching. A drop down arrow allows for a course description, information on previous terms offered (to help plan for the future), and a link to the ORC page for the course. These features consolidate all the information one needs when planning a major into one spot.
When clicking on one of the buckets, “theory and algorithms”, a second side menu pops up with courses that fulfill that requirement. A search bar at the top allows for quicker searching. A drop down arrow allows for a course description, information on previous terms offered (to help plan for the future), and a link to the ORC page for the course. These features consolidate all the information one needs when planning a major into one spot.
Consistent vertical scrolling
Consistent vertical scrolling
We removed horizontal scrolling so that scrolling is consistent throughout the site.
We removed horizontal scrolling so that scrolling is consistent throughout the site.
🚨 Oops! 🚨
Missing “Elective Course” requirement
Submit Anyway
Warning signs for edge cases
Warning signs for edge cases
Students often miss requirements when declaring a major and have to continually resubmit. This feature allows students to know if they meet requirements immediately. For edge cases, we included a “submit anyway” option.
The current major declaration process requires professors to approve major plans and the burden falls on them to check requirements. With warning signs, we can minimize the time both professors and students need to check requirements and further reduce the back and forth process that exists.
Students often miss requirements when declaring a major and have to continually resubmit. This feature allows students to know if they meet requirements immediately. For edge cases, we included a “submit anyway” option.
The current major declaration process requires professors to approve major plans and the burden falls on them to check requirements. With warning signs, we can minimize the time both professors and students need to check requirements and further reduce the back and forth process that exists.
Bookmarking
Bookmarking
To make this platform a better tool for planning earlier on in academic career, we added a bookmark function to both side bars and the add course area. This allows students to save courses that they want to take in the future without committing to a term to take them. We also added a horizontal progress bar and color coded requirements to show progress. The progress bar indicates based on both courses taken and courses planned. We colored courses that have been taken and fulfill the requirements green and indicated courses planned/in progress with yellow.
To make this platform a better tool for planning earlier on in academic career, we added a bookmark function to both side bars and the add course area. This allows students to save courses that they want to take in the future without committing to a term to take them. We also added a horizontal progress bar and color coded requirements to show progress. The progress bar indicates based on both courses taken and courses planned. We colored courses that have been taken and fulfill the requirements green and indicated courses planned/in progress with yellow.
Link to ORC to minimize search time
Link to ORC to minimize search time
Students wasted time finding ORC pages for courses they were interested in taking.
Students wasted time finding ORC pages for courses they were interested in taking.
Reflection
Reflection
There are two major limitations in this project. One major limitation was that the time frame was 10 weeks. Because of this, most of our user testing was conducted during design critique meetings. If we had more time, I would have liked to do another round of user testing with a variety of Dartmouth students from different class years and levels of technological familiarity. The other limitation was that I had medical difficulties and was unable to work on grayscales. The features that were created during this time were not included in this case study.
Our pitch to Dartmouth’s Information, Technology, and Consulting was well received. We were asked to pitch it again to the team in charge of implementation next term. The employee said that he appreciated the progress bar feature immensely and loved our attention to detail when it came to accessibility features.
The developers on our team coded a prototype using React, Typescript, and MUI Components for the frontend and Node+Express, Typescript, and Render for the backend. For next steps, I hope to incorporate features involving student mentor matching based on similar D-Plans, course recommendations, merge with Layup List (a popular Dartmouth tool for recommending and rating courses), and further incorporating features from Vanderbilt.
There are two major limitations in this project. One major limitation was that the time frame was 10 weeks. Because of this, most of our user testing was conducted during design critique meetings. If we had more time, I would have liked to do another round of user testing with a variety of Dartmouth students from different class years and levels of technological familiarity. The other limitation was that I had medical difficulties and was unable to work on grayscales. The features that were created during this time were not included in this case study.
Our pitch to Dartmouth’s Information, Technology, and Consulting was well received. We were asked to pitch it again to the team in charge of implementation next term. The employee said that he appreciated the progress bar feature immensely and loved our attention to detail when it came to accessibility features.
The developers on our team coded a prototype using React, Typescript, and MUI Components for the frontend and Node+Express, Typescript, and Render for the backend. For next steps, I hope to incorporate features involving student mentor matching based on similar D-Plans, course recommendations, merge with Layup List (a popular Dartmouth tool for recommending and rating courses), and further incorporating features from Vanderbilt.