Wellesley Course Browser Redesign
New and improved course browser for Wellesley College Students
Project Type Tools Role Team
Informal team designathon
Figma, Firebase, JavaScript
Designer
Zoe Allen, Julie Lely, Yuji Chan, Adhel Geng, Audrey Mock
Check out our live site here!
​
Goal
My partner Julie and I focused on the distribution requirements section of this design. We wanted to design a feature that allows Wellesley students to keep track of which distribution requirements they have and have not completed.
The Issue
All students at Wellesley College must take a certain number of classes in various disciplines (natural sciences, foreign language, etc.) in order to graduate. Currently, Wellesley does not house all information regarding students' distribution requirements in one online space. Furthermore, Wellesley does not provide any method of helping students keep track of their completed and remaining distribution requirements. This is a source of stress, confusion, and inconvenience for Wellesley students.
​
We spoke with several of our Wellesley peers to understand their grievances better, and then developed a user persona.
The Current Process for Tracking Graduation Requirements
*There is no standardized way for students to count their completed requirements. Some use a spreadsheet, some use pen and paper, etc. Pictured under step 3 is the document I created to track my own requirements.
​
**The current Wellesley Course Browser has a function that allows students to filter classes by certain distribution requirements, but it tends to be "very glitchy" (ex. applying a filter does not actually filter the search results accurately). Therefore, most students told us that they do not find this feature useful.
​
How Can We Solve These Issues?
Reducing Bounce Rate
In order to increase user convenience and reduce bounce rate, we designed a distribution requirements page residing on the same website as the course browser. Users can easily switch between the two.
​
On the right, users can type in the names of courses they have completed. If a course has fulfilled a certain requirement, it will automatically appear under the corresponding distribution on the left. This creates a visually clear list of which requirements the user still needs to complete.
Presenting Key Information
As showing the user which requirements they have and have not fulfilled is the main goal of our design, we created a few different prototypes and performed user testing on each one to see which approach was most efficient and clear.
​
In the following designs, we experimented with a mixture of dropdown menus and auto-completed charts.
Design A
Design B
Design C
The vast majority of our test users preferred Design B due to its "visually simple and efficient layout." Therefore, we decided to use implement design.
Refining Our Key Feature
The majority of the user's action lies within the "add classes" feature; once the user enters their past classes, the product essentially does the work for them.
First Iteration
Our first design prompts users to enter their previous classes in two different sections: "main distribution" and "general requirements." We created these two sections because this is how graduation requirements are explained on the Wellesley College website.
However, user testing revealed that most students do not know the difference between "main distribution" and "general requirements." Rather than simplifying the "add classes" feature, these two categories created more confusion for users.
Furthermore, some students had taken classes that did not fit perfectly into the course database we coded, and therefore were not accepted in either the "main distribution" or "general requirements" sections. For example, one transfer student had taken classes at a different instituion that fulfilled one of Wellesley's distribution requirements, but such classes were not in our course database.
Second Iteration
To eliminate confusion over "main distribution" vs "general requirements," we created one "automated add" button. Users can enter any class they have taken at Wellesley, and the site will automatically update the users' fulfilled requirements accordingly.
We also wanted to address the aforementioned difficulty of adding atypical classes. We created a "manual add" section where the user can type in any class of their choice and select which requirement(s) it fulfills, regardless of whether the class is in our course database. This means that students will be able to see distribution requirements fulfilled via transfer credits from other institutions or credits from Wellesley classes that no longer exist.
​
Fine Tuning
We performed one final round of testing to clean up any remaining issues.
​
A few test users had previously complained that the "add courses" section was not intuitive enough. We added tooltips to both the "automated add" and "manual add" sections to guide the user to add their classes correctly.
A few users also pointed out that some requirements (foreign language and quantitative overlay) can be fulfilled in multiple ways. For example, a student may have fulfilled their foreign language requirement with AP credits from high school, rather than through a class at Wellesley.
We designed a separate, brief survey feature to collect users' information regarding these "outlier" requirements, which will then automatically fill in those requirements accordingly. This survey appears when the user begins to enter their course history.
Takeaways
The user is always right! As a Wellesley College student myself, I overestimated my expertise and, at times, assumed that my own experiences would be representative of most Wellesley students' experiences. Performing several rounds of user testing with Wellesley students and seeing how their choices differed from my own was an important reminder of the importance of listening to the users and keeping an open mind during testing.