Inicio → Trabajo → AAM Experience

AAM Experience

Sistema de entrenamiento en Realidad Aumentada para American Axle & Manufacturing. Del research en planta al desarrollo e implementación completa — diseño y código, todo en uno.

UX Research UI Design WebXR HTML · CSS · JS Manufactura automotriz Tier 1 Diseño + Desarrollo completo
Froylan Díaz muestra la app de realidad aumentada en una tablet a operadores de AAM frente a una celda robotizada en planta

CLIENTE

American Axle & Manufacturing

AÑO

2025

MI ROL

UX Research · UI Design · Prototipado · Desarrollo · Implementación

PLATAFORMA

Meta Quest 3 · Móviles / Tabletas

Desarrollado en Grupo ABSA, donde fui responsable del ciclo completo: investigación con usuarios, diseño de la experiencia (lo-fi a hi-fi), desarrollo WebXR con HTML, CSS y JavaScript, e implementación en planta.
100%
Dependencia de expertos on-site antes del sistema
80%
Errores de mantenimiento incorrecto documentados
4
Modos diseñados alrededor del job-to-be-done de cada perfil
3
Perfiles de usuario investigados en campo
5
Sesiones de usability testing en planta real
6
Hallazgos clave que guiaron las decisiones de diseño
00

Contexto

American Axle & Manufacturing (AAM) es un fabricante Tier 1 de componentes automotrices con operaciones en México. El proyecto nació como un Proof of Concept y evolucionó hasta convertirse en una solución funcional y escalable.

El objetivo era diseñar y construir una experiencia XR que permitiera a AAM mostrar su maquinaria en 3D interactivo, capacitar al personal sin riesgos físicos y acelerar la adopción de conocimientos técnicos. El desarrollo fue completamente en Web — HTML, CSS y JavaScript — haciendo la experiencia accesible tanto en Meta Quest 3 como en móviles y tabletas, sin necesidad de instalar ninguna aplicación nativa.

01

El problema

AAM enfrentaba varios desafíos críticos en sus procesos de capacitación y comunicación técnica:

Dependencia total de expertos on-site — si el experto no estaba disponible, el proceso se detenía. Manuales físicos y PDFs frecuentemente desactualizados o dañados. Capacitación presencial costosa, rígida y con baja retención de conocimiento. Visión limitada del funcionamiento interno de la maquinaria sin necesidad de desmontar físicamente los equipos.

El dato más crítico: el 80% de los errores de mantenimiento y de cambio de modelo eran prevenibles con acceso a información correcta en el momento correcto.

Robot FANUC en la línea de producción de AAM visto a través de la app AR, con indicadores de velocidad, tiempo de ciclo, energía y vibración
02

Investigación en campo

No asumí. Fui a la planta.

La fase de Research & Discovery comenzó con la identificación y análisis de los usuarios primarios que interactuarían con la solución XR. Esto permitió diseñar una experiencia centrada en sus necesidades reales, habilidades y contexto de uso — garantizando que la interfaz y las funciones respondieran a objetivos concretos, no a suposiciones.

El proceso incluyó entrevistas con operadores, ingenieros de mantenimiento y managers, observación de tareas en línea y análisis de los puntos de falla documentados en planta.

Sesión de investigación con operadores y supervisores de AAM en una sala de juntas de la planta
03

Perfiles de usuario

La investigación identificó 3 perfiles con necesidades radicalmente distintas. No diseñé para un usuario genérico — cada modo del sistema responde al job-to-be-done específico de cada perfil.

PERSONA 1

Ingeniero de Mantenimiento

Objetivo: Entender el funcionamiento interno de la maquinaria y realizar diagnósticos rápidos.

  • Acceso inmediato a modelos 3D interactivos
  • Información técnica clara y organizada
  • Simulación de operaciones sin detener la máquina

PERSONA 2

Operador de Línea

Objetivo: Aprender procedimientos correctos y seguros para operar el equipo.

  • Interfaz simple e intuitiva
  • Pasos guiados visualmente
  • Contenido disponible en el puesto de trabajo

PERSONA 3

Manager

Objetivo: Supervisar el uso correcto de la maquinaria y garantizar que el personal esté bien capacitado.

  • Herramienta que centralice información técnica
  • Facilidad para actualizar contenido
  • Experiencia escalable a otras líneas o plantas
04

6 insights. Una dirección.

Cada hallazgo de la investigación se tradujo en una decisión de diseño específica. Nada fue arbitrario.

01

Contraste y legibilidad — Los usuarios operan en condiciones de iluminación industrial variable. El sistema necesitaba alto contraste y tipografía legible a distancia.

02

Claridad de íconos — Los operadores no pueden detenerse a leer etiquetas largas. Los íconos deben ser autoexplicativos en el contexto de tarea.

03

Flujo del checklist — Los pasos críticos deben requerir confirmación activa antes de avanzar. El sistema no puede permitir saltarse etapas.

04

Acceso técnico — La información técnica detallada debe estar disponible en contexto — visible cuando se necesita, oculta cuando no.

05

Velocidad de uso — En entorno industrial el tiempo es crítico. Las acciones más frecuentes deben requerir el mínimo de pasos posible.

06

Jerarquía de datos — Con múltiples fuentes de información en pantalla, la jerarquía visual decide qué el usuario procesa primero en una situación de estrés.

05

Ideación: las 4 funciones

La ideación definió las 4 funciones core del sistema. Cada una responde directamente a uno de los perfiles y sus necesidades documentadas. El diseño diagrama de Venn mostró que las 4 funciones son complementarias — juntas cubren el espectro completo del usuario industrial.

Analyze

Visualización 3D interactiva del elevador de línea. Los usuarios exploran componentes y detalles técnicos en tiempo real sin detener la producción.

Simulation

Demostración animada del mecanismo de anclaje y deslizamiento. Elimina la necesidad de un modelo físico para entrenamiento y demostraciones comerciales.

Check List

Acceso rápido a especificaciones críticas y funciones clave. Garantiza operaciones precisas y seguras con confirmación visual antes de avanzar al siguiente paso.

Training

Quizzes gamificados para reforzar el conocimiento del producto. Ideal para capacitación interna del equipo y educación de clientes.

06

De wireframe a código.

Las 4 funciones core se validaron en baja fidelidad antes de escribir una línea de código. El lo-fi permitió iterar la estructura de navegación, los flujos de interacción y la jerarquía de información en días — no semanas.

Una vez aprobado el hi-fi, el desarrollo se realizó en HTML, CSS y JavaScript puro — construyendo una experiencia WebXR que corre directamente en el navegador. Esto hizo posible que el mismo sistema funcionara tanto en Meta Quest 3 como en cualquier móvil o tableta con cámara, sin aplicación nativa.

07

Usuarios reales. Planta real. Feedback real.

El prototipo hi-fi se validó con usability testing moderado directamente en la planta de AAM. Los participantes ejecutaron tareas reales: iniciar un checklist, simular un proceso y responder un quiz.

Se midieron: tiempo de ejecución, errores cometidos y tasa de éxito. Al finalizar cada sesión se realizó una entrevista breve para capturar percepciones y sugerencias — los 6 insights del caso emergieron de este proceso.

Froylan Díaz muestra la app AR en una tablet a operadores de AAM durante una sesión de pruebas en planta
08

Implementación en planta

AAM Experience pasó de Proof of Concept a sistema completamente desarrollado e implementado en planta. El código WebXR está en producción — corriendo en Meta Quest 3 y en dispositivos móviles y tabletas de los operadores directamente desde el navegador, sin instalación.

La implementación incluyó la instalación y configuración del sistema en la planta de México, la capacitación del equipo en el uso de los 4 modos y la entrega de la solución lista para escalar a otras líneas.

09

Aprendizajes

Lo que haría diferente — y lo que repetiría.

Involucrar a los operadores antes en el proceso

El testing llegó tarde en el proceso. Involucrar a los operadores desde la fase de lo-fi habría revelado antes los problemas de contraste y velocidad de uso en condiciones de planta real.

El contexto físico cambia todo

Un diseño que funciona en escritorio puede fallar completamente en entorno industrial con guantes, ruido y tiempos de atención reducidos. Diseñar para el contexto real desde el inicio, no como afterthought.

Lo que repetiría: validar en lo-fi antes de desarrollar

La decisión de validar los flujos en baja fidelidad antes de escribir una línea de código fue la más valiosa del proceso. Ahorró semanas de rediseño. Cuando empezamos el desarrollo WebXR, la estructura ya estaba probada con usuarios reales.

¿Tienes un proyecto XR industrial?

Hablemos sobre cómo la Realidad Aumentada puede transformar la capacitación y operación en tu planta.

Agendar llamada →