// case study
Octopus.film
Producciones submarinas y acuáticas para cine y publicidad.
Online ↗
Problema
OCTOPUS es una empresa de producciones submarinas y acuáticas para cine y publicidad en México — equipo humano certificado (TDI, PADI, SSDI, AIDA) en producción, buceo y rescate; equipo propio de cámara, iluminación y comunicación submarina; además, un escenario acuático propio en la Ciudad de México con socios logísticos en las principales ubicaciones marinas del país. El sitio tenía que respaldar ese nivel de experiencia con créditos reales — series, películas y campañas donde ya trabajaron — y convertir esa confianza en solicitudes de cotización.
Contexto
Sitio de presentación para productoras y agencias que buscan filmar bajo el agua (no solo en el mar) — muestra al equipo, sus especialidades certificadas, el equipo técnico disponible y los créditos de producciones anteriores, con un solo objetivo claro al final: que soliciten cotización. Actualización en proceso, 2026. [¿algo más de contexto — cómo llegaste al proyecto, alguna restricción de tiempo/entregable? — ajústalo]
Mi rol
Diseño, desarrollo y código completo del sitio, de principio a fin — desde el video de hero hasta los sliders y el popup de galería, construidos a la medida.
Decisiones de frontend
Estado
Manejado directo en JS/jQuery, sin framework: qué video está abierto en el popup de galería, navegación prev/next entre videos, y la posición de cada slider (From the Depths, Equipment).
Datos
Contenido escrito directo en el marcado — bios, créditos y specs de equipo hardcodeados. Los videos de la galería y los posters de "From the Depths" viven como assets locales referenciados desde el JS del popup.
Componentes
"From the Depths" (slider de pósters con link directo a IMDB por título), bios del equipo (director/cinematógrafo, productora, CTO), lista de crew y logística, slider de equipo técnico (housings RED/Sony/ARRI, Zeiss, Seafrogs) con links a fabricante, galería de video con popup a la medida y crédito de cliente por producción (Adidas, Cinépolis, Chevrolet, Ozuna, Telcel, SEDENA...), y CTA de cotización vía Google Form.
Ruteo
Una sola página con navegación por anclas (#ftd, #about, #who_we_are, #services, #equipment, #gallery) y menú secundario tipo hamburguesa para móvil.
Accesibilidad
Alt descriptivo en la mayoría de las imágenes (bios, pósters, equipo). Pendiente: los botones del popup de galería (cerrar, anterior, siguiente) son solo símbolos sin aria-label. [¿algo más que sí revisaste — contraste, teclado? — ajústalo]
Performance
Imágenes en WebP en galería y equipo técnico. El video del hero es autoplay/muted/loop con fallback webm+mp4. Medido con PageSpeed Insights: FCP 15.9s, LCP 32.9s, TBT 380ms, CLS 0, Speed Index 15.9s — el CLS está perfecto, pero el LCP es el punto débil real, casi seguro por el peso del video de hero.
Testing
[¿Cómo te asegurabas de que no se rompiera? — ajústalo]
Qué no hice, y por qué
No usé un framework de JS (React/Vue) ni bundler — jQuery y GSAP vía CDN, más JS propio, son suficientes para los sliders, el popup de galería y las animaciones, sin necesitar build tools. Tampoco monté un CMS: para el contenido que tiene (bios, créditos, equipo), editar el HTML directo es más simple que mantener un backend.
Cómo revisé el trabajo
Google Analytics real vía gtag.js, más un evento custom
(click_quote) que mide cada clic en el botón de
cotización — no solo tráfico, sino la conversión real hacia el
formulario de Google que es el objetivo del sitio. [¿algo más —
revisión en varios navegadores/celulares, feedback del cliente? —
ajústalo]
Resultado
En los últimos 30 días, ~69 usuarios activos según GA4 (+10.4% vs. el periodo anterior), 336 vistas (+9.9%) y 67 usuarios nuevos (+11.8%) — tráfico chico, coherente con un sitio de nicho B2B para productoras y agencias, no un catálogo de consumo masivo. [el evento click_quote marcó 0 en este periodo — ¿de verdad no hubo clics en la cotización, o vale la pena revisar que el evento siga disparando? — ajústalo]
Con más tiempo
Optimizar el video de hero — comprimirlo, servir una versión más ligera para conexiones lentas, o cargarlo después del primer pintado en vez de bloquearlo — para bajar el LCP de 32.9s a algo razonable. Es la mejora más urgente y más medible que le falta al sitio hoy.