Annie Lee



PARSONS MSDV PROJECT ARCHIVE

A Scalable, Data-Driven Archive for Parsons MSDV


Live Site    Github



ROLEDesign and Development
Commissioned by Richard The DURATION3 Months (Oct 2025 - Jan 2026) TOOLSAstro, TypeScript, JavaScript, GitHub Copilot, JSON, FigmaSKILLSDesign Systems,  Front-End Implementation, Data-driven Interface Design, Data Structures

PROJECT OVERVIEW
I redesigned and developed the Parsons MS Data Visualization Projects Archive to improve project discoverability, visual coherency, and scalability. Commissioned by Program Director Richard The, the project introduced a new design system, data-driven components, and standardized project metadata—creating a clearer, more intuitive experience for browsing student work across cohorts while ensuring the archive can scale and evolve over time.


GOALS AND CONSTRAINTS
1. Improve discoverability without overloading the interface.
2. Make the archive accessible to external audiences (recruiters, partners, prospective students)
3. Design a maintainable system that faculty can update easily in a live production environment.

➊ PROBLEM    SOLUTIONS
Problem: Heavy Institutional Branding The archive relied heavily on The New School branding, which felt visually distracting and unnecessary for a portfolio space centered on student work.

Solution: Reduced Visual Noise The interface was simplified so student projects—not interface elements—are the main focus. By reducing layout density and visual clutter, the archive is easier to browse and lets the work speak for itself.
REDESIGNED LANDING PAGE

 BeforeDense grids, heavy branding, and form-style filters created visual friction.
AfterA simplified layout and typographic filters improve scanability and keep attention on project visuals.
A New LookThe updated archive uses a single, bold type system and a high-contrast green accent to create clear hierarchy and visual emphasis. Implemented with Tailwind CSS, the system stays consistent, expressive, and easy to maintain over time.

➋ PROBLEM    SOLUTIONS
Problem: Inconsistent Project Data Project data was inconsistent across years, with videos and metadata stored in multiple formats that sometimes failed to load or display correctly.

Solution: Maintainable Data Structures The archive is built around standardized JSON files to support long-term maintenance and future growth.

src/data/
├ projects/        → student projects by year
├ keynotes/        → keynote talks by year
├ highlighted.json → featured projects
└ partners.json    → program partners


NEW FEATURES

 Project DetailsProjects are built from a shared JSON schema that drives both cards and project detail pages, keeping the archive consistent and easy to maintain as it grows.

Project CarouselFeatured projects are curated through highlighted.json that references project IDs, allowing the homepage carousel to be updated independently.

Program PartnersList of partners are enabling partner logos to function as dynamic filters

Cohort ListCohort lists are generated directly from year-based project JSON files, allowing new graduating classes to appear automatically as data is added.
 Providing Program ContextThe previous archive assumed prior knowledge of the MSDV program and offered no entry point for first-time visitors. An About page was added to clearly explain the program’s focus, structure, and the role of the archive—helping recruiters, partners, and prospective students understand what they’re viewing and how to navigate it.
➌ PROBLEM    SOLUTIONS
Problem: Limited Discoverability Projects existed in isolation, with no clear way to browse by cohort, theme, partner, or author due to inconsistent and overlapping tags.

Solution: Data-Driven Navigations Support both goal-oriented browsing (finding a specific cohort or theme) and generous discovery (finding related work through metadata connections).


Parsons MSDV