Makeup Journal
Data Visualization
Makeup Journal is an interactive, filterable web-based tool that visualizes five months of personal makeup use, connecting products, context, and color through a custom data visualization system. The project was developed as part of my coursework at USC in Designing Digital Experiences: Information Design, where I explored how daily choices around makeup could be captured, structured, and brought to life visually. The result is a system that balances analytical clarity with expressive design, making space for both pattern and personality.
Instruction
Independent project under the direction of Aaron Siegal, USC Iovine and Young Academy — School of Arts, Technology and the Business of Innovation
Services
UI/UX Design Frontend Development Backend Development Database Architecture Prototyping
Tools
HTML/CSS Javascript/D3.js PHP & MySQL Figma
Date
January – May 2025
CHALLENGE
How can a personal, qualitative routine be transformed into a structured data visualization that still feels expressive? Makeup routines are often fluid, personal choices shaped by weather, events, or identity. The goal was to create a visual archive that could reveal meaningful insights across time without losing the nuance of individual days or the personality behind each product and choice.
DATA COLLECTION & BACKEND
I tracked daily makeup use across 100+ days, recording data points like time, weather, event type, and product attributes (brand, category, name, and color). The data was stored in a custom relational MySQL database. My setup involved building a custom backend and API in PHP to handle data storage, filtering, and retrieval. I focused on ensuring the database was consistently populated and structured, so the frontend could pull from both existing entries and future inputs.
SYSTEM DESIGN
Designing this system meant treating every visual element as a dynamic representation of backend data without breaking the interface. The main view leaned on stored hex codes to display product shades exactly as they were logged. Filtering actively restructured the chart ratios in real-time. I built it so users could move between the granular (a single day’s usage) and the aggregated (multiple days, filtered by product type) without losing coherence.
FRONTEND
I developed two primary views using HTML/CSS/JavaScript and D3.js: A Palette View with daily pie charts based on product categories and colors. Each daily pie chart is styled into a cosmetic compact, circular "pans" filled with the actual colors of products used that day. A Cluster View grouping usage instances by product type, with each node representing an instance of use. This let me trace product frequency and preference patterns across months
OUTCOME
The current system supports live filtering, data-based visuals, and styling. I initially experimented with static charts, but they didn’t reflect the visual or categorical richness of the products I was tracking. Through iterations, I landed on visual metaphors that better represented usage over time, aligning the system more closely with how makeup is actually used and chosen day to day. This project deepened my interest in full-stack development and designing interfaces that make data feel expressive and reflective of real-world behavior, even when built from something as everyday as getting ready in the morning.