Case Study: New Visitor Onboarding UX

My Contributions

  • 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

So is getting around OCW. With over 2,400 courses available that represent all of the departments and disciplines at MIT, just knowing what the site is and what is available is challenging.

The Problem

Getting people to understand what OCW offers while we had their attention is a challenge. A Publication Manager (PM) and I teamed up to create an onboarding experience that would help new visitors to get around OCW and understand what is offered. 

The Solution

The PM provided a low-fidelity 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 created a high-fidelity version based on the low-fidelity 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.

See the Pen OCWHelpPopup by Erik Mallinson (@erima) on CodePen.

The Outcome

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 there 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.