EDUCATION PLATFORM · 2024

CoLab

A learning experience as refreshing as a sip of Coke.

ROLE
UI/UX · Frontend
YEAR
2024
TYPE
Hybrid Learning
TOOLS
Figma · Web
CoLab cover
OVERVIEW

What is CoLab?

CoLab is a hybrid learning platform built for international design students. It pairs standardized online lectures and quizzes with an in-person tutorial space — letting students freely form skill-based teams, follow lectures at their own pace, and ask questions in real time through an embedded AI assistant and live chat.

KEY FEATURES

Four pillars

INTERACTIVE DEMOS

Try it yourself

Click around — every panel below is live.

01

Team Up

Find compatible teammates by skill tags.

0 connected
02

Online Lecture

Self-paced player with chapter jumps.

Grid Systems in Interaction Design
— Why grids?
00:00 / 12:45
03

Lecture Quiz

Quiz-verified attendance — answer to continue.

Question 1 / 3

What is the primary purpose of a grid system in interaction design?

04

In-class Tutorial Whiteboard

Hover any highlighted term to see an inline explanation.

LIVE 1,247 1:23:45
Typography Composition Workshop
Dr. Hannah Lee · Visual Communication

Today: kerning, baseline grid, negative space, and hierarchy.

Hover any underlined term for an inline explanation.

Core Design Principles

  • Proper letter spacing enhances readability.
  • Baseline grids create vertical rhythm.
  • White space is an active design element.
  • Hierarchy directs attention effectively.
Ask AI Hover a highlighted term, or type below.
LIVE SITE

Visit the full CoLab website

Explore the complete CoLab project — built with my graduation studio team.

Open CoLab
Back to all works