# 📄 ARQ & UX – IDE CONSULTORES ## 1. Mapa del Sitio (Sitemap Definitivo) La estructura está diseñada para guiar al usuario según su "nivel de conciencia" sobre su propio problema, sin obligarlo a entender la estructura interna de IDE primero. 1. **Home** (Resumen sistémico y doble vía de entrada) 2. **Somos IDE** (Identidad, propósito, equipo y metodología) 3. **Desafíos** (Para el que tiene el problema, pero no sabe qué solución necesita) 4. **Soluciones** (Para el que sabe exactamente qué busca: ISO, PMO, IA, etc.) 5. **Ecosistema** (La explicación del "cómo": Excellence, Project, Academy, Digital) 6. **IDE Academy** (Página de aterrizaje simplificada: propuesta de valor y 2-3 cursos destacados) 7. **Insights** (Feed dinámico de las 3 últimas entradas del blog de WordPress + enlace al blog completo) 8. **Contacto** (Formulario inteligente + WhatsApp + Datos) 9. **Trabaja con nosotros** (Página independiente en el footer para captación de talento) --- ## 2. Esquemática de la HOME (Wireframe Lógico por Bloques) *Regla de oro: La Home resume, las secciones desarrollan. No repetir la historia completa en cada página.* * **Bloque 1: Hero (La Doble Entrada)** * *Eyebrow (Texto pequeño superior):* TODO ESTÁ CONECTADO. * *H1 (Título principal):* Mejorar una parte no siempre mejora el todo. * *Bajada:* En una organización, cada decisión genera efectos más allá del lugar donde interviene. Antes de buscar una solución, hay que comprender el sistema. * *Mecanismo de Doble Entrada (Dos tarjetas o botones prominentes):* * `[ Tengo un desafío, pero no sé exactamente qué necesito ]` → Lleva a la página *Desafíos*. * `[ Busco una solución concreta (ISO, Proyectos, IA) ]` → Lleva a la página *Soluciones*. * **Bloque 2: La Tensión (El Quiebre)** * *Copy:* "Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. Soluciones aisladas para problemas que nunca estuvieron realmente aislados." * *Visual:* Gráfico minimalista y elegante (geometría o nodos) que contraste "partes aisladas" vs. "sistema conectado". Cero estética de "cerebros digitales" o "circuitos". * **Bloque 3: El Principio IDE (La Nueva Forma de Mirar)** * *H2:* Comprender el todo para saber dónde intervenir. * *Metodología (Visual en 4 pasos):* 01. Comprender → 02. Focalizar → 03. Integrar → 04. Transformar. * **Bloque 4: El Ecosistema (Demostración de Capacidad)** * *H2:* No se trata de sumar soluciones. Se trata de conectar capacidades. * *Grid de 4 tarjetas interactivas:* Excellence | Project | Academy | Digital. (Al hacer hover o clic, se expande brevemente qué resuelve cada una y un link a la página de Ecosistema). * **Bloque 5: Prueba de Autoridad / Sectores** * *Copy:* "Acompañamos la transformación en contextos complejos." * *Visual:* Logos de clientes o iconografía limpia de sectores (Agro, Salud, Educación, Industria). * **Bloque 6: CTA Final de Conversión** * *H2:* ¿Qué desafío querés transformar? * *Bajada:* Empecemos por entenderlo. * *Botón Principal:* `[ HABLEMOS ]` (Lleva a Contacto). --- ## 3. Esquemática de Subpáginas Clave ### A. Página: Desafíos * **Propósito:** Atender al usuario que dice "Algo no funciona, pero no sé qué necesito". * **Estructura:** * Header con pregunta empática: "¿Qué está pasando en tu organización?" * Listado de tarjetas de desafíos (ej: "Transformar la organización", "Mejorar la gestión", "Incorporar tecnología e IA"). * *Dinámica:* Al hacer clic en un desafío, no se recarga la página, se abre un **Modal o Acordeón** que muestra: Contexto → Preguntas clave → Posibles caminos de intervención → CTA: "Hablemos de este desafío". ### B. Página: Soluciones * **Propósito:** Atender al usuario que dice "Necesito ISO 9001" o "Necesito una PMO". * **Regla UX:** La respuesta concreta debe estar a un clic. Sin filosofía previa. * **Estructura:** * Buscador o filtro rápido por tipo de solución. * Listado claro (ej: ISO 9001, ISO 14001, Gestión de Proyectos, IA). * *Dinámica:* Al entrar a una solución específica (ej: ISO 9001), la página responde: 1. Qué es, 2. Para quién, 3. Qué problema aborda, 4. Cómo intervenimos. * *Venta cruzada sutil al final:* "¿Sabías que un sistema de gestión requiere también desarrollar capacidades en tu equipo? Conocé cómo IDE Academy puede complementar esta implementación". ### C. Página: Ecosistema * **Propósito:** Explicar el "por qué" y el "cómo" de IDE. * **Estructura:** Explicación profunda de las 4 capacidades (Excellence, Project, Academy, Digital). Gráfico visual que muestre cómo se relacionan entre sí (ej: un diagrama de Venn o red de nodos). Énfasis en: "No todos los desafíos necesitan todo el Ecosistema, pero todos se benefician de una mirada que comprende el conjunto". ### D. Página: IDE Academy (Alcance MVP) * **Propósito:** Mencionar la academia y captar interés para formación *In Company* o futuros cursos, sin complejidad de LMS. * **Estructura:** * Header: "Desarrollamos las capacidades que hacen posible la transformación". * Breve descripción de la propuesta de valor de la formación en IDE. * **Sección "Próximos Cursos / Destacados":** 2 o 3 tarjetas de cursos (con datos de relleno o planificados: Título, Modalidad, Duración). * *Dinámica:* Al hacer clic en un curso, se abre un **Modal** con la ficha técnica (Propuesta, Temario, Docente) y un CTA que dice: "Consultar por próximas fechas o formación In Company" (que lleva al formulario de contacto). ### E. Página: Insights * **Propósito:** Demostrar conocimiento y generar tráfico. * **Dinámica:** La página mostrará automáticamente (vía API de WordPress) las **3 últimas entradas** del blog en formato de tarjetas (Imagen, Título, Extracto, Fecha). * *CTA:* Un botón claro al final: `[ Ver todos los artículos en nuestro Blog ]` que deriva al subdominio `blog.ideconsultores.com.ar`. ### F. Página: Contacto * **Propósito:** Convertir el interés en una conversación comercial con baja fricción. * **Estructura:** * Mensaje de apertura: "¿Qué desafío querés transformar? Empecemos por entenderlo." * **Formulario Inteligente:** 1. Nombre 2. Organización 3. Rol 4. Email 5. Teléfono (Opcional) 6. *Dropdown "Estoy buscando":* (Orientación para un desafío / Una solución concreta / Implementar o certificar una norma / Formación para mi organización / Gestionar un proyecto / Transformación digital e IA / Otro). 7. Campo de texto: "Contanos brevemente en qué podemos ayudarte". 8. Botón de envío: `[ HABLEMOS ]` * *Configuración técnica:* El script de envío debe estar configurado para dirigir los datos a `info@ideconsultores.com.ar`. * *CTA Secundario:* "¿Preferís escribirnos directamente?" → Botón de WhatsApp. ### G. Página: Trabaja con nosotros * **Ubicación:** Enlace exclusivo en el Footer (pie de página) para no distraer a los clientes potenciales. * **Estructura:** Breve texto sobre la cultura de IDE y un formulario simplificado (Nombre, Email, LinkedIn/CV, Área de interés) que también envía a `info@ideconsultores.com.ar` (o a un alias interno que ellos definan, ej: `talento@...`). --- ## 4. Dinámica del Sitio y Reglas de UX (Sin Código) 1. ** Navegación Mobile First:** En dispositivos móviles, el menú se convierte en un "menú hamburguesa" limpio. Los filtros de la página de Soluciones o las tarjetas de Academy deben ser fácilmente scrolleables horizontalmente o apilados verticalmente con botones grandes (fáciles de tocar con el pulgar). 2. **Uso de Modales (Pop-ups):** Se utilizarán modales para las fichas de cursos de Academy y para el detalle de los "Desafíos". Esto mantiene al usuario en la misma página, reduciendo la tasa de rebote y acelerando la navegación sin recargar el entorno. 3. **Transiciones y Animaciones Funcionales:** Solo se usarán animaciones con propósito. Por ejemplo, un _fade-in_ suave al hacer scroll para que los bloques de texto aparezcan con elegancia, o el despliegue fluido de un acordeón. Nada de animaciones que distraigan, mareen o ralenticen la carga. 4. **Accesibilidad (A11Y) como estándar:** * Contraste alto y validado (WCAG) entre textos y fondos en _ambos_ modos de tema. * Tamaños de fuente base de al menos 16px para cuerpos de texto. * Etiquetas (`labels`) claras y visibles en todos los campos de formularios. * Textos alternativos (`alt`) descriptivos en todas las imágenes. * Navegación completamente operable mediante teclado. 5. **Selector de Tema (Modo Claro / Modo Oscuro):** * **Funcionalidad:** Un switch discreto pero accesible (ej. ícono de sol/luna) en el header o footer del sitio. * **Estado por defecto:** **Modo Claro**. * **Regla de Diseño:** El modo oscuro **no** debe parecer una estética "tech", "hacker" o "cyberpunk" (prohibido usar negros puros #000000 o acentos neón). Debe ser un gris oscuro elegante y mate (ej. #1A1A1A o #2D2D2D) que mantenga la seriedad profesional de la consultora, con textos en blanco o gris muy claro para garantizar una lectura cómoda y reducir la fatiga visual nocturna. La transición entre modos debe ser suave (transición CSS de 0.3s). 6. **Integración del Blog (Insights):** El desarrollador configurará un endpoint en el WordPress del subdominio para que la página principal de IDE extraiga solo el título, extracto, imagen destacada y enlace de las 3 últimas publicaciones, garantizando que el sitio principal cargue rápido y no se vea afectado por la carga del blog.