134 lines
9.5 KiB
Markdown
134 lines
9.5 KiB
Markdown
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. |