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
Design Challenges
Scattered Photo Archive
Nearly a year after co-founding The Bum Diary, our team had amassed a large archive of photography stored across multiple devices and drives. This made retrieval, organization, and consistent storytelling difficult.
Underutilized Content
While the blog was thriving, our most engaging material—photography—wasn’t being showcased to its full potential. The fragmented system meant compelling stories risked being lost in disorganization.
Dual Purpose Need
We weren’t only storytellers; we were also archivists. The challenge was to design a tool that served both as an internal archive for creators and as a public-facing platform for audiences, bridging utility with storytelling.
→ Personalized Tags: Search by newest or quantity
Design Solutions
Centralized Media Archive
I designed A Tale As Young as Time to unify all photography into a single digital archive, preventing material loss and ensuring easy retrieval.
Tagging + Organizational System
To support long-term usability, the platform includes extensive tagging and categorization tools. This ensures photography is not only stored but also surfaced contextually for both staff and readers.
Personalized Admin Login System
For Bum Diary staff, the platform includes a secure, personalized admin login that allows contributors to upload and manage photos. This empowered creators to collaborate while keeping the archive structured.
→ 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
→ 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
What I learned
Where do I even begin…
This was my first experience using every tool in this stack outside of Figma. Creating my first repo's, learning how to use Cursor and Claude to write Next.JS code, experimenting in p5.js, and then of course, executing my ideas. It was a exhaustive process, but my designer brain was re-wired for the best. Can I call myself a design engineer now?