Caso 02 · Prácticas de diseño UX
Hackin School: plataforma de formación tecnológica
Diseño de la web y del área de estudiante de una escuela de formación tecnológica, desde la estrategia hasta el prototipo, con requisitos priorizados y una hoja de ruta.
2021 · Prácticas en Interacso · Equipo de 3 diseñadoras UX/UI (mi rol: diseñadora UX/UI) · Figma
4
sprints de Scrum
7
semanas de trabajo
9
requisitos de diseño definidos
4
propuestas de valor
01 · Contexto
Una plataforma para aprender y avanzar en tecnología
Hackin School es una escuela de formación tecnológica que necesitaba una plataforma web donde el alumnado pudiera elegir programas, seguir su progreso y conocer la demanda profesional del sector.
Definimos primero los objetivos de la empresa (fomentar el desarrollo tecnológico, poner en valor el conocimiento adquirido, favorecer el aprendizaje colaborativo y ampliar ámbitos como diseño o marketing) y las necesidades de las personas usuarias (conocimientos actualizados, habilidades específicas, aplicación rápida y conceptos fáciles de asimilar).
02 · Método
Cómo lo organizamos
Scrum en 4 sprints
Descubrimiento e inmersión, investigación, ideación y testeo, y entrega final, repartidos en 7 semanas.
Cinco planos de la experiencia
Estructuramos el diseño con los cinco planos de la experiencia de usuario: estrategia, alcance, estructura, esqueleto y superficie. Cada sprint trabajaba uno o dos planos, de lo más abstracto a lo más concreto.
03 · Research
Del problema a los requisitos
Problema, necesidad, método
En los sprints 0 y 1 conectamos cada problema con una necesidad y con una forma de trabajo. El rápido crecimiento del sector exige actualización, que resolvemos con progresos semanales; asimilar conceptos de forma sencilla exige aprendizaje práctico, que resolvemos con casos reales.
4 propuestas de valor y 9 requisitos
Conocimiento, comunidad, evolución y aprendizaje personalizado. Entre los requisitos: test previo por tipo de usuario, foro interno, notificaciones personalizables, gamificación, feedback sobre las actividades, gestión del estado del curso y navegación con categorías sencillas.
04 · Diseño
De la estructura a la priorización
Estructura y esqueleto
Definimos los puntos de contacto y el recorrido del usuario, las tareas de cada área, la tipología de contenidos y los flujos de navegación. Después concretamos la navegación y los elementos de la interfaz.
Priorización con MoSCoW
Clasificamos las funcionalidades en imprescindibles (selección de programas, área de estudiante, perfil y configuración de cuenta), recomendables (personalización, path de carrera, skills), deseables (test, visita guiada, awards) y descartadas por ahora (avatar, equipo y noticias).
05 · Solución
El prototipo, pantalla a pantalla
Prototipo de baja fidelidad en Figma: un test que recomienda programas, la visualización con filtros por nivel y skills, la creación de un programa propio, el área de estudiante con su progreso por sprint, una visita guiada de bienvenida y el perfil con su recorrido de carrera.
Mejora tu path
Un recorrido de cursos por nivel que muestra al alumnado qué puede estudiar a continuación para avanzar en su carrera.
06 · Cierre
Resultados y aprendizajes
El proyecto terminó con un prototipo de baja fidelidad y una hoja de ruta en tres bloques: definir (skills, método de subida y calificación de actividades, métodos de pago y test), prototipar (área de estudiante, registro, configuración de cuenta, pago y versión móvil) y validar el diseño con test de usuarios y evaluación heurística, incluida la accesibilidad. Esa validación quedó planificada como siguiente paso.
Mi aportación
Trabajé como diseñadora UX/UI en un equipo de tres diseñadoras, junto a mis dos compañeras.
Siguiente caso