Try the Demo

The Problem

When tasked with creating an AI course for corporate employees, I identified key gaps in traditional eLearning. Most courses rely on rigid "next button" navigation that restricts learner autonomy and fails to accommodate diverse learning paces. Additionally, AI topics are typically presented in overly technical ways that alienate non-technical staff.

Corporate learners need AI concepts presented in accessible frameworks they can immediately apply. Many aren't aware they already have AI tools within their existing software, particularly in Microsoft Office applications.

I aimed to create a course that would:

• Break away from linear navigation
• Present complex AI concepts in approachable ways
• Bridge the gap between theory and practical application
• Help employees discover AI tools already at their disposal

Initial Exploration/Research

My research focused on interaction patterns, visual design approaches, and content strategy for AI education.

For interactions, I explored alternatives to standard navigation systems. After investigating JavaScript interactions, I discovered mouse wheel events could create a more engaging experience where content reveals as users scroll, creating a sense of discovery.

For visual design, I studied minimalist interfaces through Dribbble and Figma templates. I was drawn to clean layouts with ample white space complemented by hand-drawn illustrations that made technical subjects feel approachable.

For content, I found most corporate AI training either oversimplified concepts or overwhelmed employees with jargon. I needed to find a sweet spot where content was simple enough to understand but detailed enough to be meaningful.

Process

I began by outlining core content modules including basic AI concepts, terminology, practical applications, and available tools within existing software.

Next, I developed a scroll-based interaction where new content appears as users scroll down. This allows learners to control their pace, revisit previous concepts easily, and experience a sense of discovery.

For the visual design, I created a minimal aesthetic with:

• Clean typography with clear hierarchy
• Generous white space to prevent cognitive overload
• Hand-drawn illustrations for a friendly, approachable tone
• Strategic color use to highlight key concepts
• Visual metaphors to explain abstract ideas

I structured information in digestible chunks using metaphors and real-world comparisons. For example, I compared AI to "having a skilled assistant that learns from examples, improves with practice, and works under your supervision."

I organized content into logical sections from basic concepts to practical applications and recommended tools.

Challenges

Creating a smooth scrolling experience required careful JavaScript programming, balancing innovation with cross-browser compatibility and accessibility.

Simplifying complex AI concepts without losing crucial nuance took multiple iterations. I struggled with questions like: How do I explain machine learning versus deep learning in an accessible but accurate way?

Visual consistency was challenging when integrating hand-drawn illustrations with a minimal interface. Finding the right balance took several design iterations.

Without structured pacing of traditional eLearning, I needed to ensure learners wouldn't skip important concepts. I addressed this with visual cues and animation timing to guide attention before revealing new content.

Results

Feedback highlighted that learners appreciated controlling their own pace, found the scrolling interaction more natural than traditional navigation, and that the combination of hand-drawn illustrations with minimal design made technical concepts more approachable.

The section on writing effective prompts proved especially valuable, with users reporting immediate improvements in their AI interactions. Many were surprised to discover AI capabilities already present in their familiar software.

From a design perspective, this project demonstrated how thoughtful interaction design can transform learning experiences. By giving users agency over their journey and presenting information in a visually appealing, digestible format, the course achieved its goal of making AI accessible to corporate audiences.

Probar la Demo

El Problema

Cuando me encargaron crear un curso de IA para empleados corporativos, identifiqué brechas clave en el eLearning tradicional. La mayoría de los cursos dependen de una navegación rígida con "botón siguiente" que restringe la autonomía del alumno y no se adapta a los diversos ritmos de aprendizaje. Además, los temas de IA típicamente se presentan de manera excesivamente técnica que aliena al personal no técnico.

Los estudiantes corporativos necesitan que los conceptos de IA se presenten en marcos accesibles que puedan aplicar inmediatamente. Muchos no saben que ya tienen herramientas de IA dentro de su software existente, particularmente en las aplicaciones de Microsoft Office.

Mi objetivo era crear un curso que:

• Rompiera con la navegación lineal
• Presentara conceptos complejos de IA de manera accesible
• Cerrara la brecha entre teoría y aplicación práctica
• Ayudara a los empleados a descubrir herramientas de IA ya disponibles

Exploración e Investigación Inicial

Mi investigación se centró en patrones de interacción, enfoques de diseño visual y estrategia de contenido para la educación sobre IA.

En cuanto a las interacciones, exploré alternativas a los sistemas de navegación estándar. Tras investigar las interacciones en JavaScript, descubrí que los eventos de la rueda del mouse podían crear una experiencia más atractiva donde el contenido se revela a medida que los usuarios desplazan, creando una sensación de descubrimiento.

Para el diseño visual, estudié interfaces minimalistas a través de Dribbble y plantillas de Figma. Me atrajeron los diseños limpios con amplios espacios en blanco complementados por ilustraciones hechas a mano que hacían que los temas técnicos se sintieran accesibles.

En cuanto al contenido, encontré que la mayoría de la capacitación corporativa sobre IA o bien simplificaba en exceso los conceptos o abrumaba a los empleados con jerga técnica. Necesitaba encontrar un punto medio donde el contenido fuera lo suficientemente simple como para entenderlo pero lo suficientemente detallado como para ser significativo.

Proceso

Comencé esbozando los módulos de contenido principales, incluidos los conceptos básicos de IA, la terminología, las aplicaciones prácticas y las herramientas disponibles dentro del software existente.

A continuación, desarrollé una interacción basada en el desplazamiento donde nuevo contenido aparece a medida que los usuarios se desplazan hacia abajo. Esto permite a los estudiantes controlar su ritmo, revisar fácilmente conceptos anteriores y experimentar una sensación de descubrimiento.

Para el diseño visual, creé una estética mínima con:

• Tipografía limpia con una jerarquía clara
• Amplios espacios en blanco para evitar la sobrecarga cognitiva
• Ilustraciones hechas a mano para un tono amigable y accesible
• Uso estratégico del color para resaltar conceptos clave
• Metáforas visuales para explicar ideas abstractas

Estructuré la información en fragmentos digeribles utilizando metáforas y comparaciones con el mundo real. Por ejemplo, comparé la IA con "tener un asistente capacitado que aprende de ejemplos, mejora con la práctica y trabaja bajo tu supervisión."

Organicé el contenido en secciones lógicas, desde conceptos básicos hasta aplicaciones prácticas y herramientas recomendadas.

Desafíos

Crear una experiencia de desplazamiento fluida requirió una cuidadosa programación en JavaScript, equilibrando la innovación con la compatibilidad y accesibilidad entre navegadores.

Simplificar conceptos complejos de IA sin perder matices cruciales requirió múltiples iteraciones. Luché con preguntas como: ¿Cómo explico el aprendizaje automático frente al aprendizaje profundo de manera accesible pero precisa?

La consistencia visual fue un desafío al integrar ilustraciones hechas a mano con una interfaz mínima. Encontrar el equilibrio adecuado requirió varias iteraciones de diseño.

Sin el ritmo estructurado del eLearning tradicional, necesitaba asegurarme de que los estudiantes no se saltaran conceptos importantes. Abordé esto con señales visuales y temporización de animaciones para guiar la atención antes de revelar nuevo contenido.

Resultados

Los comentarios destacaron que los estudiantes apreciaron controlar su propio ritmo, encontraron la interacción de desplazamiento más natural que la navegación tradicional, y que la combinación de ilustraciones hechas a mano con un diseño mínimo hizo que los conceptos técnicos fueran más accesibles.

La sección sobre cómo escribir indicaciones efectivas resultó especialmente valiosa, con usuarios reportando mejoras inmediatas en sus interacciones con la IA. Muchos se sorprendieron al descubrir las capacidades de IA ya presentes en su software familiar.

Desde una perspectiva de diseño, este proyecto demostró cómo un diseño de interacción reflexivo puede transformar las experiencias de aprendizaje. Al dar a los usuarios agencia sobre su viaje y presentar la información en un formato visualmente atractivo y digerible, el curso logró su objetivo de hacer que la IA fuera accesible para las audiencias corporativas.