Web de tutorías online
Magister Online es una web de tutorías online, diseñada para facilitar la búsqueda y reserva de tutorías para los usuarios.
El Problema: Las personas que buscan tutorías online a menudo no disponen de mucho tiempo y necesitan encontrar profesionales de confianza.
La Meta: Diseñar una web de tutorías online que facilite a los usuarios reservar una clase y encontrar un tutor que se ajuste a sus necesidades.
Mi Rol: Diseñador de UX encargado de diseñar las pantallas del flujo principal de usuarios de la web adaptable de tutorías online de principio a fin.
Responsabilidades: Realizar entrevistas, elaborar esquemas en papel y digital, prototipos de baja y alta fidelidad, llevar a cabo estudios de usabilidad, facilitar la accesibilidad e iterar en los diseños.
Duración: 1 mes.
Comprendiendo al Usuario
Inicié mi investigación entrevistando a los usuarios, para realizar mapas de empatía que me permitieran comprender mejor sus necesidades. De los resultados identifiqué un grupo de usuarios estudiantes de bachillerato y primeros cursos universitarios que buscaban apoyo en su estudio. Como principales problemas observé la importancia de la gestión de su tiempo y la necesidad de encontrar tutores profesionales y de confianza.
Persona: Alejandra
Edad: 18
Educación: Universitaria
Ciudad: Cádiz
Familia: Padres y hermana
Ocupación: Estudiante
«Si me esfuerzo ahora, podré ayudar a las personas a mi alrededor»
METAS
- Poder encontrar un tutor con facilidad.
- Ser capaz de reservar o cancelar tutorías con antelación.
- Conocer a los tutores antes de iniciar las sesiones.
FRUSTRACIONES
- Me cuesta encontrar tutores para las asignaturas que necesito.
- No puedo asistir a tutorías con regularidad.
- Cunado busco a un tutor no se cual se ajusta mejor a mis necesidades.
Alejandra es una estudiante que hace poco ha empezado sus estudios universitarios. Está encontrando dificultades con algunas de sus nuevas asignaturas. Además, trabaja los fines de semana para ahorrar dinero. Como no cuenta con tanto tiempo para estudiar, le gustaría contar con un tutor personal que se ajuste a sus horarios y guíe su estudio para tener un mejor rendimiento.
Mapa de recorrido del usuario
Para facilitar la imagen de cómo un usuario interactuaría con la web, me basé en Alejandra ante la tarea de reservar una tutoría online.
Comenzando el Diseño
Mapa del sitio
A la hora de diseñar el principal flujo de usuarios de la web, me centré en facilitar la búsqueda y reserva de una sesión de tutoría con un profesional que se ajustase a los usuarios.
Esquemas en papel
Elaboré unos primeros esquemas en papel para poder plantear rápidamente diseños antes de realizarlo en formato digital. Opté por un diseño que facilitara el filtrado y búsqueda de información sobre los tutores disponibles.
Esquemas en papel: pantallas adaptables
También trabajé en versiones de pantalla alternativas para los usuarios que accedieran desde distintos dispositivos.
Esquemas Digitales
Al pasar los esquemas al formato digital se hizo más fácil visualizar las necesidades de los usuarios.
Tuve presente las dificultades para acceder a la información necesaria sobre las clases y los tutores.
Esquemas Digitales: pantallas adaptables
Prototipo de Baja Fidelidad
Con todos los esquemas de página elaborados y el feedback de los usuarios, creé un prototipo de baja fidelidad. El flujo principal que diseñé fue la navegación desde el inicio de la web hasta finalizar la reserva de una sesión de tutoría.
Estudio de Usabilidad
Parámetros:
- Tipo de estudio: No moderado.
- Lugar: España, remoto.
- Nº de participantes: 5.
- Duración: 10-15 minutos por prueba.
Hallazgos:
- Tutores: Los usuarios quieren ver con simpleza la información relevante de los tutores.
- Recordatorio: Los usuarios prefieren ver una confirmación y recordatorio de su reserva.
- Disponibilidad: Los usuarios necesitan ver con facilidad la días disponibles de los tutores.
Refinando los Diseños
Maquetas
En base al feedback obtenido en los estudios, se opté por utilizar colores y un menú de navegación en el calendario que facilite la visualización y selección de días disponibles para la sesión de tutoría.
Para facilitar el recuerdo de la cita y los datos de la reserva de la sesión, añadí un mensaje resumiendo los datos de la reserva, destacando la fecha y el nombre del tutor.
Maquetas: tamaño de pantalla original
Maquetas: pantallas adaptables
Prototipo de Alta Fidelidad
El prototipo de alta fidelidad final recogió las modificaciones en base a las necesidades que mostraron los usuarios en el estudio de usabilidad, teniendo presente la facilidad de acceso a la información de los tutores y la reserva.
Consideraciones de Accesibilidad
- Usar una tipografía y fuente de letras que sea de fácil lectura por los usuarios.
- Aumentar el contraste de color de los botones para facilitar la legibilidad de los mismos en base a los parámetros de las WCAG.
- Utilizar encabezados de diferente tamaño para tener una mayor claridad de la jerarquía visual.
Conclusiones
Impacto:
Los usuarios comentaron que les resultaba sencillo navegar por la web. Además, comentaron que las opciones que se mostraban para filtrar a los posibles tutores les facilitaba encontrar a uno que se ajustase a sus necesidades.
Qué he aprendido:
Una de las cosas aprendidas en este proyecto es que no debemos dar por sentado nada, incluso los elementos que pueden considerarse más comunes se pueden pasar por alto, por ello es importante prestar atención e iterar en los diseños de forma constante, teniendo en cuenta las necesidades de los usuarios.
Próximos Pasos
- Realizar un nuevo estudio de usabilidad tras las últimas iteraciones para comprobar si se ha respondido adecuadamente a las necesidades de los usuarios.
- Indagar a través de la investigación en aspectos de las necesidades de los usuarios que se hayan pasado por alto en los estudios anteriores.
¡Gracias por vuestra atención durante la presentación de este diseño!
