Bitácora

Visión general del Proyecto

Bitácora es una plataforma web educativa desarrollada para facilitar el acceso a contenido académico multimedia por parte de estudiantes de economía. El proyecto nace de una iniciativa independiente conformada por profesores e investigadores que buscan democratizar el conocimiento económico, ofreciendo materiales como cuadernos, videos, podcasts y eventos en un entorno amigable, accesible y libre de barreras técnicas. El diseño se apoya en elementos visuales como personajes ilustrados que guían a los usuarios en cada sección, haciendo que la experiencia sea más atractiva y cercana. Además, se prioriza la búsqueda rápida de contenido, el uso de iconografía intuitiva, y una arquitectura de información diseñada para minimizar la carga cognitiva de los usuarios.

Plan de trabajo

Descripción

Bitácora es una plataforma web educativa creada con el objetivo de facilitar el acceso a contenido académico multimedia para estudiantes de economía, dentro y fuera del aula. El proyecto nace como una iniciativa independiente liderada por un grupo de profesores e investigadores comprometidos con la democratización del conocimiento económico. Frente a la fragmentación de recursos y la limitada disponibilidad de materiales accesibles, Bitácora se concibe como un espacio libre, amigable y técnicamente accesible donde estudiantes puedan consultar cuadernos académicos, videos, podcasts y eventos especializados sin necesidad de pasar por filtros institucionales complejos. El sitio se distingue por un diseño centrado en el usuario que combina funcionalidad con elementos lúdicos: personajes ilustrados que guían la navegación, secciones claramente estructuradas por tipo de recurso y una interfaz que facilita tanto la búsqueda rápida como la exploración temática. Cada decisión de diseño fue pensada para reducir la carga cognitiva, mejorar la retención del contenido y permitir que tanto alumnos como docentes encuentren lo que necesitan sin distracciones, barreras técnicas ni frustración.

Requerimientos

El desarrollo de Bitácora exigió una combinación equilibrada de funcionalidades técnicas, criterios pedagógicos y principios de accesibilidad web. Se planteó una landing page responsive que diera la bienvenida al proyecto, explicando su propósito de forma clara y concisa. La navegación se organizó en secciones temáticas —Cuadernos, Videos, Podcasts y Eventos— permitiendo a los usuarios localizar fácilmente los recursos que necesitan. Uno de los requerimientos clave fue la integración de un motor de búsqueda inteligente que permitiera filtrar contenidos por tipo, autor, fecha, palabras clave o nivel académico. También se incluyó un sistema de filtrado adicional que organizara los materiales por categoría, formato o dificultad, ofreciendo una experiencia personalizada. La incorporación de personajes ilustrados con rol de guías se convirtió en una herramienta estratégica para acompañar al usuario en su recorrido, reforzando la identidad del proyecto y humanizando la experiencia. La sección de eventos incluyó un calendario interactivo y un sistema sencillo de registro. Además, se habilitó una página de contacto con formulario y enlaces a redes sociales para facilitar la interacción y participación de la comunidad. Para el equipo docente y curador, se diseñó un panel administrativo donde pueden subir, editar y clasificar contenidos de manera autónoma. Todo el sitio fue optimizado para cumplir con criterios de accesibilidad, incluyendo etiquetas semánticas, contraste alto, tipografía legible y navegación compatible con teclado. Finalmente, se implementó la descarga de cuadernos en PDF, la reproducción embebida de materiales audiovisuales y una integración básica con herramientas de analítica como Matomo o Google Analytics para evaluar el uso y mejorar la toma de decisiones futuras.

Problemática

Durante la fase de descubrimiento se identificaron problemáticas recurrentes que afectan tanto a estudiantes como a docentes del área económica. En primer lugar, se evidenció la dificultad generalizada para acceder a recursos académicos confiables, organizados y centralizados. Las plataformas institucionales existentes resultaban, en muchos casos, poco intuitivas, lentas o limitadas por credenciales específicas, lo que reducía significativamente su uso cotidiano. Además, una gran cantidad de contenido valioso creado por docentes e investigadores independientes no llegaba a difundirse adecuadamente debido a la falta de un repositorio accesible, actualizado y estructurado. Los estudiantes, en consecuencia, pasaban mucho tiempo navegando entre múltiples sitios, redes sociales o repositorios fragmentados, lo que generaba una experiencia ineficiente y frustrante. Otro hallazgo clave fue la falta de adaptación de las interfaces actuales a las necesidades de personas con discapacidad o a quienes utilizan el sitio desde dispositivos móviles. Esta combinación de factores hacía evidente la necesidad de un entorno digital más amable, accesible y centrado en la experiencia de aprendizaje.

Objetivo

El objetivo principal de Bitácora fue diseñar y desarrollar un sitio web que centralizara recursos educativos en economía producidos por docentes e investigadores independientes. La meta no era solo ofrecer acceso gratuito a materiales de calidad, sino también construir una experiencia digital que fuera intuitiva, visualmente atractiva y libre de barreras técnicas. Se buscó facilitar el descubrimiento de contenidos, promover el aprendizaje autónomo y motivar el uso frecuente del sitio a través de una interfaz cuidadosamente pensada. Adicionalmente, se buscó fomentar la participación docente mediante un entorno que les permitiera subir materiales con facilidad, sin depender de equipos técnicos. Otro objetivo fundamental fue garantizar el cumplimiento de principios de accesibilidad web para que cualquier estudiante —independientemente de sus condiciones visuales, motrices o tecnológicas— pudiera navegar y beneficiarse del contenido. En conjunto, Bitácora aspiraba a convertirse en un espacio inclusivo, sustentable y en constante crecimiento.

Solución

La solución diseñada para Bitácora fue una plataforma web responsiva, accesible y amigable, construida sobre una arquitectura clara que organizara el contenido por tipo: Cuadernos 📘, Videos 🎥, Podcasts 🎧 y Eventos 📆. Cada una de estas secciones contaba con una estética visual diferenciada, pero integrada dentro del sistema de diseño general del sitio, lo que permitía a los usuarios familiarizarse rápidamente con la estructura y desplazarse con confianza. Uno de los elementos más distintivos fue la implementación de personajes ilustrados con rol de guías pedagógicos. Estos personajes no solo embellecían la interfaz, sino que ofrecían orientación, sugerencias y mensajes de bienvenida en cada sección, humanizando la experiencia y creando una conexión emocional con el usuario. Para optimizar la búsqueda, se integró un motor semántico con filtros avanzados, permitiendo localizar recursos por tipo, autor, palabra clave o nivel. Se incluyó también un sistema de etiquetas y categorías para facilitar la exploración por temas. El sitio fue desarrollado con un diseño adaptativo, cumpliendo con estándares AA/AAA de accesibilidad. Esto incluyó soporte para lectores de pantalla, navegación por teclado, uso de contraste alto, y tipografías que facilitan la lectura a personas con dislexia. Animaciones ligeras y microinteracciones sutiles mejoraron el engagement sin sacrificar velocidad de carga ni compatibilidad con dispositivos más antiguos. El panel administrativo, desarrollado para profesores y colaboradores, fue diseñado con especial atención a la autonomía del usuario no técnico, permitiendo subir y editar contenido con facilidad. Para garantizar la sostenibilidad del proyecto, se eligieron tecnologías de código abierto y sistemas que redujeran la dependencia de servicios comerciales.

Entregables

El proceso de desarrollo de Bitácora comenzó con una fase de investigación cualitativa que incluyó entrevistas con estudiantes de licenciatura y posgrado, así como con profesores y colaboradores externos. Se mapearon los principales perfiles de usuario —como el estudiante autodidacta, el docente colaborador o el visitante ocasional interesado en eventos— y se trazaron recorridos de usuario desde la búsqueda hasta la descarga o visualización del recurso. La fase de diseño UX incluyó la definición de una arquitectura de información jerarquizada, flujos centrados en las tareas principales del usuario y prototipos de baja y media fidelidad que fueron validados con los stakeholders. Durante la fase UI se desarrolló un sistema visual de estilo editorial, moderno pero respetuoso del contexto académico. Se diseñaron personajes ilustrados para cada sección, iconografía personalizada y se elaboraron prototipos interactivos en Figma para pruebas con usuarios reales. El proceso continuó con sesiones de validación moderadas, ajustes iterativos según resultados de usabilidad y pruebas A/B. Finalmente, se entregó un manual de diseño completo, documentación funcional para desarrollo front-end, y se desplegó la versión final en un entorno web educativo con dominio propio. El proyecto incluyó soporte post-lanzamiento para mejoras incrementales y monitoreo mediante analítica web.

Rol

Como UX Engineer a cargo del proyecto Bitácora, lideré la investigación contextual y el diseño centrado en usuarios, asegurándome de que las soluciones propuestas respondieran a las necesidades reales de estudiantes y profesores. Diseñé la experiencia de navegación completa, optimizada para el descubrimiento eficiente de contenido y estructurada para reducir la carga cognitiva en cada paso. Colaboré con el equipo de ilustración para definir el tono visual de los personajes guía, asegurando su funcionalidad didáctica y su coherencia con la identidad de la plataforma. Desarrollé un sistema de diseño flexible y accesible que permitió escalar fácilmente la solución en futuras versiones. Trabajé en estrecha colaboración con el equipo de desarrollo para documentar todas las decisiones de interfaz, validando que cada componente cumpliera con los estándares de accesibilidad (WCAG 2.1) y que la experiencia se mantuviera coherente en desktop y mobile. Asimismo, coordiné las pruebas de usabilidad con usuarios reales, priorizando siempre el feedback directo como fuente de mejora continua. Durante todo el proceso actué como vínculo entre el equipo técnico y el equipo académico, garantizando que Bitácora cumpliera su doble función: ser un espacio pedagógicamente sólido y técnicamente impecable.

Proceso de Diseño

Metodología centrada en el usuario desde la investigación hasta la implementación

Investigación de usuarios

Entrevistas con 15 pediatras y observaciones en contexto real para entender desafíos en documentación clínica.

Notas de investigación - Antes

Notas de investigación

Journey map - Después

Notas de investigación

Investigación de mercado

Entrevistas con 15 pediatras y observaciones en contexto real para entender desafíos en documentación clínica.

Notas de investigación - Antes

Notas de investigación

Journey map - Después

Notas de investigación

Definición

Síntesis de hallazgos para crear artefactos que guíen el diseño de la solución.

User persona

Creación de 3 arquetipos de pediatras basados en comportamiento, necesidades y frustraciones.

Journey map

Mapeo detallado del proceso actual de documentación con puntos críticos de dolor.

User persona
Journey map

Análisis Competitivo

Evaluación de soluciones existentes para identificar oportunidades de diferenciación.

Investigación de mercado

Análisis de 12 soluciones de documentación médica y sus modelos de negocio.

Mapa de competencia

Matriz comparativa de características, precios y enfoques de productos competidores.

Investigación de mercado
Mapa de competencia

Prototipado

Desarrollo iterativo de prototipos para validar flujos y interacciones clave.

Prototipo baja fidelidad
Prototipo alta fidelidad
Ver prototipo interactivo

Pruebas

Evaluación con usuarios reales para validar usabilidad y eficacia de la solución.

Sesión de pruebas
Mapa de calor

Implementación

Desarrollo y despliegue de la solución con seguimiento continuo de métricas.

Fragmento de código
Producto final

Características Clave

Elementos innovadores que diferencian nuestra solución

Interfaz conversacional

Interacción natural

Flujo conversacional que permite a médicos dictar notas en lenguaje natural, transformado en documentos estructurados automáticamente.

60% Reducción tiempo
95% Precisión
Plantillas personalizables

Plantillas adaptables

Sistema modular que los médicos pueden personalizar según especialidad y preferencias individuales.

85% Adopción
30+ Plantillas
Sistema de sugerencias

Sugerencias contextuales

IA analiza historial del paciente para sugerir diagnósticos diferenciales y redacciones optimizadas.

40% Menos errores
75% Sugerencias útiles
Modo consulta rápida

Flujo optimizado

Modo "consulta rápida" para casos simples que reduce pasos necesarios al mínimo esencial.

50% Más rápido
90% Satisfacción

Resultados e Impacto

Métricas clave que demuestran el éxito del proyecto

50%
Reducción en tiempo de documentación
Tiempo promedio por consulta
89%
Satisfacción usuaria
En pruebas de usabilidad
12
Clínicas implementando
En 3 países
4.8/5
Calificación promedio
En encuestas NPS

Lecciones Aprendidas

Reflexiones clave que surgieron durante el proyecto

Contexto es clave

La observación en contexto real reveló necesidades no expresadas en entrevistas, como la importancia de flujos que permitan mantener contacto visual con el paciente.

Seguridad primero

Los médicos priorizan precisión sobre velocidad. Implementamos mecanismos de verificación que no interrumpen el flujo pero garantizan exactitud.

Iteración constante

El testing temprano con prototipos funcionales evitó costosos rediseños en etapas avanzadas de desarrollo.

Terminología médica

El modelo de lenguaje necesitó entrenamiento especializado para manejar correctamente términos médicos y abreviaturas.

Flujos híbridos

Combinar entrada por voz y texto fue crucial para adaptarse a diferentes preferencias y contextos de uso.

Privacidad de datos

Implementar encriptación end-to-end desde el inicio fue fundamental para ganar confianza de usuarios.