MIT OpenCourseWare needed to help people understand the many free resources they had available. I designed a way to guide people to where they want to be.
- UX Design
- Web Development - HTML/CSS/jQuery
- Copy Writing
“Getting an Education from MIT is like taking a drink from a Fire Hose.” — Jerome Weisner, Former MIT President
With over 2,400 courses available that represent all of the departments and disciplines at MIT, discovering all that MIT OpenCourseWare (OCW) offers can feel the same way.
Getting people to understand what OCW offers while we had their attention is a challenge. I designed an onboarding experience that would help new visitors to get around OCW and understand what is offered.
I was provided lo-fi wireframe: a notification that offered to help the visitor get started. If the visitor selected this, a popover would appear with a short introduction to OCW and a link to the Getting Started page. I designed a hi-fi version based on the lo-fi wireframe, then developed the slide and popover functionality with HTML, CSS, and jQuery.
I suggested that we try to keep a lighthearted tone to our messaging. To accomplish this, I designed the popover to look like a ubiquitous yellow Post-It Note. I also suggested copy revisions to convey a more friendly and informal tone.
Additional complications arose when addressing mobile visitors and desktop visitors due to OCW not being a responsively designed site. Developing a slider and popup that worked for mobile and desktop visitors alike presented a challenge. In this case it was necessary to use older CSS layout techniques, and balance the overall size to be tappable on a mobile device while not being too large on larger screens.
A significant portion of traffic did visit our “Getting Started” page after seeing the message and our overall “time spent” site traffic increased.
A few months later when a serious issue with video playback arose, I was able to rapidly create a warning because of my experience building the onboarding popover. I reused this entire slider/popover feature by changing a few lines of CSS, and we rapidly deployed the alert.