Proyecto

Rediseño de Plataforma Educativa (NÚCLEO)

Herramientas
Affinity for graphic designFigma for UI

Situación Inicial

Unidad Solicitante: Coordinación Académica de la Plataforma Educativa.

Una institución educativa busca rediseñar su plataforma de contenidos para cursos online. El equipo de UX identificó problemas críticos en la estructura actual: los usuarios no encuentran los cursos con facilidad, la función de búsqueda es ineficiente y el etiquetado de las categorías es confuso. Se solicitó el apoyo del área de Arquitectura de Información para reorganizar el contenido, optimizar la navegación y proponer un prototipo funcional que mejore la experiencia de usuario.

Nuestro objetivo: Diseñar una nueva arquitectura de información para la plataforma, aplicando las mejores prácticas de organización, etiquetado, navegación y búsqueda. Entregamos un prototipo de baja fidelidad, validado con usuarios, que sirve como base para el rediseño del sistema actual, mejorando la findability (capacidad de hallazgo) y la usabilidad del contenido.
Fase 1: Descubrimiento
y Empatía

¿Qué es la AI?

La Arquitectura de Información (AI) es la disciplina encargada de organizar, estructurar y etiquetar la información en productos digitales para que sea fácil de encontrar y comprender por los usuarios. Combina principios de diseño, psicología cognitiva y ciencias de la información para crear sistemas digitales intuitivos.

Importancia en Productos Digitales

Facilita la Navegación
Ayuda a los usuarios a moverse por el sitio sin fricciones.
Reduce la Sobrecarga Cognitiva
Organiza el contenido de manera lógica para evitar abrumar al usuario.
Mejora la Experiencia de Usuario (UX)
Impacta directamente en la satisfacción y el cumplimiento de objetivos.

Impacto en el Negocio y en UX

Una Arquitectura de Información sólida no solo beneficia al usuario; es una herramienta de negocio. Al alinear las necesidades del usuario con los objetivos comerciales, reducimos las tasas de rebote y aumentamos la conversión (matriculaciones y suscripciones).

Componentes Centrales

1

Sistemas de Organización
Cómo se agrupan los contenidos, temas, tareas y audiencias.

2

Sistemas de Navegación
Proporcionan las rutas para que los usuarios se muevan por el sistema.

3

Sistemas de Etiquetado
Nombres y términos utilizados para describir el contenido.

4

Sistemas de Búsqueda
Permiten a los usuarios encontrar información específica rápidamente.

Benchmarking Competitivo

El siguiente Benchmarking se realizó para analizar a los competidores e identificar los estándares de la industria y las oportunidades del mercado.

Estructura

Etiquetado

Navegación

Búsqueda

Domestika

Cousera

Udemy

- Jerárquica: Posee categorías y subcategorías en su menú de navegación principal.
- Secuencial: Al adquirir un curso y comenzar el estudio, el contenido se organiza cronológicamente con una ruta guiada.
- Matricial: Se puede acceder al mismo contenido desde diferentes puntos (por ejemplo, mediante etiquetas al pie de la página).
- Etiquetado Híbrido: Etiquetas como "Plus" u "Oferta" (contextuales), menú de "Categorías" (de navegación) y etiquetas de software al final del curso (metadatos).
- Vocabulario claro, estándar y consistente; etiquetas con identidad de marca.
- Navegación Multimodal: El menú superior permanece siempre visible, junto con el perfil y el botón de "Cursos".
- Navegación Lateral: Aparece en la página del curso, permitiendo al usuario saltar a secciones relevantes.
- Permite al usuario refinar su búsqueda y filtrar sin perder el contexto de la categoría principal.
- Búsqueda Híbrida: El motor rastrea palabras clave en títulos, nombres de instructores, descripciones e incluso etiquetas de la comunidad.
- Filtros: Aparecen tras realizar una búsqueda o al entrar en una categoría, permitiendo filtrar por atributos.
Rígida: Se divide en Certificación, Especialización, Curso, Módulo y Lección. Es de naturaleza lineal ya que busca el cumplimiento de objetivos progresivos.
Denotativo y Formal: Orientado a transmitir un nivel de rigor universitario.
Global y Local: Navegación estándar con menús superiores y laterales. Diseñada para reducir la sobrecarga cognitiva.
Basada en filtros académicos: Altamente técnica, permite filtrar por niveles y sugiere rutas de aprendizaje completas.
Búsqueda Predictiva: El sistema sugiere no solo palabras clave, sino también categorías y cursos específicos en tiempo real.
Global, local y multimodal: Se adapta al ciclo de vida del usuario dentro de la plataforma.
Utiliza términos estándar de la industria relacionados con el usuario para categorías y descripciones. También emplea etiquetas de estado o "Badges" (insignias).
Estructura jerárquica combinada con una estructura de red (enlaces relacionados).

Domestika

Estructura

- Jerárquica: Posee categorías y subcategorías en su menú de navegación principal.
- Secuencial: Al adquirir un curso y comenzar el estudio, el contenido se organiza cronológicamente con una ruta guiada.
- Matricial: Se puede acceder al mismo contenido desde diferentes puntos (por ejemplo, mediante etiquetas al pie de la página).

Etiquetado

- Etiquetado Híbrido: Etiquetas como "Plus" u "Oferta" (contextuales), menú de "Categorías" (de navegación) y etiquetas de software al final del curso (metadatos).
- Vocabulario claro, estándar y consistente; etiquetas con identidad de marca.

Navegación

- Navegación Multimodal: El menú superior permanece siempre visible, junto con el perfil y el botón de "Cursos".
- Navegación Lateral: Aparece en la página del curso, permitiendo al usuario saltar a secciones relevantes.
- Permite al usuario refinar su búsqueda y filtrar sin perder el contexto de la categoría principal.

Búsqueda

Búsqueda Híbrida: El motor rastrea palabras clave en títulos, nombres de instructores, descripciones e incluso etiquetas de la comunidad.
Filtros: Aparecen tras realizar una búsqueda o al entrar en una categoría, permitiendo filtrar por atributos.

Cousera

Estructura

Rígida: Se divide en Certificación, Especialización, Curso, Módulo y Lección. Es de naturaleza lineal ya que busca el cumplimiento de objetivos progresivos.

Etiquetado

Denotativo y Formal: Orientado a transmitir un nivel de rigor universitario.

Navegación

Global y Local: Navegación estándar con menús superiores y laterales. Diseñada para reducir la sobrecarga cognitiva.

Búsqueda

Basada en filtros académicos: Altamente técnica, permite filtrar por niveles y sugiere rutas de aprendizaje completas.

Udemy

Estructura

Estructura jerárquica combinada con una estructura de red (enlaces relacionados).

Etiquetado

Utiliza términos estándar de la industria relacionados con el usuario para categorías y descripciones. También emplea etiquetas de estado o "Badges" (insignias).

Navegación

Global, local y multimodal: Se adapta al ciclo de vida del usuario dentro de la plataforma.

Búsqueda

Búsqueda Predictiva: El sistema sugiere no solo palabras clave, sino también categorías y cursos específicos en tiempo real.

Guerrilla Testing

La implementación del Guerrilla Testing fue crítica para el éxito del proyecto por las siguientes razones:
01.
Validación del Modelo Mental en tiempo real: Permitió observar cómo los usuarios procesan la información, revelando que la fricción principal no era solo la ubicación de los botones, sino la comprensión conceptual de la oferta comercial.
02.
Complementariedad Cualitativa: Mientras que el Tree Testing entregó el "qué" (tasas de éxito), el Guerrilla Testing aportó el "por qué", identificando que la falta de transparencia era la barrera principal para la toma de decisiones.
03.
Agilidad y Mitigación de Riesgos: Como técnica de bajo costo y alta velocidad, validó la nueva jerarquía antes de iniciar el desarrollo de UI (que requiere más recursos), evitando el arrastre de errores estructurales.
Escenario de la Prueba
Imagina que recibiste una tarjeta de regalo de $15.000 pesos chilenos para gastar en Domestika. Siempre has querido aprender un curso nuevo (seleccionado al azar).
Tarea 1:
Encontrar un curso específico
Encuentra un curso de nivel iniciación, en español, que cueste menos de $15.000 pesos.
Tarea 2:
Revisar detalles del curso
Sin comprar, averigua cuántas UNIDADES tiene y si incluye RECURSOS ADICIONALES (PDFs, etc.) para descargar.
Tarea 3:
Simular proceso de compra
Añádelo al carrito de compras y avanza hasta la pantalla de DETALLES DE PAGO. Detente justo antes de pagar.
Entrevista Cualitativa
Facilidad de Búsqueda (1-5):
¿Qué tan fácil fue encontrar lo que buscabas?
Etiquetado:
¿Encontraste las secciones de "Contenido" y "Detalles"? ¿Conoces la diferencia entre una "Unidad" y una "Lección"?
Palabras o Botones Confusos:
¿Hubo alguna confusión en la navegación?
Navegación de Negocio: ¿Fue fácil reconocer el botón de "Comprar"? ¿Hubo distracciones con los "Packs" o Bundles?
Experiencia General (1-5): Facilidad de navegación y cumplimiento de tareas.
Test de Usabilidad (Métricas)
Tiempo por Tarea: Cronómetros para:
Encontrar curso
Revisar cantidad
Añadir al carrito.
Clicks por Tarea: Clicks para:
Curso
Detalles
Botón de Compra.
Tasa de Rebote (Percepción de Facilidad 1-5):
Encontrar curso
star
star
star
star
star_border
Revisar cantidad
star
star
star
star_border
star_border
Añadir al carrito.
star
star
star
star_border
star_border
Tasa de Éxito: Porcentajes de éxito en el cumplimiento de cada tarea.
Encontrar curso
Revisar cantidad
Añadir al carrito.

Hallazgos Clave por Usuario

Problemas de
Enfoque y Distracción
face
Usuario 1
Comportamiento
Se perdió en secciones secundarias como "Quiénes somos" e "Historia". Los banners visuales saturados desviaron su atención del catálogo de cursos real.
Fricción
Tardó demasiado tiempo en llegar a la oferta educativa real debido a un exceso de información corporativa.
Insight (Hallazgo)
La página de inicio (Home) requiere una limpieza visual para priorizar el acceso al contenido educativo desde el primer clic.
Confusión en el
Modelo de Negocio
(Hallazgo Crítico)
face_2
Usuario 2
Comportamiento
Al intentar comprar un curso, el usuario no pudo distinguir si el precio mostrado era por un curso individual o si requería una membresía mensual.
Fricción
Expresó desconfianza al percibir "precios ocultos" o falta de claridad en el carrito de compras.
Insight (Hallazgo)
La falta de transparencia comercial es el mayor bloqueador para la conversión. Esto justificó la creación de la categoría "Precios y Membresías" en el Nivel 1 de la navegación final.
Invisibilidad de
Materiales de Apoyo
face_3
Usuario 3
Comportamiento
Intentó localizar archivos descargables dentro de los detalles del curso, pero abandonó la tarea tras 45 segundos sin éxito.
Fricción
La jerarquía de los botones de acción era plana; el botón de "Descargar" competía visualmente con otros elementos menos importantes.
Insight (Hallazgo)
Las tareas de apoyo deben tener una alta dominancia visual. Esto justificó la reubicación de los materiales directamente debajo de los detalles del curso en la arquitectura final.

Julián Martínez

face
Edad: 32
Pragmático
Analítico
Directo
Impaciente
Bio
Julián trabaja bajo presión y valora su tiempo libre como si fuera oro. No navega por placer; navega para resolver problemas. Si un sitio web le pide "completar un formulario para recibir una cotización", cierra la pestaña y busca a un competidor que tenga el precio claramente visible.
Necesidades Principales:
- Inmediatez.
- Transparencia de costos.
- Sistema de reserva o compra en máximo 3 clics.
Frustraciones:
- Pop-ups intrusivos.
- Falta de precios claros.
- Procesos de registro obligatorios antes de poder verificar disponibilidad.

Sofía Jimenez

face_3
Edad: 25
perfectionist
Analítica
Extrovertida
Exploradora
Bio
Sofía es una profesional curiosa que utiliza su tiempo libre para explorar nuevas habilidades creativas. Ha comprado varios "packs" de cursos en Domestika durante las ofertas, pero su panel de usuario se siente como una lista de tareas pendientes que nunca termina.
Necesidades Principales:
- Necesita que alguien (o algo) le diga exactamente qué curso se ajusta a su nivel actual.
- Busca una estructura que conecte varios cursos en una "ruta de aprendizaje" o un objetivo mayor.
- Objetivos pequeños y alcanzables para sentir progreso a pesar de su agenda ocupada.
Frustraciones:
- Cantidad de información abrumadora.
- Falta de claridad sobre la dificultad real de los cursos.
Fase 2: Definición y Arquitectura
de Información (AI)

Taxonomía Preliminar

La Taxonomía Preliminar se presenta como la estructura de la "hipótesis inicial", diseñada para organizar el contenido de manera lógica y jerárquica. Su importancia radica en establecer una base de navegación (Niveles 0, 1 y 2) que busca resolver los puntos de fricción identificados en el Guerrilla Testing. Funciona como el modelo mental original que, posteriormente, será validado y ajustado mediante un Card Sorting con usuarios reales.
Level 0
- Cabecera / Header (Logo, Barra de búsqueda, Iniciar sesión, Registro)
- Pie de página / Footer con información de contacto
Level 1
- Explorar Cursos
- Precios y Membresías
- Mi Cuenta y Progreso
Level 2
- Contenido de aprendizaje
- Recursos adicionales
- Equipo docente y experiencia formativa

Card Sorting

Tras definir la taxonomía inicial, se aplicó la técnica de Card Sorting para validar si la jerarquía propuesta coincidía con la estructura mental de los usuarios. Este proceso fue fundamental para refinar el etiquetado y asegurar que la navegación fuera intuitiva y eficiente.

Hallazgos Clave

apps
Afinidad de Software: Los resultados de la Matriz de Similitud confirmaron que los usuarios agrupan los cursos por software (Figma y Photoshop) con un 100% de coincidencia.
label
Refinamiento de Etiquetas: Se detectó que la etiqueta inicial "Recursos Adicionales" era ambigua. Los usuarios prefirieron la categoría "Material de Apoyo" para agrupar archivos y contenido descargable.
view_column
Relación de Contenidos: El Dendrograma mostró una fuerte conexión entre las lecciones y el material de apoyo, sugiriendo que deben coexistir en la misma sección de navegación.

Sitemap

Comprehensive Sitemap diagram for the NÚCLEO platform, illustrating the hierarchical structure and navigation paths for an optimized educational user experience.

User Flows

NÚCLEO platform User Flow chart, detailing the step-by-step digital journey and logic sequences to reduce cognitive overload during the learning process.

Tree Testing

El objetivo del Tree Testing es evaluar la capacidad de búsqueda de elementos dentro de la jerarquía propuesta. Queremos verificar si la organización del contenido definida en el inventario coincide con el modelo mental del usuario, eliminando distracciones visuales para medir exclusivamente la efectividad de las etiquetas y la profundidad de las ramas.

Metodología y Ejecución: Consultamos a un grupo de 9 personas a través de la plataforma UXTweak, evaluando nuestro mapa de navegación y generando rutas de nodos. Se plantearon las siguientes tareas para evaluar los flujos críticos:

01. Buscar un curso de Marketing.
02. Descargar un archivo específico de un curso.

Hallazgos Clave

fact_check
Efectividad: Los resultados confirmaron que un 55.6% de los usuarios logró completar la tarea correctamente.
keyboard_return
Navegación Directa: El mismo porcentaje (55.6%) completó la tarea sin realizar ningún tipo de backtracking (retroceso), lo que indica rutas claras para la mayoría.
access_time
Eficiencia: El tiempo promedio para completar las tareas fue de 56 segundos.
error_outline
Punto de Fricción Identificado: Entre las dos tareas, la que presentó mayor índice de error fue la segunda (Descargar un archivo).
route
Decisión de Diseño: Se concluye que la ruta de descarga debe integrarse con mayor claridad y relevancia visual en la plataforma, ya que es un punto crítico para la experiencia del usuario.
Fase 3: Ideación y Diseño Conceptual
La fuente LT Superior es una tipografía sans-serif geométrica que destaca por sus líneas limpias, su modernidad y una estructura equilibrada. Gracias a su alta legibilidad y estética contemporánea, es una elección excelente para proyectos que buscan transmitir:

Eficiencia, claridad y profesionalismo técnico.
Primario
#FF8E70
#F4A994
Base
#FFFFFF
Secundario
#FF8E70
#FF8E70
#FF8E70
Terciario
#FF8E70
#FAF9BC
Texto
#FF8E70

Wireframing de Mediana Fidelidad

Design System

Professional laptop mockup displaying the NÚCLEO educational platform user interface and information architecture design.
Investigadores y Diseñadores: Deb Larenas, Paola Riveras, Joaquín Pérez, Tabata González, Daphne Gorigoitia
Metodología: Diseño Centrado en el Usuario (DCU) & Prototipado Iterativo.
Cronología: 2 semanas.
Tools:
Blender for 3DAffinity for graphic designFigma for UI
next project:

AKORA – A Vision of
Feminine Techwear.

Go to next projectarrow_outward

¿Listo para construir tu ecosistema visual?
Hablemos.

¡Gracias!
Tu mensaje ha sido
recibido con éxito.
Oops! Ocurrió un error al enviar el formulario. Por favor, inténtalo de nuevo.