Saltar al contenido

Product design, liderazgo y la serie Harness Design

Post

Cómo usé IA junto con un equipo en el Hackathon de la NASA para crear un MVP en 32 horas

John Morais, .

Hace poco participé en el mayor Hackathon del mundo, el NASA Space Apps Challenge, un evento intenso de 32 horas para crear una solución de impacto real, sin fines comerciales, orientada a las personas y al medio ambiente.

Cómo se desarrolló el proceso

  • Nadie del equipo se conocía. Así que empezamos conversando para generar empatía y entender las habilidades de cada uno: cómo podíamos contribuir y cómo eso se conectaba con los desafíos de la NASA.
  • Identificamos competencias en Desarrollo de Software, Negocios, Hardware, Ciencia Espacial, Diseño y Producto.
  • Hicimos un brainstorm inicial para elegir un problema real que resolver, todo todavía en la primera conversación.
  • Definimos en cuál desafío del evento encajaba nuestra idea. A partir de ahí, discutimos cuál sería la experiencia esperada del usuario y qué podría hacer al entrar al sistema.
  • Creamos un boceto simple, con solo cuatro pasos, para que cualquier persona pudiera obtener rápidamente la información que necesitaba.

Mientras tanto, parte del equipo usaba IAs (Claude y Genspark) para procesar todas las ideas que venían de las conversaciones, el brainstorm y la descripción del desafío. Todo ocurría en paralelo: mientras dibujábamos el recorrido en papel, otro compañero generaba ideas visuales en Genspark.

Después, un compañero creó el pitch de la idea (con ayuda de ChatGPT). Todo se compartía en un grupo de WhatsApp. Enseguida, otro compañero tomó ese pitch y generó una documentación detallada en Genspark sobre lo que el sistema podría hacer.

Yo empecé a refinar las ideas visuales en FigJam, creando prompts para cada pantalla. Otro compañero, con Claude, estructuró un prompt completo con las cuatro pantallas, describiendo lo que cada una debía resolver.

Mientras tanto, el desarrollador del equipo estudiaba con Claude cómo integrar imágenes y prompts para que otra IA los interpretara y generara el front-end.

Con todo estructurado, preparé un documento con el prompt de las cuatro pantallas y las imágenes correspondientes (Pantalla 1, 2, 3 y 4) para usarlos en v0.dev y en Lovable.

En la primera versión, v0 salió mejor, así que optamos por seguir con él, alojando el proyecto en Vercel. El desarrollo se haría en Cursor, integrando el front-end generado por v0 con el back-end y las APIs de la NASA.

El back-end fue desafiante, porque estábamos aprendiendo a usar Cursor.

Por la noche, nos dimos cuenta de que no habíamos definido un método para actualizar el front-end en v0 sin romper el código en Cursor. Cuando actualizamos el front-end, el código en Cursor se rompió y perdimos tiempo volviendo a versiones anteriores.

Aprendimos que deberíamos haber definido ese flujo desde el principio, entendiendo cómo se complementarían las IAs. Así, podríamos haber trabajado front-end y back-end por separado antes de unir todo.

Las integraciones se fueron haciendo en Cursor, con ayuda constante de Claude (que, claro, se trabó y alucinó varias veces). Mientras tanto, el resto del equipo mejoraba el pitch de presentación.

Usando Claude y Figjam creé algunas personas para ayudar a tener foco en para quién estábamos tratando de resolver los problemas, y ese trabajo contribuyó a la narrativa que íbamos a crear sobre el proyecto. Las imágenes las creé usando Chat GPT 5.

Para evitar nuevos errores y aprovechar créditos que yo tenía, decidí recrear todo el flujo y las interfaces en Lovable. Pero antes, quise mejorar la experiencia del usuario en su conjunto.

Como designer, analicé todas las pantallas de v0 en FigJam, creé un screenflow e hice una evaluación crítica de lo que había que mejorar.

En FigJam, reduje pasos y dejé la comunicación más simple y práctica, para que el usuario pudiera decidir con claridad cómo salir de casa para actividades al aire libre sin comprometer la salud.

En los momentos finales, nos enfocamos en completar el formulario del proyecto en el sitio de la NASA.

Al final del segundo día, presentamos el proyecto a los consultores del evento y recibimos varios comentarios valiosos.

Corrimos a corregir los puntos señalados y, por fin, entregamos el proyecto completo.

Así quedó la interfaz final, hecha totalmente en Lovable: https://responsive-grid-recreation.lovable.app/

También creé una landing page para el proyecto, también en Lovable: https://responsive-grid-recreation.lovable.app/

Lo que hicimos bien

  • Rapidez en la toma de decisiones
  • Colaboración ágil entre diseño, ingeniería y producto
  • Recorrido del usuario simple, claro y colaborativo
  • Foco en resolver un flujo ajustado y funcional
  • Uso de IAs para generar, estructurar y validar ideas
  • Creación de un front-end en minutos con herramientas de IA

Principales aprendizajes

  • Dedicar más tiempo a evaluar el problema y a entender de quién es (persona, recorrido y momento).
  • Definir un responsable de la coordinación del equipo y garantizar foco y cohesión.
  • Estudiar con más profundidad los desafíos antes de empezar a crear.
  • Buscar problemas reales, claros y medibles.
  • Tener claridad sobre quién es afectado y cómo la solución genera impacto.
  • Invertir más tiempo enmarcando el problema y demostrando el impacto social o ambiental.
  • Crear una narrativa más poderosa sobre cómo la solución mejora la vida de las personas y el medio ambiente.
  • Entender que las IAs alucinan cuando reciben demasiados datos.
  • Saber crear prompts mejores y más contextuales.
  • Estructurar el flujo de trabajo entre IAs, front-end y back-end desde el principio.

Video sobre la experiencia

Video