Try the Demo

Medical Leave Process Transformation: From Flash to HTML5

When I first encountered the medical leave course, it was a legacy Flash-based training that was not only outdated technologically but also visually cluttered and text-heavy. The content was crucial for employees because understanding medical leave processes directly impacts people's well-being, but the presentation was holding back effective learning. I saw an opportunity to completely reimagine this important resource through modern web technologies and thoughtful instructional design.

The Problem

The existing medical leave course faced several critical issues:

• It was built in Flash, which was being phased out by browsers and unsupported on mobile devices
• The interface was visually dated and inconsistent with current design standards
• Content was unnecessarily complex and text-heavy, making key information difficult to absorb
• The learning experience lacked engaging interactive elements that could help explain complex processes
• Visual workflows were absent, forcing learners to mentally construct process steps from paragraphs of text

These limitations weren't just aesthetic concerns. They created genuine barriers to understanding important information about medical leave processes that employees needed to navigate during potentially stressful periods in their lives.

Initial Exploration/Research

Before jumping into design, I needed to understand both the content needs and the visual direction:

First, I partnered with the subject matter expert (SME) to understand which content elements were essential and which could be simplified or removed. Together, we identified opportunities to restructure complex information into more digestible chunks.

For visual inspiration, I explored contemporary UI design on platforms like Dribbble, looking specifically for interfaces that balanced clarity with visual interest. I was drawn to designs that used animation purposefully, not just for decoration, but to guide attention and reveal information progressively.

I also researched how other successful eLearning experiences were handling process-based content. I noticed that the most effective examples transformed complex procedures into visual workflows where users could see relationships between steps rather than just reading about them sequentially.

This exploration phase confirmed my instinct that the project needed both a visual overhaul and a fundamental rethinking of how the content was structured and presented.

Process

My approach centered around designing and developing simultaneously, with regular feedback loops:

• Content restructuring: Working closely with the SME, we rewrote and reorganized the content to be more concise and action-oriented. We prioritized information based on what employees would most need to know and removed unnecessary details that were clouding the core message.
• Visual asset creation: I designed all visual elements from scratch in Affinity Designer, creating a consistent visual language that would unify the experience. I focused on developing clean, modern UI components and illustrations that would complement rather than compete with the content.
• Workflow visualization: One of my key innovations was transforming text-heavy process descriptions into visual workflow diagrams. For complex procedures like requesting extended leave or submitting medical documentation, I created step-by-step visual guides that made the relationships between actions immediately apparent.
• Interactive development: I used Tumult Hype to bring these assets to life, creating smooth transitions and thoughtful interactions. I wasn't interested in animation for its own sake. Each movement had a purpose, whether revealing additional information, emphasizing relationships, or guiding the learner's attention to key elements.
• Custom coding: For more complex interactions, I implemented JavaScript to create custom behaviors like modal popups for supplementary information and sequential reveals for step-by-step processes. These interactions were designed to unfold at a deliberate pace that felt natural without being distracting.

Throughout this process, I maintained a balance between visual appeal and learning effectiveness. Every design decision was evaluated against the question: "Does this help employees better understand the medical leave process?"

Challenges

The project wasn't without its difficulties:

• Technical constraints: Moving from Flash to HTML5 meant rethinking interactions within the capabilities of web standards. Some effects that were simple in Flash required creative approaches in HTML5 and JavaScript.
• Content complexity: Medical leave processes contain numerous exceptions and special cases. Finding ways to present these without overwhelming learners required multiple iterations and careful information architecture.
• Balancing visual interest with clarity: I wanted the course to be visually engaging but not at the expense of comprehension. This meant repeatedly adjusting animation timing, interaction patterns, and visual hierarchy to find the right balance.
• Cross-platform consistency: Ensuring the experience worked well across devices required testing and adjustments to make sure interactions remained intuitive whether on desktop or mobile.

With each challenge, I returned to my core objective: creating a learning experience that would help employees navigate medical leave processes with confidence and clarity.

Results

• Enhanced accessibility: By moving to HTML5, the course became available on all modern devices and platforms, expanding its reach to employees regardless of where they accessed it.
• Improved comprehension: The visual workflows made complex processes easier to understand, with feedback suggesting employees felt more confident navigating medical leave procedures after completing the updated course.
• Reduced cognitive load: By streamlining content and using progressive disclosure through interactive elements, learners could focus on understanding one concept before moving to the next.
• Modern visual appeal: The refreshed design aligned with contemporary standards, giving the course a professional, current feel that reflected the importance of its content.
• More engaging experience: Thoughtful animations and interactions maintained learner interest without becoming distractions, helping to sustain attention through important but potentially dry material.

What I found most satisfying about this project was the opportunity to apply both technical skills and instructional design principles to create something genuinely useful. By transforming how this information was presented, I helped make an important process more accessible and understandable, potentially making a difference during what can be a stressful time for employees.

This project reinforced my belief that good design in learning experiences isn't just about aesthetics. It's about removing barriers between people and the information they need.

Probar Demo

Transformación del Proceso de Licencia Médica: De Flash a HTML5

Cuando me encontré por primera vez con el curso de licencia médica, era una capacitación heredada basada en Flash que no solo estaba tecnológicamente obsoleta, sino que también era visualmente desordenada y con exceso de texto. El contenido era crucial para los empleados porque comprender los procesos de licencia médica impacta directamente en el bienestar de las personas, pero la presentación estaba obstaculizando el aprendizaje efectivo. Vi una oportunidad para reimaginar completamente este importante recurso a través de tecnologías web modernas y diseño instruccional reflexivo.

El Problema

El curso existente de licencia médica enfrentaba varios problemas críticos:

• Estaba construido en Flash, que estaba siendo eliminado por los navegadores y no era compatible con dispositivos móviles
• La interfaz estaba visualmente desactualizada e inconsistente con los estándares de diseño actuales
• El contenido era innecesariamente complejo y con exceso de texto, haciendo difícil absorber la información clave
• La experiencia de aprendizaje carecía de elementos interactivos atractivos que pudieran ayudar a explicar procesos complejos
• Los flujos de trabajo visuales estaban ausentes, forzando a los estudiantes a construir mentalmente los pasos del proceso a partir de párrafos de texto

Estas limitaciones no eran solo preocupaciones estéticas. Creaban barreras genuinas para comprender información importante sobre los procesos de licencia médica que los empleados necesitaban navegar durante períodos potencialmente estresantes en sus vidas.

Exploración Inicial/Investigación

Antes de comenzar con el diseño, necesitaba entender tanto las necesidades de contenido como la dirección visual:

Primero, me asocié con el experto en la materia (SME) para entender qué elementos del contenido eran esenciales y cuáles podían simplificarse o eliminarse. Juntos, identificamos oportunidades para reestructurar información compleja en fragmentos más digeribles.

Para la inspiración visual, exploré el diseño de UI contemporáneo en plataformas como Dribbble, buscando específicamente interfaces que equilibraran la claridad con el interés visual. Me atraían los diseños que usaban la animación con propósito, no solo para decoración, sino para guiar la atención y revelar información progresivamente.

También investigué cómo otras experiencias exitosas de eLearning estaban manejando contenido basado en procesos. Noté que los ejemplos más efectivos transformaban procedimientos complejos en flujos de trabajo visuales donde los usuarios podían ver las relaciones entre los pasos en lugar de solo leerlos secuencialmente.

Esta fase de exploración confirmó mi instinto de que el proyecto necesitaba tanto una renovación visual como un replanteamiento fundamental de cómo se estructuraba y presentaba el contenido.

Proceso

Mi enfoque se centró en diseñar y desarrollar simultáneamente, con ciclos regulares de retroalimentación:

• Reestructuración del contenido: Trabajando estrechamente con el SME, reescribimos y reorganizamos el contenido para ser más conciso y orientado a la acción. Priorizamos la información basándonos en lo que los empleados más necesitarían saber y eliminamos detalles innecesarios que estaban nublando el mensaje central.
• Creación de activos visuales: Diseñé todos los elementos visuales desde cero en Affinity Designer, creando un lenguaje visual consistente que unificaría la experiencia. Me enfoqué en desarrollar componentes de UI e ilustraciones limpias y modernas que complementaran en lugar de competir con el contenido.
• Visualización de flujos de trabajo: Una de mis innovaciones clave fue transformar descripciones de procesos con mucho texto en diagramas visuales de flujo de trabajo. Para procedimientos complejos como solicitar licencia extendida o enviar documentación médica, creé guías visuales paso a paso que hacían inmediatamente aparentes las relaciones entre acciones.
• Desarrollo interactivo: Utilicé Tumult Hype para dar vida a estos activos, creando transiciones suaves e interacciones reflexivas. No me interesaba la animación por sí misma. Cada movimiento tenía un propósito, ya sea revelar información adicional, enfatizar relaciones o guiar la atención del estudiante hacia elementos clave.
• Codificación personalizada: Para interacciones más complejas, implementé JavaScript para crear comportamientos personalizados como ventanas modales para información suplementaria y revelaciones secuenciales para procesos paso a paso. Estas interacciones fueron diseñadas para desarrollarse a un ritmo deliberado que se sintiera natural sin ser distrayente.

A lo largo de este proceso, mantuve un equilibrio entre el atractivo visual y la efectividad del aprendizaje. Cada decisión de diseño fue evaluada contra la pregunta: "¿Esto ayuda a los empleados a comprender mejor el proceso de licencia médica?"

Desafíos

El proyecto no estuvo exento de dificultades:

• Restricciones técnicas: Pasar de Flash a HTML5 significó repensar las interacciones dentro de las capacidades de los estándares web. Algunos efectos que eran simples en Flash requirieron enfoques creativos en HTML5 y JavaScript.
• Complejidad del contenido: Los procesos de licencia médica contienen numerosas excepciones y casos especiales. Encontrar formas de presentar estos sin abrumar a los estudiantes requirió múltiples iteraciones y una cuidadosa arquitectura de la información.
• Equilibrar el interés visual con la claridad: Quería que el curso fuera visualmente atractivo pero no a expensas de la comprensión. Esto significó ajustar repetidamente el tiempo de animación, los patrones de interacción y la jerarquía visual para encontrar el equilibrio correcto.
• Consistencia multiplataforma: Asegurar que la experiencia funcionara bien en todos los dispositivos requirió pruebas y ajustes para asegurar que las interacciones siguieran siendo intuitivas ya sea en escritorio o móvil.

Con cada desafío, volví a mi objetivo central: crear una experiencia de aprendizaje que ayudara a los empleados a navegar los procesos de licencia médica con confianza y claridad.

Resultados

• Accesibilidad mejorada: Al pasar a HTML5, el curso se hizo disponible en todos los dispositivos y plataformas modernas, expandiendo su alcance a los empleados independientemente de dónde accedieran.
• Mejor comprensión: Los flujos de trabajo visuales hicieron que los procesos complejos fueran más fáciles de entender, con retroalimentación sugiriendo que los empleados se sentían más confiados navegando los procedimientos de licencia médica después de completar el curso actualizado.
• Carga cognitiva reducida: Al optimizar el contenido y usar revelación progresiva a través de elementos interactivos, los estudiantes podían concentrarse en entender un concepto antes de pasar al siguiente.
• Atractivo visual moderno: El diseño renovado se alineó con los estándares contemporáneos, dando al curso una sensación profesional y actual que reflejaba la importancia de su contenido.
• Experiencia más atractiva: Animaciones e interacciones reflexivas mantuvieron el interés del estudiante sin convertirse en distracciones, ayudando a mantener la atención a través de material importante pero potencialmente árido.

Lo que encontré más satisfactorio de este proyecto fue la oportunidad de aplicar tanto habilidades técnicas como principios de diseño instruccional para crear algo genuinamente útil. Al transformar cómo se presentaba esta información, ayudé a hacer un proceso importante más accesible y comprensible, potencialmente haciendo una diferencia durante lo que puede ser un momento estresante para los empleados.

Este proyecto reforzó mi creencia de que el buen diseño en experiencias de aprendizaje no se trata solo de estética. Se trata de eliminar barreras entre las personas y la información que necesitan.