Skip to main content

Product Design

Harvard Online - UI Redesign & Dark Mode

Translating an agency's aspirational rebrand into production-ready designs with an iterative release roadmap and dark mode theme.

Harvard Online - UI Redesign & Dark Mode - showcase
Role Sole Designer
Timeline ~2 months
Team Harvard HUIT / Office of the Vice Provost for Learning
Deliverables UI translation and adaptation, iterative release planning, dark mode theme design, high-fidelity mockups, interactive prototype, stakeholder presentation

The Client

Harvard Online is the university’s continuing education arm, essentially a marketing and sales site for online learning. The Office of the Vice Provost for Learning (VPAL) wanted to rebrand Harvard Online and hired MetaLab, an external design agency, to create a new visual identity. As a bonus, MetaLab also produced concept designs for HUIT’s learning experience platform (LXP), the shared infrastructure that Harvard Online and other schools use to deliver courses.


The Problem

MetaLab delivered a beautiful blue-sky rebrand, but their concepts weren’t grounded in production reality. The designs ignored Harvard’s brand and legal requirements, didn’t meet WCAG accessibility standards, and included features that were years away from engineering capacity. The LXP concepts were especially aspirational, roughly five years ahead of what the platform could actually deliver. My job was to bridge the gap: take MetaLab’s vision for both Harvard Online and the LXP and translate it into something that could ship iteratively.


The Approach

I built a feature matrix categorizing everything as current, upcoming (next fiscal year), or someday-maybe. Starting with the furthest-out features, I stress-tested MetaLab’s designs against actual course content, real platform capabilities, accessibility requirements, and complete interactive states, the things a concept doesn’t worry about but a shipping product must. Then I worked backward to create iterative release versions: V1 uses only what exists today (course cards, activity feed), V2 adds calendars and deadline tracking, V3 brings AI features and deeper social integration. I also pushed for dark mode, designing a complete theme and mode-switching feature.

LXP design iteration 1.0 1
LXP design iteration 2.0 2
LXP design iteration 2.5 3

Design evolution: translating the agency rebrand into iteratively shippable updates (click to expand)

LXP design iteration 1.0
Starting Point
LXP design iteration 2.5
Final Design

The Solution

A refined set of screens and interactive prototype that translated MetaLab’s aspirational vision into production-ready designs, mapped to actual engineering timelines. Each version built on the last, so the platform could evolve gracefully rather than waiting years for a big-bang redesign. The dark mode theme demonstrated the design system’s flexibility for theming. I prepared a stakeholder presentation for VPAL with clear rationale for what could ship immediately, what needed upcoming features, and what would wait.

Light mode dashboard
Light Mode
Dark mode dashboard
Dark Mode

Complete dark mode theme designed for reduced eye strain and visual consistency

AI study assistant
Calendar redesign
Community hub

New features designed within the updated visual system: AI assistant, calendar, and community (click to expand)

Course Home

The course landing page redesigned with the updated brand system - balancing MetaLab’s aspirational vision with production constraints.

Redesigned course home

The Result

VPAL was enthusiastic about the designs and the iterative roadmap. The project was deprioritized by engineering leadership before implementation could begin, the persistent gap between design readiness and engineering capacity. The designs represent a validated future direction for the platform, the dark mode work proved the design system supports theming, and the iterative release framework remains available as a roadmap when bandwidth allows.

Next

See more work