Film: MIT (opens in a new tab)

Work: Education · Open Learning

Open Learning, at MIT scale.

Organization
MIT Open Learning
Platform
WordPress on WP Engine, internal applications
Role
UX, UI, site design and development
Timeline
8 years

Explore openlearning.mit.edu (opens in a new tab)

The work

Design and development across MIT Open Learning, from course platforms to research sites.

  • Additive ManufacturingSite design and development, with a subsite for Boeing
  • Big Data AnalyticsSite design and development
  • BiomanufacturingSite design and development
  • Blockchain for EntrepreneursSite design and development
  • Center for Advanced VirtualitySite design and development
  • Data ScienceSite design and development
  • Digital CredentialsSite design and development
  • Festival of LearningSite design and development
  • Infinite CorridorUX, UI
  • J-WEL, the Abdul Latif Jameel World Education LabSite development
  • Leadership Academy for Scientists, Engineers and Researchers (LASER)Site design and development
  • MITx Introductory CoursesSite design and development
  • MITx MicroMastersProduct design, site design and development
  • Negotiations Toolkit for EntrepreneursSite design and development
  • OpenCourseWare (OCW)Product design, UX, UI
  • Quantum ComputingSite design and development
  • ReACTSite design and development
  • Systems EngineeringSite design and development, with a subsite for Boeing

UX wireframe and UI design for MITx

18

Projects across MIT, from OpenCourseWare and the Infinite Corridor to MicroMasters and professional courses.

13

Sites designed, built and hosted on WP Engine.

2

Subsites for Boeing, on Additive Manufacturing and Systems Engineering.

Brand guidelines

MIT red and ink, set in Neue Haas Grotesk.

MITx Online’s own system: MIT red for actions and the current choice, with ink and cool grays for everything else. One family, Neue Haas Grotesk, throughout.

Typefaces

Display face

Neue Haas Grotesk

  • 700

Text face

Neue Haas Grotesk

  • 400
  • 500

Color

  • MIT red Create account, the current filter, Program labels On white 7.49:1 AAA With ink 2.1:1 Fail #A31F34
  • Dark red Pressed and secondary red actions On white 11.89:1 AAA With ink 1.33:1 Fail #750014
  • Bright red Highlights in the hero’s dot grid On white 3.91:1 Large only With ink 4.03:1 Large only #FF1423
  • Ink Titles, body copy On white 15.75:1 AAA #212326
  • Graphite Strong secondary text On white 9.55:1 AAA With ink 1.65:1 Fail #40464C
  • Slate Secondary text, Learn more On white 5.49:1 AA With ink 2.87:1 Fail #626A73
  • Steel Meta, disabled On white 3.05:1 Large only With ink 5.17:1 AA #8B959E
  • Silver Navigation on dark On white 1.81:1 Fail With ink 8.72:1 AAA #B8C2CC
  • Mist Log in, chips, dividers On white 1.31:1 Fail With ink 11.99:1 AAA #DDE1E6
  • Cloud Section grounds On white 1.1:1 Fail With ink 14.33:1 AAA #F3F4F8

In use

Type and components · Neue Haas Grotesk

Browse the catalog

AllEconomicsBusinessPhysicsLiterature

PROGRAMMITX ONLINEStatistics and Data ScienceProgram · Certificate

Create accountFollowLog inLearn more
AllCoursesPrograms
Hero title
Bold 52
Section head
Bold 24 / 30
Course title
Medium 16 / 20
Body
Regular 16 / 20
Buttons and tabs
Medium 12–14
Label
Medium 10, caps

Header, hero and tabs

MITx Online

MITx Online

Learners anywhere in the world can enroll in a course of their choosing and learn at no cost, or aim to earn a certificate for a low fee.

FeaturedImpact StoriesSupport MITx

Scope

Next case study Luxury wallpaper, rebuilt to sell

Start a conversation