A Tale As Young As Time
Product Design
Front-end
Vibe-code
Photo sharing
Designed an internal media archive and storage tool for Bum Diary's photo catalog
An internal media archive and public-facing extension of the Bum Diary blog built to elevate image-based storytelling.
Date
Jan - May 2025
Role
Design Engineer
Tools
Figma, Cursor, Next, Tailwind, Vercel
In early 2025, nearly a year after co-founding the Bum Diary, a blog documenting the lives and stories of Inland Empire-born creatives, our team had accumulated a massive archive of photography. These images were scattered across devices and drives, and we realized that—despite the blog’s success—our most engaging material was underutilized.
I recognized a need: we weren’t just storytellers. We were archivists. And we needed a tool that treated our photography not just as content, but as living memory. That’s where “A Tale As Young as Time” began—an internal media archive and public-facing extension of the Bum Diary blog built to elevate image-based storytelling.
For the Bum Diary staff, a tale as young as time is a tool for uploading and sharing photos through a personalized admin login system, complete with extensive tagging to keep materials organized.
Project Goal
I was responsible for designing and developing a product that:
Gave BUM DIARY staff a secure internal photo archive with tagging, upload tools, and search features,
Translated our team’s regional identity into a technical interface that honored our aesthetic and community roots.
Team storage!
→ Grid view: offers the entire collection with a CRTV overlay for vibes
→ Feed view: Get a closer look at each image and its data
A members-only tool + supporter interface in one
Research & Insights
We interviewed our own internal team -- photographers, writers, and editors -- to understand friction points with the existing workflow. We also studied media archives from zines, museum collections, and niche publishing blogs.
Design System & UX
We leaned into a documentary-inspired design language -- quiet, tactile, intentional. Admin dashboard includes smart tagging, batch uploads, and version control. Public interface features swipe, pinch, tap interactions with multiple discovery paths.
→ Admin Dashboard - Internal view for Bum Diary Blog members
Technical Implementation
Prioritizing performance and flexibility: responsive image loading, intelligent caching, blurred-lazy load, WebP formatting, and custom taxonomy for organization.
Action
Brining the project to life. Initially prototyped in Figma, I led product design and collaborated with a developer assistant to architect the system. I chose languages like p5.js for a CRT-inspired landing interface, and built the archive platform using modern web frameworks like React and Next.JS with performance and accessibility in mind. All deployed on Vercel!
I implemented:
Admin login with role-based permissions so team members could upload and organize visual content securely.
EXIF metadata extraction, allowing contributors to upload photos that retained location, time, and camera data—turning every upload into a narrative.
Infinite scroll, OG image generation, dark/light mode toggle, and a CMD-K search function to allow fluid internal access and browsing.
❗️ built with Sam Becker’s open source photo blog maker
Design System & UX
We leaned into a documentary-inspired design language -- quiet, tactile, intentional. Admin dashboard includes smart tagging, batch uploads, and version control. Public interface features swipe, pinch, tap interactions with multiple discovery paths.
→ The Pinterest find that inspired the visual identity of it all
→ Batch edit + uploads from the Admin POV
Backed by data, the entire system’s UI was designed with a photo-first philosophy: gallery-like layouts, minimal typography, and spatial breathing room.
From a branding and UX standpoint, I created a matrix-style digital clock landing screen that uses real-time PST data. This clock also doubles as an ambient navigation experience, tying the archive’s ethos to themes of time, memory, and location—specifically, the Inland Empire and Brooklyn.
→ Admin Dashboard - Internal view for Bum Diary Blog members
Results
Internally, the BUM DIARY team cut their content-publishing time by 85%, with more consistent tagging, archiving, and photo contributions across coasts.
The project validated my design instincts and pushed me technically—building a functional archive system, performance-optimized landing interface, and dynamic user experience without relying on prebuilt CMS tools like WordPress.
For our audience, it’s now more than just a blog—it’s a living memory capsule, made for us, by us.
→ Admin Dashboard - Internal view for Bum Diary Blog members
Features
The platform was built with a robust set of features to enhance both creator workflow and audience experience:
Built-in auth
Photo upload with EXIF extraction
Organize photos by tag
Infinite scroll
Light/ CRT dark mode
Automatic OG image generation
CMD-K menu with photo search