Origin

FROM CONCEPT TO REALITY

A festival activation that became something different

01

ORIGINAL PLAN

Inspired by the tradition of honoring loved ones through altar displays, we set out to ensure everyone could participate—creating a digital altar option with AI-generated frames for uploaded photos.

02

WHAT ACTUALLY HAPPENED

Didn't get used at the event (timing/logistics), but I learned something more valuable...

03

THE OBSERVATION

People were already taking tons of photos at the festival. They just needed a reason to share them.

04

THE PIVOT

Free keepsake frame = marketing for next year's event.

↓ Scroll down to see how the form evolved ↓

Section 2

FORM DESIGN EVOLUTION

From blueprint to multi-step masterpiece: The UX journey that shaped the experience.

← Scroll to explore the journey →
THE BLUEPRINT 00
RECUERDO ETERNO

FEATURES

  • ☆ Image Upload — Enable users to upload images of loved ones from any device.
  • ☆ Name Capture — Collect first and last name to accompany each image. Display the submitted names within the decorative frame around the photo.
  • ☆ Dynamic Frame Generation ✨AI — Generative AI tool will create a family friendly Day of the Dead-inspired decorative frame (sugar skulls, flowers, purples, greens, blues) that automatically fits the uploaded image's dimensions.
  • ☆ Image Download button — Offer users a download link for their framed picture for personal use. The button will appear directly after the upload, enabling them to immediately obtain the customized image.
  • ☆ Digital Ofrenda Display — Display all uploaded and approved images in a dynamic, visually engaging gallery (masonry layout) on the digital ofrenda.

STYLE GUIDELINES

  • 🎨 Color
  • 📱 Layout — Clean, responsive layout for optimal viewing on any device.
  • AA Typography — Elegant and readable fonts to display names clearly.
  • 🎭 Iconography — Custom icons with traditional Día de los Muertos elements.

STACK

  • ✨ AI — Gemini, Genkit
  • 🖥️ UI — TypeScript, NextJS, Tailwind CSS
The Vision: A community ofrenda where every frame lives.
First Draft 01
Original single-page form
The Start: All fields visible at once. Simple: Name → Photo → Submit.
2nd Draft 02
Landing page with CTA
Added Gallery Idea Digital Alter Community Gallery.
PHOTO UPLOAD 03
Photo upload step
Step 1: Drag & drop upload with visual feedback. Clean, focused experience.
NAME CAPTURE 04
Name input step
Step 2: First & last name fields. But wait... this gets removed later. 👀
DIGITAL OFRENDA 05
Community gallery concept
Community Gallery: The original vision - frames living together in a digital ofrenda.
❌ Removed due to event timing constraints.
STEPPER INTERFACE 06
Stepper UI
Progress Indicators: Added visual stepper to show journey progress. Better UX!
THEME SELECTION 07
Theme selection step
✨ Major Addition: Theme selection (Marigolds, Sugar Skulls, Monarchs).
Not in original blueprint! Better AI constraint = better outputs.
LOADING EXPERIENCE 08
Loading screen with fun facts
✨ Enhanced UX: Fun facts during AI generation. Keeps users engaged.
FINAL EXPERIENCE 09
Final frame result
The Payoff: Beautiful frame + download button. Pure keepsake magic. 🎯
KEY LEARNINGS 💡

❌ REMOVED

  • Community gallery (event timing)
  • Name display in frames (simplified)
  • Firebase complexity (over-engineered)

✨ ADDED

  • Theme selection (better AI constraints)
  • Multi-step stepper UI (better flow)
  • Fun facts during loading (engagement)

🔄 EVOLVED

  • Single form → Multi-step journey
  • Community ofrenda → Personal keepsake
  • Complex backend → Simple & focused

💡 LEARNED

  • Working without temperature controls initially
  • Constraints breed better AI outputs
  • Simpler is often better

↓ Scroll down to see the prompt evolution ↓

Form Evolution
→
V2

The technical journey begins...

V2

TEXT INTEGRATION

VERSION: V2

MODEL: googleai/gemini-2.5-flash-image-preview

DATE: October 2024

THE EVOLUTION

The breakthrough came when we stopped treating text as an afterthought and started designing it as part of the frame's tapestry.

THE REFINED PROMPT

"Within the generated decorative border, place the text '2025 McKinney Dia de Los Muertos' directly below the user's original photo. This text is a critical part of the design. It must be rendered in an elegant font that is stylistically integrated with the border itself, as if it were embroidered, painted, or carved along with the other decorative elements. The text must not look like plain text overlaid on the image."

KEY IMPROVEMENTS

  • Standardized text: "2025 Dia de Los Muertos"
  • Material quality: "embroidered, painted, or carved"
  • Explicit integration: "not plain text overlaid"
  • Cultural guardrails added
  • Aspect ratio control (1:1)

Click any frame to see the prompt evolution →

V2 Frame 1
V2 Frame 2
V2 Frame 3
V2
→
V1

Where it all began...

Oliver Cat Frame 1
Oliver Cat Frame 2
Oliver Cat Frame 3
Oliver Cat Frame 4
Oliver Cat Frame 5
Oliver Cat Frame 7
Oliver Cat Frame 8
Oliver Cat Frame 9
V1

THE OLIVER CAT ERA

VERSION: V1

MODEL: googleai/gemini-1.5-pro-latest

DATE: July 2024

THE CONCEPT

A virtual gallery where Day of the Dead frames stayed live on the website - building a community ofrenda together.

THE PROMPT

"Generate a Day of the Dead-inspired decorative frame around the provided image. The frame should include sugar skulls, flowers, and use purples, greens, and blues. Ensure the frame is family-friendly. Display the name ${firstName} ${lastName} within the decorative frame around the photo."

INPUT SCHEMA

  • firstName - The first name to display on the frame
  • lastName - The last name to display on the frame
  • imageUri - Base64 data URI

Click any frame to explore iterations and learnings →