New-Parsons-MSDV — annie lee

Hi, I’m Annie! →

I’m a narrative-driven designer specialized in data visualization and branding.
I turn complex information into stories that are clear, engaging, and visually bold.

PARSONS MSDV ARCHIVES
A Scalable, Data-Driven Archive for Parsons MSDV

Live Site Github

ROLEDesign and Development

DURATION 2 Months (Oct-Dec 2025)

TOOLSAstro, TypeScript, JavaScript, GitHub, GitHub Actions, JSON, Figma

SKILLSDesign Systems, Front-End Implementation, Data-driven Interface Design, Data Structures, Collaborative Git Workflows

PROJECT OVERVIEWI 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 CONSTRAINTS1. 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 01Heavy 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 01Reduced 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.

HOME PAGEThe homepage was simplified to highlight project imagery and titles by removing institutional branding and reducing layout density.

Before: Dense grids, heavy branding, and form-style filters created visual friction.

After: A 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 02Inconsistent Project DataProject data was inconsistent across years, with videos and metadata stored in multiple formats that sometimes failed to load or display correctly.

SOLUTION 02Maintainable 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

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.

PROBLEM 03Limited Discoverability Projects existed in isolation, with no clear way to browse by cohort, theme, partner, or author due to inconsistent and overlapping tags.

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

TAGGING AND FILTERSWe simplified project tagging by removing redundant and unclear tags, consolidating overlapping themes, and reducing the total from 31 to 25.

Before: Menu-based filters with limited visibility.

After: Visible, consolidated filters that support quick scanning and exploration.

RELATED PROJECTSThe project details experience is redesigned as a standalone page. Related projects—by the same student, course, year, and shared tags—encourage continued discovery.

PROVIDING PROGRAM CONTEXT

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

OUTCOME

The archive functions as a responsive, data-driven system, supporting discovery across devices while maintaining consistent hierarchy and structure.

1. Improved discoverability designed for students, faculty, and external audiences—each with different discovery needs.

2. A refreshed, modern, and responsive visual system for MSDV creates a more pleasant browsing experience.

3. A scalable system allowing new cohorts, partners, and featured projects to be added simply by updating JSON files.