Masters of Engineering Course Plan
Planning your program the most efficient way possible.
Planning your program the most efficient way possible.
8 weeks
1 Project Manager
3 Product Designers
2 Developers
Research
UI
UX
Figma Prototype
Design System
This was a project at the DALI Lab for our client, the Dartmouth Information Technology and Consulting (ITC) Office. DALI (Digital Application Learning and Innovation) Lab is an innovative startup-like experiential learning program at Dartmouth College where students work in teams of designers and developers to build digital applications for real problems. My team was hired and tasked by the college to do this project to improve the design of the engineering course planning site for graduate students.
All of the research analysis, features, wireframes, visuals, and interactions highlighted were designed by me.
The current course planning system has outdated UI and is inefficient for engineering graduate students because they need to look at various places to get all of the useful information needed to plan their program. This decentralized, unorganized process causes stress and confusion among students.
Streamlining this process to be as intuitive, efficient, and as visually appealing as possible for Masters Engineering Students
Instead of gathering information on Dartmouth's website and having to open multiple tabs, detailed instructions on how to fill out the plan, as well as specific requirements for each program are available at the top of the course plan to streamline the user's process.
Instead of manually looking on Dartmouth's website to find all the classes needed, users can see all of the courses listed on an overlay. In addition, every course needs to satisfy a specific requirement for the program, which can be indicated by the tag feature after selecting a course. After confirming, the course will be added to the plan, as well as the course planning tracker under the specific requirement that was satisfied.
If the users make a mistake or end up taking a different class, the user can easily change or delete their classes. These features appear as the user hovers over each class. To edit, click the edit icon which will take you back to the course overlay. To delete, just click the trash icon.
We began by researching the existing Master course planning site. We took notes on what UI/UX of the current site we liked and what we thought could be improved. However, we first needed to determine whether our initial suggestions would apply to the user demographic of the Engineering Masters students of the Dartmouth community.
if you add the annotations in the first part then you don't need this and can start with user interviews
In order to gather this sight, we conducted in-depth user interviews with 6 different Masters students across the 6 different programs that the engineering Masters program offers.
Our questions sought to gather information about the current user experience of the course planning sight, the limitations and pain points that hindered users from having a smooth experience.
Based on these user interviews, we created empathy maps to help us organize our users pain points, frustrations, thoughts, and feelings into a clear way.
From our extensive user research, we found key pain points that highlighted the current attitudes surrounding the Masters' course planning website.
Pain Point #1: Outdated UI
The UI is all default HTML styling, has unclear UI segments, and no text hierarchy
Pain Point #2: Not Streamlined
All of the information that the user needs is in various places on the web, and therefore, the user needs to open a multitude of tabs.
Pain Point #3: No error checking
The user is unable to check their errors due to the outdated design, as well as no feedback for saving changes and requirement satisfaction.
After synthesizing the insights from users, we brainstormed features that could be implemented into our design through a feature parking lot.
From this feature parking lot, we organized our features by priority and decided on core features to sketch a preliminary user flow.
To display my ideas into a rough draft, I created low-fidelity wireframes. First, I played with how to visually display the specific requirements of each of the programs. To decide between having the program requirements in full display vs. carousel, I conducted A/B testing to evaluate which option was better for users.
User Findings – Users favored the carousel option due to its ability to enhance clarity and readability; therefore, alleviating the sense of being overwhelmed. Since the outdated UI was one of the main pain points in this project, we decided to implement the carousel for the instructions as it was easier for the users to digest.
Next, I played with different ways to place the course plan itself and the requirement checker to ensure that the courses the user picks satisfies all of the requirements of the program. In the first version, the user would see the plan first and as courses are selected, they would populate in the requirement checklist. Whereas the second version displays the requirement checklist first and then plan second.
User Testability – Users revealed that they thought Option A was more intuitive as the main goal of the site is to fill out the plan. The checklist helps the user but is not the main priority of the design but still should remain easily accessible.
Based on our user interviews, we wanted the Thayer Website overlay, which displays when the user adds a course, to include filters of available classes for each specific term with the description, prerequisites, and professors of each course.
Developer Findings - However, as much as our team and users wanted to add this feature to our design, our developers told us that we could not add this feature as the needed information was unavailable from Dartmouth's database. Therefore we shifted our design (on the right) to display all courses ever available to Dartmouth's Engineering programs with just the names of each class that is hyperlinked to Dartmouth's website if the user would like more information.
Additional user interviews revealed that keeping track of whether the courses selected satisfy the requirements and how many courses are still needed in each requirement, our team created a progress tracker. To decide what the progress tracker would look like, we conducted A/B testing again.
User Testability – Users found that Option 3 was visually the most appealing, best hierarchy, and was the most intuitive and clear, as Option 1 was not organized clearly and the circles in Option 2 were hard to conceptualize for a progress tracker. Option 3 allows users to see what courses fall under what requirement and how many are left.
Before creating the high fidelity prototype, our team utilized the pre-existing Dartmouth style guide as a frame.
Transitioning from greyscales to a high fidelity prototype, our team kept in mind our users' pain points, particularly improving the outdated UI. We tirelessly worked with our developers to ensure that the features that we tweaked from our greyscales were able to implement into the final product. To address the users' pain points while also within the limitations of what can be ultimately developed, the course planning site leverages visual transparency and prioritizes relative content to help users quickly and intuitively plan their Master program.
At the top, instructions on how complete the course plan and requirements on each specific course are available at the top of the course plan as a toggle so that users can collapse the information if it is not needed.
Using the course search, users are able to search any course and add them to the plan. While they are adding the course, there is an option to select the requirement in which the course satisfies.
If the user needs to change a course, they can delete the course by hovering over it and clicking the trash icon and adding another course.
As the course is added, it will populate in the progress tracker accordingly. Once the plan is complete, the user will be able to download the plan into a PDF which would then have to be approved by an advisor.
