Redesign MyLearning
How can a user-centric redesign transform myLearning into a Go-To Educational Resource for Hopkins Students?
Project
Background
This project was undertaken as part of the Human-Computer Interaction (HCI) course during my undergraduate study at Johns Hopkins University, which provided me with a foundational understanding of HCI principles.
Through this class, I have confirmed my passion in design. I also became the teaching assistant for the course during my senior year.
ROLE
Student
METHODS & TOOL
Contextual Inquiry and Sequential Modeling, Figma
DATE
Sept 202
PRACTICES
Product Design
Why MyLearning?
myLearning is a website used by most students from Johns Hopkins University. It is a collaboration between training, compliance, and personal development programs in both Johns Hopkins University and Johns Hopkins Medicine. The website provides assigned and optional education courses. However, the website has remained poorly designed and emphasized irrelevant features. Hence, not a lot of students use this platform to learn more skillsets and courses.
​
Despite the struggle to navigate, the website has many valuable resources for Hopkins students.
​
Through creating a more pleasant and intuitive design, we hope that fellow Blue Jays can use this website to learn and grow.
Design Focus
There are 3 main focuses:
-
Enhance the User Interface: Refine the layout to make critical features more accessible.
-
Streamline the Search Process: Simplify how students find courses, making the search process faster and more intuitive.
-
Focus on Key Features: Ensure that the most valuable elements of the platform are front and center, facilitating better interaction.
Contextual Inquiry & Sequential Modeling
Goal
My goal for the contextual inquiry was to determine what core tasks a student would perform in myLearning, which tabs were most relevant to them, and which applications/services they used the most.
​
I conducted a remote contextual inquiry of my friend who is a member of the Hopkins Community as my subject. In the past, he has used myLearning to obtain an academic plagiarism certificate, required by one of his writing-intensive courses.
Task 1: Search Up a Course
INTENT
The subject was asked to search up the course “Sexual Assault Prevention Undergraduate.”
KEY OBSERVATIONS
While the subject was able to find the course eventually, it took him about four minutes. Initially, the subject entered a typo and fail to notice the pre-selected “exact phrase” bottom, leading to a failure of search, and the subject was also confused by the “course catalog,” which appeared after the search. The subject was able to find the correct course by entering the full name of the course correctly the second time.
Sequential Model
Task 2: Obtain Course Certificate
INTENT
The subject was asked to complete the course “Sexual Assault Prevention Undergraduate” and obtain the certificate.
KEY OBSERVATIONS
The subject was able to finish the course successfully, but it took him more than ten minutes to find the certificate as its not listed on the course page but rather on My History Page.
Sequential Model
Task 3:Comment / Rate a Course
INTENT
he subject was asked to rate the course and leave a comment on it.
KEY OBSERVATIONS
The subject did not rate the course and failed to leave a comment because there is no comment option, and when he click on the number after the rating, it fails to pop up a comment box.
Sequential Model
The Prototype
From Contextual Inquiry to Redesign
Once the contextual inquiry is conducted and the sequential model is defined, I quickly brainstormed redesign ideas and mocked up the product. Due to the project scope, I only highlighted the major features and flows within the product, but they are sufficient for the presentation and usability studies.
Home Page Redesign
It’s now streamlined into four main sections: Courses, My Plan, My History, and Announcements. Popular courses are highlighted to provide quick access.
To target the breakdown from the second task ...
The home page is being reorganized.
Among the course sections, the page will feature the most popular courses. Most courses like Plagiarism are expected to be mandatorily taken by most Hopkins students. This feature will ease the navigation to some most popular courses. The featured courses will continue to provide links for outsourced learning opportunities.
Instead of listing a list of categories after the search actions, the redesigned webpage integrates a comprehensive course list based on categories, facilitating self-exploration and motivating learning.
Additional features are also included in the user portal page...
We've integrated additional features into the user portal page, including "My To Do List," "My Messages," "My Certificates," and "Help."
This redesign aims to streamline the homepage by removing redundancy and reducing clutter, making navigation more intuitive for users.
​
Search Result Page Redesign
The redesign rids of the “exact button” and centers the search bar. By providing related courses and popular searches, the redesign enables a more convenient search process.​
​
If a course is not found, instead of showing a blank searching page, the redesigned search process allows the recommendations on other related courses.
​​
​
​
To target the breakdown from the first task ...
Course Page Redesign
The design of an apparent search box on top of the course page will help students search up other courses more conveniently.
By clicking on the school icon, the website will automatically navigate to the home page.
The "Reviews and Ratings" section put the ratings and reviews into good use for other students taking the course.
To target the breakdown from the third task ...
A button directly linked to the certificate page is being added to the course page. The color of the button will change from grey to blue upon the completion of the course, allowing the students to access the certificate in an immediate manner.
​
By adding an obvious “Rate and Review” section under the course, we hope to provide an easy way for the students to rate and review.
Evaluation on Redesign
I asked the subject the same task as before...
After implementing the redesign, we asked my friend to retry the tasks. He navigated them effortlessly and was particularly pleased with the new user interface: