A Tale As Young As Time –
→ Designed an internal media archive and storage tool for Bum Diary's photo catalog
Jan - april 2025
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.
ROLE
Product Designer
Front End Developer
Visual Strategist
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 ARCHITECTURE
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 IMPLIMENTATION
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
→ The Pinterest find that inspired the visual identity of it all
→ Batch edit + uploads from the Admin POV
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.
Backed by data, the entire system’s UI was designed with a photo-first philosophy: gallery-like layouts, minimal typography, and spatial breathing room.
→ Loading Screen - Real Time API implementation for I.E. time
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.
→ Display Modes
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
STACK
Next.js for the full web application framework and SSR capabilities
p5.js to create the immersive loading screen animation
Vercel for deployment and hosting, leveraging the Vercel Blog engine for image storage
Neon for PostgreSQL cloud-based storage and media indexing