← Volver a proyectos
REAL-TIME 3D OFFICE · PROJECT MANAGEMENT · OGILVY COLOMBIA · 2026

Ogilvy Live

Una réplica en 3D de la oficina de Ogilvy Colombia, en el edificio Naos, conectada en tiempo real a nuestro project management. Cada tarea es una caja en el puesto de su responsable, cada cambio de etapa se ve como una persona caminando a la siguiente estación y cada comentario aparece como una burbuja. Así, un director o un cliente entiende en segundos cómo va el trabajo, sin abrir un tablero.

Ogilvy Live: oficina 3D isométrica con la ficha de una estación, el tablero Kanban y la actividad en vivo

El Proyecto

Contexto

Un tablero Kanban dice en qué columna está cada tarea, pero no deja ver de un vistazo cómo se mueve el trabajo: quién tiene qué, dónde se acumula y qué espera al cliente. En una reunión de dirección nadie lee el tablero columna por columna.

Idea

Convertir el tablero en un lugar: la oficina real, con sus estaciones y su gente, donde cada movimiento del project management se ve en vivo. El 3D está para leer la operación de un vistazo; de ahí se baja a la ficha de cada persona, tarea o estación.

Mi Rol

Lo lideré junto a Jaime Orozco. Entre los dos definimos el producto y la experiencia; yo diseñé la arquitectura, la conexión con el project management, las reglas de datos y la seguridad, y revisé cada ciclo de construcción.


Cliente
Ogilvy Colombia
Categoría
Plataforma web · 3D · Tiempo real
Equipo
Imderf Ríos · Jaime Orozco
Plataforma
Isolive (producto propio)
Ogilvy Live: la oficina completa con indicadores, equipo, actividad en vivo y etapas del tablero
El reto

¿Cómo va el trabajo, sin abrir el tablero?

01El tablero dice dónde está cada tarea, no cómo se mueve el trabajo
02Leer columna por columna no sirve en una reunión de dirección
03La plataforma fuente no se puede tocar ni poner en riesgo
04El cliente no debe ver nombres ni conversaciones internas
05Mostrarlo sin exponer datos reales de clientes

Cómo se recorre

Las capturas son de la demo, con personas y tareas inventadas.

La oficina
01

La entrada

La intro recorre el barrio real del edificio Naos, entra por el vestíbulo y sube en ascensor al piso 4, donde está la oficina.

  • El barrio sale de OpenStreetMap, con los cerros orientales al fondo.
  • Al abrir el ascensor, la cámara sale a la oficina y la interfaz entra escalonada.
  • Se puede saltar en cualquier momento.
Vista aérea del edificio Naos en la intro
Entrada al edificio Naos
02

En vivo

Cada tarea es una caja en el puesto de quien la tiene. Cuando algo cambia en el tablero, la escena lo actúa.

  • Si alguien mueve una tarea de etapa, la persona camina con ella a la siguiente estación.
  • Un comentario aparece como burbuja; si menciona a alguien, se levanta y va hasta su puesto.
  • Las vencidas llevan un pin rojo y las urgentes uno ámbar.
  • La vida de oficina es ambiente: nunca aparece en el feed ni en las fichas.
Un comentario aparece como burbuja sobre el puesto
Con una mención, la persona camina hasta el puesto de su compañero
Las estaciones
03

Una estación por etapa

Cada etapa del tablero tiene su espacio en la oficina: el estudio creativo, el muro de datos, la pantalla de publicación y más.

  • Con un clic se ve cuántas tareas hay en la estación y cuáles son.
  • La tarea va a quien la tiene de verdad: la mención más reciente que encaje con la estación, luego el asignado y luego quien comentó.
Ficha del estudio creativo con sus tareas
Ficha de la pantalla de publicación
04

Sala del cliente, nevera y basurero

Lo que está en validación pasa a la sala del cliente, lo que se congela va a la nevera y lo que no se aprueba termina en el basurero.

  • Cada uno abre su ficha con la cuenta y la lista de tareas.
  • Así también se ve lo que salió del flujo, no solo lo que avanza.
Las fichas
05

Personas y tareas

El trabajo también se explora desde las personas: un clic en alguien muestra sus tareas activas.

  • La ficha de la tarea muestra su recorrido por etapas, quién la tiene y por qué, y sus comentarios recientes.
  • Cada ficha explica el motivo con palabras, no solo con un nombre.
Ficha de una persona con sus tareas activas
Ficha de una tarea con su recorrido y comentarios
06

Tablero, etapas y buscador

El muro Kanban abre el tablero completo, columna por columna, y cada etapa marca en la escena quién está trabajando en ella.

  • El buscador lleva directo a cualquier persona, tarea o estación.
Los roles
07

Lo que ve el cliente

El cliente entra a la misma oficina, pero solo ve su cuenta: personas por perfil, sin nombres, y comentarios sin texto.

  • El equipo interno ve nombres y conversaciones.
  • El filtro se aplica en el servidor, no solo en la interfaz.
  • Un área que no puede ver responde igual que una que no existe.
Vista de cliente: equipo por perfil y actividad sin nombres
Por dentro

Cómo se conecta

Un servidor propio consulta el project management cada 5 segundos con una llave de solo lectura, lo traduce a un modelo común y empuja cada cambio al navegador. La oficina nunca escribe en la plataforma fuente.

01Project managementAPI de solo lecturaLlave de servicio yproyectos permitidos02SondeoNode · ExpressConsulta cada 5 sy guarda en caché03Modelo comúnPersonas · tareasestaciones · eventosFiltro por rol04En vivoServer-Sent EventsEmpuja cada cambiosin recargar05Oficina 3DReact Three FiberCada evento se vuelvemovimiento en escenaLogin y rolesSolo por invitaciónInterno o clienteSERVIDOR PROPIO · SOLO LECTURA

Para la demo, un motor genera actividad a cualquier hora en un proyecto de prueba, con personas y tareas inventadas: así se ve vivo sin mostrar datos reales.

Seguridad y datos

Hecho con cuidado

  • Solo lectura: la oficina nunca escribe en el project management.
  • Las rutas de datos piden una llave de servicio, aceptan solo proyectos de una lista y limitan a 120 consultas por minuto; sin llave válida responden 404.
  • Login solo por invitación, con contraseñas cifradas con scrypt, sesión en cookie firmada y bloqueo tras 5 intentos fallidos.
  • El cliente recibe las personas por perfil y los comentarios sin texto: el filtro vive en el servidor.
  • Los comentarios llegan recortados y sin enlaces, y las llaves solo viven en el servidor, nunca en el navegador.
Cómo se construyó

Dirección humana

Las decisiones son de Jaime y mías, revisadas en cada ciclo. Claude Opus 5.5, en Claude Code, ejecutó la construcción.

  • Producto. Convertir el tablero en la oficina real, con una estación por etapa y fichas para bajar al detalle.
  • Datos. Un modelo común (personas, tareas, estaciones y eventos) para que cualquier plataforma se conecte sin tocar la escena.
  • Reglas. Quién tiene cada tarea, qué es real y qué es ambiente, y qué ve cada rol.
  • Experiencia. La intro, la cámara y las fichas se ajustaron en vivo, con capturas, hasta que el recorrido se entendiera sin explicación.
Stack
ReactTypeScriptthree.jsReact Three FiberdreiViteNode.jsExpressServer-Sent EventsOpenStreetMapGeistClaude Code
Preguntas frecuentes

Lo que más preguntan

¿Qué es Ogilvy Live?

Una réplica en 3D de la oficina de Ogilvy Colombia, en el edificio Naos, conectada en tiempo real al project management del equipo. Las tareas, sus cambios de etapa y los comentarios se ven como cajas, personas que caminan y burbujas.

¿Modifica el project management?

No. Un servidor propio lo consulta cada 5 segundos con una llave de solo lectura y envía los cambios al navegador. Nunca escribe en él.

¿Qué ve un cliente?

Solo su cuenta: las personas por perfil, sin nombres, y los comentarios sin texto. El filtro se aplica en el servidor, no solo en la interfaz.

¿Los datos del video son reales?

No. El video usa un proyecto de demostración con personas y tareas inventadas, que un motor demo mueve a cualquier hora.

¿Qué es Isolive?

La plataforma detrás de Ogilvy Live, un producto propio: un modelo común y un conector por plataforma, para llevar otras herramientas de gestión a la misma oficina 3D sin tocar la escena.

¿Quién lo creó?

Imderf Ríos y Jaime Orozco, en octubre de 2026, con Claude Opus 5.5 en Claude Code ejecutando la construcción.

Créditos

Personas detrás de la idea

Equipo Digital · Ogilvy Colombia
Producto, arquitectura, datos, seguridad, dirección y revisión
Imderf Ríos
Producto, experiencia, dirección y revisión
Jaime Orozco