• Project Details
• Challenge and Problem Statement
• UX Design Process
  1. Research
  2. Design
  3. Test
  4. Iterate
• Reflection

In my website analysis, I focused on three key aspects: the homepage, the courses page and filters, and the FAQ page. Additionally, I undertook a competitive analysis to benchmark OCW against other educational platforms.

• Homepage: The OCW homepage was found to be cluttered and difficult to navigate, with redundant content and limited primary navigation options.
• Courses Page: While the courses page was generally well-organized, it lacked essential features like course length filters, quick visual overviews, and bookmarking options.
• FAQ Page: The FAQ page was a significant weak point, offering only broad starting categories, lacking visual aids, and featuring a poor layout with an abundance of white space.

MIT OpenCourseWare website, https://ocw.mit.edu, license CC BY-NC-SA

In my competitive analysis, I examined other educational platforms such as Open Yale Courses, TU Delft OCW, and eCampusOntario Open Library. This analysis provided insights into how these platforms handle content organization, usability, and user engagement, offering valuable benchmarks for improving MIT OCW.

Open Yale

• Variety of courses from the sciences, social sciences, and humanities.
• Each course provides a summary, syllabus, and course sections.
• Course materials are available and downloadable.
• Lecture videos are chapter-marked.

TU Delft

• Variety of courses with a special focus on STEM courses such as engineering, water management, environmental science/engineering, aerospace, biotechnology, etc.
• Full course materials including lecture videos, notes, syllabi, etc.
• Most course materials are in English, with some also available in Dutch.

eCampus Ontario

• Repository with fully functional search.
• Open Library features primarily Canadian content unless content is linked (or cloned) from another open education repository.
• Features full courses with downloadable .zip files for harvesting content, as well as learning objects and open textbooks.

I brainstormed a variety of potential user groups for the site including students, educators, and general learners. For this project, I wanted to focus on younger learners - those still in high school or early in their university/college careers. For each of these potential personas, I built out rough outlines that highlighted their potential needs, characteristics, and features they might want in an OCW platform. Leveraging generative AI (specifically ChatGPT 4.0), I synthesized the research gathered about the OCW platforms and combined it with several of my draft personas. Through a sequence of very specific prompts, AI helped me synthesize this content and develop the "High School Seeker" persona. 

To better understand, and visualize, this potential user I created a detailed profile. This profile includes elements such as a user bio, personality overview, goals, traits and values, motivations, digital preferences, personal interests/hobbies, and potential pain points. Using the Leonardo.ai image generator, I was able to use these characteristics to help me generate a more realistic image of the High School Seeker.

In this case study, I used a journey map to chart a user's interaction with the MIT OCW platform. This visual tool captures goals, actions, and emotions, pinpointing areas for improvement by highlighting pain points and potential opportunities. It serves as a useful guide for enhancing the overall user experience. Leonardo.ai was used to develop images for each corresponding emotion.

The journey map served as an instrumental tool in identifying several critical pain points that need to be addressed during the design phase of improving the MIT OCW platform.

• Homepage: The homepage is busy and therefore difficult to navigate, and some of the information could be consolidated to simplify the layout. The primary navigation is limited, and essential elements like a "Browse Courses" option and a prominent search bar are not present – making it hard to get to the courses page from pages other than the homepage. Homepage content such as multiple sliders, donation information, featured courses, OCW news, and information about the Chalk Radio podcast could be reduced and streamlined to make the page less overwhelming.
  Browse Courses Page: While the page is generally well-organized, it lacks features that would improve the browsing experience. Specifically, there is no option for users to filter courses by length, and there are no icons under each course preview to give users an at-a-glance understanding of what each course offers. A feature that allows users to bookmark existing courses to their profile would help them return to course content at a later date.
• FAQ Page: This page stands out as one of the platform's most significant weak spots. It provides only three broad starting categories for users seeking assistance, which complicates the search for specific information. Despite an abundance of white space, the layout lacks visual aids like screenshots or videos to guide users effectively. To improve content navigation and reduce the number of individual FAQ pages, accordion boxes could be implemented to collapse and organize the content more efficiently, and allow users to browse all FAQs.

I embarked on the design phase by creating hand sketches, medium-fidelity wireframes, and initial prototypes using Figma, a tool I learned to use in my information architecture course (MDIA 2533). The prototypes aimed to address the identified pain points using UX laws and interaction principles.

Goals

• Homepage: Streamlined features, improved navigation, and consolidated redundant content to enhance user experience.
• Courses Page: Introduced course length filters, visual overview icons, and bookmarking options to improve usability.
• FAQ Page: Implemented accordion boxes to streamline content navigation and added visual aids to enhance user guidance.

I started the design phase by creating hand-drawn wireframes to brainstorm potential layouts for the new homepage, courses page, and FAQ page, serving as an initial step in visualizing improvement.

After sketching initial concepts by hand, I transitioned to creating medium-fidelity wireframes using Figma. This allowed for a more detailed exploration of layout and user flow, setting the stage for subsequent design iterations.

Moving from medium-fidelity wireframes in Figma, I crafted detailed prototypes for key pages, utilizing a UI kit, an icon kit, and Google Material icons. This holistic design approach was tailored to address user needs and align with our overarching UX goals.

In redesigning MIT OCW, I integrated key UX laws and principles to optimize usability. I leaned into the Aesthetic Usability Effect to create a streamlined and appealing design. Jakob’s Law influenced me to ensure MIT OCW's navigation was as user-friendly as other, less content-dense platforms. The Law of Proximity steered me to logically group elements for intuitive navigation. Additionally, interaction principles guided my approach; I prioritized discoverability, simplicity, and consistency in design, ensuring that features were easy to find and use. To limit confusion, I emphasized clear affordances and reduced redundant pathways. I also employed the Principle of Least Effort and the Principles of Identity from "The Psychologic Phenomena in UX Design.

(Note: To respect MIT's copyright, I have removed the MIT logo and the logos of sponsoring organizations from my prototypes)

I subjected the mock-ups to peer review by uploading the prototypes to InVision. This platform facilitated peers to actively interact with the design and leave valuable feedback on both its aesthetics and interaction elements.

Based on the valuable peer feedback received through InVision, I iterated on the prototypes, making several improvements:

• Homepage: Re-grouped buttons, adjusted spacing, and redesigned sections for better consistency and user experience.
• Courses Page: Removed redundant search functionality, making the selected tab more visible, reorganized course previews, and added bookmarking and sorting features.
• FAQ Page: Revised categories, adjusted spacing, and added accordion boxes to improve content organization and user navigation.