Sitio web adaptable de tutoriales de bricolaje

Metodología

El producto

Se trata de un sitio web adaptable de tutoriales de bricolaje para encontrar y visualizar informaciones e instrucciones de bricolaje. El producto debe proponer una experiencia del usuario agradable y simple, incluyendo soluciones a los problemas de los usuarios.

Duración proyecto

Principio del proyecto – Junio 2024

Fin del proyecto - Junio 2024

El problema

Los usuarios necesitan acceder al sitio web adaptable de tutoriales de bricolaje de forma simple, rápida y sencilla porque pierden mucho tiempo buscando o con tutoriales que no corresponden con sus necesidades.

El objetivo

Nuestro sitio web permitirá acceder fácilmente a tutoriales de bricolaje y tener opciones directas para poder guardarlos en un espacio personal. lo que afectara de forma positiva a los usuarios en ganar tiempo.

Mi rol

Diseñador UX – VISUAL

Mi rol cubre todo el processo de diseño, desde la investigacion pasando por los esquemas, wireframes, prototipos…

Responsibilidades

Proyecto realizado de su inicio hacia su final. Investigación de usuarios, creación de esquemas, creación de prototipos, etcétera.

Entender al usuario

Investigación sobre los usuarios: resumen

La investigación de usuarios esta basada en una investigación primaria y cualitativa.

Prevención del sesgo en la recopilación de datos.

Investigación previa :

Permite conocer los hábitos de los usuarios participando, y permite seleccionar 4 usuarios para una encuesta mas detallada.

Investigación primaria :

La información proviene de interacciones directas con usuarios (entrevistas y encuestas).

En mi entorno personal, como en mi entorno de redes sociales.

Investigación cualitativa :

los datos han sido recopilados por observaciones, conversaciones, y cuestionarios.

Este método para comprender las necesidades de los usuarios.

Investigación previa sobre los usuarios

La investigación previa de usuarios me permite conocer los habitos de personas a traves de una encuesta.

→ 6 preguntas a 10 personas / Formulario Google Forms

PREGUNTA 1 / 6

Con qué frecuencia buscan tutoriales de bricolaje en internet ?

PREGUNTA 2 / 6

Qué dispositivo prefieres utilizar para buscar y ver tutoriales de bricolaje ?

PREGUNTA 3 / 6

Qué tipo de tutoriales de bricolaje te interesan mas ?

PREGUNTA 4 / 6

Al buscar tutoriales de bricolaje, qué es lo mas importante para ti ?

PREGUNTA 5 / 6

Con qué problemas te has encontrado al buscar o seguir tutoriales de bricolaje ?

PREGUNTA 6 / 6

Qué tan probable es que recomiendes la empresa, la marca, el producto o el servicio a tus amigos, compañeros de trabajo o familiares ?

Investigación sobre los usuarios: puntos débiles

Los usuarios no tienen mucho tiempo y quieren acceder de una forma simple y directa.

Los usuarios tienen diferentes tipos de dispositivos.

La cualidad de los tutoriales debe adaptarse al material y velocidad de conexión.

La cibla de la APP es amplia de 18 a 65 años.

Pero no se puede descartar los usuarios mas mayores ni los usuarios con discapacidad.

El sitio web se centra en dos recorridos principales: acceso a los tutoriales y añadir a su cuenta personal.

Los usuarios deben tener opciones de volver o anular en cada momento.

Persona : Miguel

Planteamiento del problema :

Juan es una persona que trabaja a tiempo completo por turnos que necesita planear proyectos de bricolaje porque quiere ir paso a paso y tener todas las informaciones relacionadas antes de empezar.

Juan HERRERA

Edad: 40 años
Educación: Bachillerato
Ciudad: Salamanca
Familia: casado, 2 niñosa
Ocupación: Obrero

“El bricolaje es una de mis actividades. Me gusta hacerlo por mí mismo y me ahorro dinero.”

Objetivos

Encontrar informaciones y tutoriales de manera rápida y simple.

Contenido adaptado a mis necesidades y capacidades.

Ir paso a paso.

Frustaciones

Frustado cuando las explicaciones impiden continuar.

Estresado cuando le falta explicaciones en un paso.

Enfadado cuando le falta una herramienta o un producto especifico.

Juan tiene “tiempo libre”, ya que trabaja de turno. Le gusta hacer bricolaje en casa para mejorar su hogar, ahorrar dinero, y porque se siente orgulloso de hacerlo por sí mismo. Ayuda también a su entorno. Le gusta planear su proyecto e ir paso a paso. Necesita encontrar tutoriales de forma simple y rápida con varias informaciones. Valora los videos concisos, cortos y bien explicados.

Persona : Natalia

Planteamiento del problema :

Natalia es una persona que se quiere dedicar al Home Staging que necesita encontrar y visualizar tutoriales de bricolaje de manera más rápida y fácil, acorde con sus necesidades, porque pierde mucho tiempo buscando, y visualizando tutoriales que no corresponden.

Natalia VERDES

Edad: 30 años
Estudios: Universidad
Ciudad: Madrid
Familia: Soltera
Ocupación: En busca

“Me gusta la decoración y el Home Staging.Cambio a menudo la decoración de mi casa.”

Objetivos

Buscar tutoriales e informaciones específicas.

Ganar tiempo buscando.

Encontrar resultados de forma más acorde a lo que busco.

Frustaciones

Decepcionada cuando no encuentra un tutorial específico.

Frustrada cuando tiene que abrir varios enlaces antes de encontrar lo que busca.

Necesita tener más informaciones relacionadas al tutorial en los resultados.

Natalia tiene una pasión para la decoración. Pasa mucho tiempo buscando informaciones y tutoriales, ya que sus necesidades son específicas. Necesita ganar tiempo, buscando de una manera facil y rapida, y espera que los resultados correspondan a sus necesidades y que tengan más detalles. Hace también la decoración en casa de sus amigas y familiares.

Mapa de recorrido del usuario: persona Miguel

El mapa muestra la serie de experiencias que tiene un usuario a medida que va realizando acciones para alcanzar y completar su objetivo.

Las acciones de los usuarios en esta etapa del proceso de diseño tienen que ver menos con la interacción directa con el producto y más con qué hace el usuario a lo largo del día mientras intenta lograr su objetivo.

Acción

Acceder al sitio web

Acceder a mas información

Compartir con otras personas

Añadir

Lista tareas

Acceder al sitio web.

Buscar.

Moverse en las categorias.

Ver un tutorial.

Videos.

Herramientas necesarias.

Personas necesarias para realizar tareas.

Idea de presupuesto.

Compartir rápidamente / whatsapp...

Comentar con otras personas.

Acceso sin cobertura.

Añadir en 1 clic tutoriales.

Planear con posibilidad de calendario.

Añadir tutoriales de otras fuentes.

Posibilidad de anular.

Sentimiento

Estrés por tener cobertura móvil, prefiere versión Desktop.

Poca paciencia para visualizar tutoriales.

Nervioso al buscar.

Quiere toda la información con el tutorial.

No le gusta buscar entre las opciones (populares...).

Feliz cuando encuentra lo que busca.

Molesto cuando no hay cobertura.

Presionado para compartir información.

Satisfecho cuando comparte comentarios.

Preocupado - necesita verificar que está bien añadido.

Miedo a no tener toda la información necesaria.

Oportunidades

Acceso rápido a su lista.

Tutoriales paso a paso con validación de cada paso.

Mejorar la búsqueda por categorías.

Posibilidad de tener toda la información y opciones juntas a los tutoriales.

Posibilidad de compartir rápidamente desde el elemento visto.

Posibilidad de añadir con un clic desde el elemento visto.

Posibilidad de añadir una sesión o una planificación a su calendario.

Comenzar el diseño

Estructura del sitio web

El sitio web adaptable de tutoriales de bricolaje está estructurado de manera simple para que el usuario se focalice a buscar directamente tutoriales, o a navegar por categorias.

Las opciones de buscar estarán presente en los ajustes de los resultados para poder filtrarlos – facilita la simplicidad para el usuario.

Esquemas de página en papel

Tomarse el tiempo para elaborar en papel iteraciones de cada pantalla de la aplicación garantizó que los elementos que llegaron a los esquemas de página digitales fueran los correctos para abordar los puntos débiles del usuario.

Para la pantalla de inicio, prioricé un acceso rápido y simple a los tutoriales para evitar que los usuarios pierdan tiempo.

Una imagen de los esquemas en papel de la página de inicio en versión móvil del sitio web de tutoriales de bricolaje.

Se utilizaron estrellas para marcar los elementos de cada boceto que se usarían en los primeros esquemas de página digitales.

Estrategia de diseño: movil first.

Esquemas de página digitales

A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas en base a los comentarios y a los resultados de la investigación de usuarios.

En esta fase, diseñe varios esquemas para cada pantallas.

Estrategia de móvil first.

Primera página cuando el usuario accede al sitio web. Puede buscar un tutorial o navegar por categorías.

Una imagen del esquema de página de baja fidelidad del sitio web adaptable de tutoriales de bricolaje - versión Desktop.

En el proceso de busca, los resultados dan varias informaciones sobre el contenido.

Una imagen del esquema de página de baja fidelidad del sitio web adaptable de tutoriales de bricolaje - versión Desktop.

Prototipo de baja fidelidad

Initio : el usuario llega a la página de inicio.

El usuario puede buscar, ir por categorías, filtrar los resultados, y consultar los tutoriales.

El usuario puede añadir un tutorial en su espacio personal.

El prototipo muestra el recorrido para acceder a los tutoriales y poder guardarlos.

Captura de pantalla del prototipo con conexiones - versión Desktop.

Estudios de usabilidad: descubrimientos

Procedimiento de los estudios de usabilidad: dos rondas.

La primera ronda ayuda a diseñar los esquemas – paso de wireframes mockups.

La segunda, se centra en un prototipo de alta fidelidad, revelando los aspectos de los mockups que necesitan mejoras.

Descubrimientos de la Ronda 1

Descubrimientos de la Ronda 2

Perfeccionar el diseño

Maquetas

A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas en base a los comentarios y a los resultados de la investigación de usuarios.

En esta fase, diseñe varios esquemas para cada pantallas.

Estrategia de móvil first.

Mejorar el contraste, cambiando los colores naranja y azul.

Ejemplo de los cambios necesarios por el estudio de usabilidad.

Ejemplo en versión Desktop.

Debido al tamaño, todas las pantallas no están presente en esta presentación.

Ejemplo de un tutorial paso a paso de la versión Desktop.

Alta fidelidad prototipo

Initio : el usuario llega a la página de inicio.

El usuario puede buscar, ir por categorías, filtrar los resultados, y consultar los tutoriales.

El usuario puede añadir un tutorial en su espacio personal.

El prototipo muestra el recorrido para acceder a los tutoriales y poder guardarlos.

Condiciones de accesibilidad

Varias evoluciones a lo largo de los diseños.

Por ejemplo, en la version final, los colores azul y naranja permiten alcanzar contrastes superiores a 5 (color de texto sobre los colores azul y naranja).

Para no perder el usuario en su recorrido, hay dos tipos de botones:

Los del processo de acceso (mismo tamaño rectangular).

Los otros – categorias...

Todos son de color azul o directamente en las imagenes.

Los elementos estan grupados visualmente.

El texto combina dos tipografías con tamaños diferente según la importancia del contenido (titulo…).

Avanzar

Conclusiones

Cuando el usuario visita el sitio web, puede acceder fácilmente a los tutoriales de bricolaje.

Tiene 3 formas de hacerlo: directamente en las categorías populares o destacadas, mediante el buscador, o por categorías.

Tiene acceso a los ajustes para filtrar los resultados, y puede añadir los tutoriales en su espacio personal.

Tiene la oportunidad en cada paso de su recorrido de poder retroceder al paso anterior o de anular.

Los usuarios necesitan tener puntos de referencia simples y llamativos para poder acceder o retroceder a lo largo de su recorrido.

Varias opciones no se han desarrollado para mantener la simplicidad y rapidez del proceso.

Mantener un contacto con usuarios y profesionales permite mejorar el producto a lo largo de su desarrollo.

Próximos pasos

Evaluar la opción de poder modificar la manera de presentar los tutoriales, por lista, carteles, detallado...

Permite a los usuarios que no quieren ver las informaciones, o a los que ya las conocen, acceder mas fácilmente et rápidamente a los tutoriales.

Evaluar la posibilidad de añadir videos y de poder acceder de manera no conectada a su espacio personal en versión móvil.

Añadir un seguimiento paso a paso para ver los tutoriales por partes a menudo que se realiza la tarea.

Mejorar la manera de compartir los tutoriales, y poder añadir tutoriales de otros sitios web para tenerlos todos en un sitio unico.

¡ Pongámonos en contacto !

Les agradezco el tiempo dedicado a consultar este proyecto.

Muchas gracias.

Les invitato a consultar mi perfil Linkeldin

Les invito a envíarme un mensaje