Contexto

Gracias a internet, muchas personas tienen acceso a la educación a pesar de no tener la posibilidad de escolarizarse, plataformas como YouTube, blogs, etc… ayudan a crear aprendizaje, sin embargo la dificultad de encontrar información precisa a lo que buscamos o una guía de principio a fin sobre un tema general como arquitectura, mecánica, química entre muchos, donde se necesita lectura, video, imágenes, todo esto se vuelve difícil y la persona al buscar se bloquea gastando mucho tiempo, uniendo información de diferentes plataformas, por eso nació Free Learn, todo el aprendizaje en una sola red social.

Todo en uno

Eso es lo que Free Learn pretende ofrecer. Un espacio para que los estudiantes compartan sus guías de estudio, información relacionada con el aprendizaje, y donde los profesores puedan compartir diversos tipos de información, texto, imágenes, videos, transmisiones en vivo, encuestas, grupos de aprendizaje y un filtro de aprendizaje personalizado, esto beneficia a una industria muy importante como la educación y algo rezagado en el presente.

Investigación

¿Cuál es el sentido de explorar esta solución? ¿Qué interacciones del usuario estamos hablando? Veamos cómo los comportamientos y patrones habituales de los usuarios pueden ayudar a aplicar estos conceptos de diseño.

MÉTODO

• ENTREVISTAS DE USUARIO
• INVESTIGACIÓN DE CAMPO

Objetivos

Entrevistamos a 10 personas con preguntas de usabilidad, utilizando el marco de empatía del usuario pudimos entender sus dificultades, el flujo común para aprender y el flujo para compartir información con su equipo.

Resultado

Las personas que usan YouTube para aprender, también usan Office Word para autoevaluarse, las personas que aprenden en línea comparten su aprendizaje en grupos de WhatsApp.

Creación de Personas

Mapa de Viaje del Usuario

Para empatizar con los usuarios, también creamos mapas de empatía y un mapa de viaje del usuario para profundizar en cada etapa por la que pasan nuestras personas al evaluar y encontrar la información que necesitan.

Flujo de Usuario

Decidimos invertir nuestro esfuerzo principalmente en el flujo de usuario más utilizado, descubrimos que es encontrar información, basándonos en el descubrimiento a través del flujo de usuario pudimos ver cómo se vinculan las vistas de esta manera.

Diseño de Arquitectura

El diseño de la arquitectura de información fue fácil de crear porque conocíamos el flujo del usuario, también fue accesible porque desde el principio pensamos en un menú hamburguesa o menú lateral.

Crazy Eight

Teniendo en cuenta la Arquitectura de Información comenzamos a organizar los elementos correspondientes en sus vistas, expandimos nuestro rango de posibilidades con el ejercicio Crazy Eight y finalmente refinamos basándonos en los parámetros de experiencia de usuario (Accesibilidad, Simplicidad, Intuitivo e Inclusividad).

Wireframes

Teniendo los wireframes listos en papel, comenzamos a digitalizarlos, dando a cada elemento una coordenada en pantalla según su jerarquía y peso, para que el usuario pueda ser guiado paso a paso a través del diseño para completar el objetivo principal.

Prototipo de Baja Fidelidad

Una vez creados los wireframes digitales, comenzamos a prototipar, esto nos ayudó a saber si nuestra lógica de enlace interno funcionaba bien, crear más accesos al mismo lugar y descartar lo que no funcionaba.

Plan de Pruebas de Usabilidad

Queríamos saber cómo navega el usuario entre las vistas, cuánto tiempo tarda en acceder a la información, ver sus reacciones al ejecutar una tarea, todo esto se hizo durante el proceso del Plan de Pruebas, los participantes elegidos fueron 6 personas de diferentes edades, profesiones y habilidades.

Durante la entrevista aprendimos que las preguntas que el usuario no pudo responder podrían contener información de donde se menciona en la tarjeta para ser más accesible y consecuentemente ahorrar más tiempo de interacción. Interpretamos el Wireframe y resolvimos el aviso.

📝 Encuesta de estudio de usabilidad de diseño

Antecedentes y experiencia:

• ¿Podrías presentarte brevemente y contarme sobre tu experiencia con la tecnología y las aplicaciones móviles?
• ¿Con qué frecuencia usas aplicaciones de cursos en línea y redes sociales?
• ¿Has usado previamente aplicaciones que combinen ambas funcionalidades?

Experiencia con la aplicación:

• ¿Podrías presentarte brevemente y contarme sobre tu experiencia con la aplicación?
• ¿Podrías describir tu experiencia general usando la app hasta ahora?
• ¿Qué aspectos de la aplicación has encontrado más fáciles de usar?
• ¿Has encontrado alguna dificultad o problema usando la aplicación? Si es así, ¿podrías describirlos en detalle?
• ¿Cómo calificarías la facilidad de uso general de la app en una escala del 1 al 5 (1 siendo muy difícil y 5 siendo muy fácil)?
• ¿Has usado la aplicación para buscar y tomar cursos en línea?
• ¿Podrías describir el proceso de buscar un curso específico? ¿Te resultó fácil encontrar lo que buscabas?
• ¿Cómo calificarías la facilidad de uso de la sección de cursos en línea en una escala del 1 al 5?
• ¿Has completado alguna lección o actividad dentro de un curso? ¿Podrías describir tu experiencia en ese proceso?
• ¿Cómo calificarías la facilidad de uso de la sección de lecciones y actividades en una escala del 1 al 5?
• ¿Has interactuado con el profesor o compañero en algún curso? ¿Podrías describir tu experiencia en ese caso?
• ¿Qué aspectos de la sección de cursos en línea podrías mejorar?

Mockups

Una vez afinados los Wireframes, nos dedicamos a maquetar todos los elementos agregando colores, pesos, sombras, tipografías, etc.

Sistema de Diseño

Tecnológico y Futurista

La combinación de azul y turquesa bajo un fondo negro para dar contraste a algo nuevo y futurista, la tipografía Roboto para dar un tono elegante y tecnológico, los tamaños en botones y el contraste en ellos para que las personas con visión cromática puedan diferenciarlo fácilmente.

Conclusión

El producto es Free Learn, una red social para que todos aprendan fácil y gratis, todavía estamos trabajando en las vistas y componentes para mostrar el producto final.