Resumen del proyecto

El producto

  • Huellitas es un refugio para animales. Los usuarios del sitio web son personas de cualquier edad amantes de los animales, que buscan encontrar a una mascota y compañero que cuidar y que se adecúe a su estilo de vida.
    Queremos crear un producto que muestre las características de los animales de modo fácil, aportando confianza con la información necesaria para ayudar a realizar una adopción adecuada de manera simple, segura y eficaz.
  • Duración:
    Mayo 2023 - Agosto 2023

El problema

Muchos refugios carecen de suficientes recursos y/o tiempo para crear una web donde se muestren de manera simple y organizada la manera de adoptar y la información suficiente sobre los animales en adopción.

El objetivo

Diseñar una web con un flujo de adopciones que permita realizar la adopción de manera segura y con la información necesaria, para que el nuevo miembro de la familia se adapte bien a su nuevo hogar y sea algo permanente.

Mi rol

Diseñadora UX diseñando una web para un refugio de animales, en este caso censtrada en el flujo de adopciones de perros. He creado desde la idea, pasando por la investigación de usuarios, hasta la entrega final.

Responsabilidades

  • Idear el concepto
  • Realización de entrevistas
  • Creación de los esquemas en papel y digitales
  • Creación de prototipos de alta y baja fidelidad
  • Realización de estudios de usabilidad
  • Consideración de la accesibilidad
  • Iteración de diseños

Investigación sobre los usuarios

Para comprender mejor a los usuarios y sus necesidades realicé varias entrevistas para después poder crear mapas de usuario que me ayudaran a implementar los pasos necesarios para realizar una adopción de un perro del refugio.
El público objetivo es muy genérico, consta de personas muy diferentes, de varias edades y estilos de vida, cuyo punto en común es el aprecio por los animales y la preocupación por su bienestar.
Los puntos clave más importantes a tener en cuenta son que la web transmitiera confianza, incluyera toda la información necesaria sobre el animal a adoptar, para dar la seguridad de que es compatible con cada persona o familia, y que el proceso de adopción fuera sencillo e informativo.

Puntos débiles

Confianza

El sitio web debe transmitir confianza, las personas amantes de los animales están preocupadas por su bienestar por lo que desean que todo vaya bien.

Navegación

Es importante que la navegación sea sencilla, puesto que el sitio será utilizado por personas muy diversas.

Información

Es necesario ofrecer una información lo más completa posible sobre los diferentes procesos (adopción, voluntariado, donaciones...) y sobre los animales. También ayuda incluir imágenes de calidad y videos.

Personas

  • Persona: Ana Ruiz
    Ana Ruiz es una estudiante y dependienta amante de los animales con poco tiempo que necesita encontrar un refugio de confianza a través de la web porque necesita asegurarse de que el perro que adopte su hermano será adecuado para él antes de desplazarse al refugio.

Mapas de usuario

  • Persona: Ana Ruiz
    Realizar el recorrido de usuario ayudó a pensar en las necesidades de los usuarios para crear las diferentes secciones y funciones del sitio web, teniendo una idea más clara de los objetivos a cumplir antes de empezar a diseñar.

Comenzar el diseño

Mapa del sitio

  • Una navegación simple e intuitiva es importante para el usuario para encontrar sin problemas lo que busca. Ayuda también para que el usuario descubra todas las opciones que ofrece la web del refugio.

Esquemas de página en papel

  • Dibujar esquemas en papel me ayudó a generar diferentes diseños e ideas de manera rápida para escoger una versión final de las pantallas con las partes que mejor se adpatarían al diseño final.
    Teniendo en cuenta los puntos clave necesarios para los usuarios, escogí un menú de navegación típico más familiar para un público amplio. Era importante también presentar la información deuna manera clara que inspirara confianza y facilitara la búsqueda de animales para adoptar.
    Creé una variación para móviles a partir de la pantalla inicial, ya que un buen porcentaje de los usuarios usarán este tipo de dispositivos para acceder al sitio.

Esquemas de página digitales

  • Pasar de los esquemas de página en papel a los esquemas de página digitales ayudó a pulir algunos aspectos del diseño, se cambió la ubicación de algunos botones y el slide se modificó ligeramente con los puntos en un lateral. Decidí centrarme en el proceso de adopción de un perro.
    Adapté la página de inico para una versión para móviles.

Prototipo de baja fidelidad

  • Tras realizar los esquemas de página digitales, procedí a crear el flujo de usuario conectando los botones y las pantallas en el prototipo de baja fidelidad, para mostrar su funcionamiento a los participantes en el estudio de usabilidad.
  • Prototipo de baja fidelidad en Adobe XD:

Estudio de usabilidad

Descubrimientos

Hice un estudio de usabilidad no moderado, en España, con 5 participantes en remoto, realizando entrevistas de entre 5 y 15 minutos de duración. Las principales conclusiones del estudio fueron:

INICIO

Las imágenes de los animales parecen estar muy juntas, y dan un poco de sensación de agobio.

FORMULARIO DE DATOS

No hay una manera de introducir datos adicionales o una infomración más completa con detalles sobre unos mismo o lo que se espera del animal.

FIN DEL PROCESO DE ADOPCIÓN

En vez de volver al inicio, estaría bien volver a la página de adopciones y ver que el animal a adoptar queda señalado como adoptado.

Perfeccionar el diseño

Maquetas Digitales

  • 1. Basándome en los resultados del estudio de usabilidad, realicé algunos cambios a la hora de crear el diseño para el prototipo de alta fidelidad.
    En la pantalla de inicio a algunos usuarios les parecía que las imágenes circulares de los animales quedaban demasiado cerca unas de otras, por lo que se amplió la separación entre ellas.
    Se añadieron también los botones en la sección de información útil.
  • 2. En la pantalla del formulario de datos se añadió un campo de texto para que los usuarios pudieran insertar información sobre sí mismos, para así asegurarnos de que el animal y su futuro compañero serán compatibles y dar una mayor sensación de confianza al usuario al mostrar nuestro interés..
  • 3. Al finalizar el proceso de adopción, la página a la que se vuelve tras el estudio de usabilidad cambia de la página de inicio a la de adopciones, y se muestra marcado el animal adoptado.

Pantallas

  • Algunas de las pantallas para web del flujo de adopción de perros Huellitas, y el diseño adaptado para móviles de la página de inicio.

Prototipo de alta fidelidad

  • El prototipo de alta fidelidad presenta el flujo de adopciones desde la búsqueda hasta finalizar el proceso de adopción.
  • Prototipo de alta fidelidad en Adobe XD:

Consideraciones de accesibilidad

Contraste

Se usó texto con suficiente contraste para su correcta lectura.

Encabezados

Se usaron encabezados con diferentes tamaños de texto.

Etiquetas

Se utilizaron etiquetas para indicar el propósito de los elementos interactivos.

Avanzar

Conclusiones

Impacto

A los participantes en los estudios de usabilidad les gustó en general el diseño de la página, y les pareció fácil e intuitivo de navegar y con la información muy concisa y clara.

- “Me ha gustado la web, creo que hay protectoras a los que les podría ir bien para mejorar sus webs.” (participante de estudio)

- “Los colores son llamativos, y parece fácil de navegar.” (participante de estudio)

Qué aprendí

He aprendido a prestar más atención a pequeños detalles y a escuchar mejor a los participantes del estudio de usabilidad, prestando una mayor atención a sus gestos y reacciones, para podor aplicar los cambios necesarios en los diseños y ideas de los prototipos.


Próximos pasos

1

Relizar un nuevo estudio de usabilidad para seguir encontrando puntos débiles y mejorar así la experiencia de usuario y el diseño de la página web.

2

Identificar nuevas mejoras y funciones a partir de las respuestas del nuevo estudio de usabilidad.
Añadir funciones en el menú de navegación, como un menú desplegable.
Crear otros apartados y flujos para el sitio web del refugio, como la parte de donaciones o de adopción de gatos y otros animales.

Gracias por ver mi estudio de caso para la app huellitas para el proyecto del Certificado UX de Google :)

Puedes contactar conmigo si tienes algún comentario : Contacto

Linkedin

Instagram

  • Share