En The UIX Studio, estamos comprometidos a crear experiencias digitales que no solo sean visualmente atractivas, sino también intuitivas y funcionales. En este caso de estudio, queremos compartir un proyecto reciente en el que trabajamos, destacando nuestro proceso de diseño y los resultados obtenidos.
Proyecto: Rediseño de la Plataforma de Aprendizaje Online
Cliente: BAUER DeutschAkademie
Industria: Educación – Enseñanzade idioma alemán
Objetivo: Mejorar la experiencia de usuario y aumentar la retención de estudiantes.
1. Investigación Inicial
El primer paso en nuestro proceso fue comprender las necesidades y objetivos del cliente. Realizamos entrevistas con los stakeholders de BAUER DeutschAkademie y llevamos a cabo encuestas y pruebas de usuario con los estudiantes actuales. Esto nos ayudó a identificar los puntos débiles de la plataforma existente y las áreas que necesitaban mejoras.
Hallazgos Clave:
- La navegación era confusa y poco intuitiva.
- Los estudiantes tenían dificultades para encontrar y acceder a los recursos del curso.
- La interfaz carecía de un diseño cohesivo y moderno.
- La tasa de retención de estudiantes era baja debido a la falta de engagement.
2. Definición de Requisitos
Con la información recopilada, definimos los requisitos del proyecto. Nos enfocamos en tres áreas principales:
- Mejorar la Navegación: Simplificar la estructura del sitio y hacerla más intuitiva.
- Aumentar el Engagement: Incorporar elementos interactivos y motivacionales.
- Actualizar el Diseño Visual: Crear una interfaz moderna y cohesiva que refleje la marca de AprendeMax.
3. Prototipos y Wireframes
Desarrollamos wireframes de baja fidelidad para establecer la estructura básica de las páginas clave. Esto nos permitió visualizar el flujo de usuario y hacer ajustes antes de invertir tiempo en el diseño visual.
Wireframes Incluidos:
- Página de inicio
- Panel del estudiante
- Página de recursos del curso
- Página de perfil del estudiante
Una vez aprobados los wireframes, creamos prototipos de alta fidelidad en Figma. Estos prototipos incluían detalles de diseño visual, interacciones y microinteracciones.
4. Diseño Visual
Nuestro equipo de diseño se enfocó en crear una estética moderna y limpia. Elegimos una paleta de colores fresca y profesional, y utilizamos tipografía legible y atractiva. Incorporamos espacios en blanco estratégicos para mejorar la legibilidad y evitar la sobrecarga de información.
Elementos Destacados:
- Navegación Simplificada: Un menú de navegación claro y consistente.
- Elementos Interactivos: Incluimos barras de progreso, badges y notificaciones para motivar a los estudiantes.
- Diseño Responsivo: Aseguramos que la plataforma fuera accesible y usable en dispositivos móviles y de escritorio.
5. Desarrollo e Implementación
Trabajamos en estrecha colaboración con el equipo de desarrollo de BAUER DeutschAkademie para asegurar que el diseño se implementara fielmente. Realizamos pruebas de usuario en cada etapa del desarrollo para identificar y resolver problemas de usabilidad.
Tecnologías Utilizadas:
- HTML5, CSS3, JavaScript
- Framework de diseño responsivo (Bootstrap)
- Integración con el sistema de gestión de aprendizaje (LMS) existente
6. Resultados
El rediseño de la plataforma tuvo un impacto significativo en la experiencia de usuario y los resultados de negocio para BAUER DeutschAkademie.
Métricas Clave:
- Aumento del 35% en la retención de estudiantes: Los estudiantes permanecieron más tiempo en la plataforma y completaron más cursos.
- Mejora del 50% en la navegación: Los estudiantes reportaron una mayor facilidad para encontrar y acceder a los recursos del curso.
- Incremento del 40% en el engagement: La inclusión de elementos interactivos y motivacionales aumentó la participación activa de los estudiantes.
