Homy App
UX / UI Case Study
¿A cuántos de vosotros, aquellos que estáis empezando a leer este artículo, se os parte el corazón cuando veis un perro o un gato solo por la calle, sin saber si tiene dueño o no, se ha escapado o lo han abandonado?
Yo soy una de esas personas, incapaz de moverme del sitio, cuando una de estas situaciones ocurre en el mismo sitio donde me encuentro en ese momento.
Es algo que me inquieta, me entristece y creo que puede tener una solución a través del concienciamiento y las herramientas adecuadas para evitar y gestionar el abandono animal.
1. El Problema
En la actualidad, España es uno de los países que se encuentra a la cabeza en abandono animal, y lo peor de todo es que no mejora la cosa, sino que durante este último año 2019 las tasas de abandono han incrementado, a pesar del “endurecimiento” de las penas.
Motivos
Las razones principales por las cuales se abandona un animal de compañía en España son:
En fin, mil excusas que no responden más que a una realidad que no solo ocurre cuando alguien se va de vacaciones, sino una constante durante todo el año, por falta de concienciación, responsabilidad y entendimiento de lo que supone tener un animal, una vida, a tu cargo. La personas no se informan de lo que es tener una mascota, por lo que muchas veces no pueden cubrir los gastos veterinarios y no se plantean que hay que estar ahí, a su lado, cuando vienen los problemas no sólo cuando juegas a tirarle la pelota.
El abandono animal es una triste realidad que nos rodea, ya que en España cada 3 minutos se abandona un animal de compañía.
¡Tenemos que hacer algo!
2. Objetivos
Antes de comenzar a desarrollar el proyecto quisimos fijar una serie de objetivos que queríamos conseguir, para tenerlos presentes durante todo el proceso:
- Stop al abandono, a través de una labor de concienciación de lo que supone tener una mascota.
- Fomentar la adopción, es decir, conseguir conectar a las personas que desean tener una mascota con aquellos animales que necesitan un hogar.
- Facilitar un lugar donde encontrar los cuidados esenciales y los productos idóneos para nuestra mascota.
3. Research & AI (arquitectura de la información)
A la hora de comenzar el proyecto, seguimos una serie de metodologías de investigación que nos ayudaron a sumergirnos por completo en la temática y problemática a la que nos enfrentábamos. Gracias al uso de este tipo de herramientas podemos ahorrar tiempo y dinero, ya que nos permiten validar o no ideas antes que sean implementadas.
Benchmark
Lo primero que se realizó fue un análisis de la competencia directa e indirecta para poder entender el entorno en el que nos estábamos adentrando, con el objetivo de buscar buenas y malas prácticas dentro del sector. Gracias a esta herramienta podemos detectar pain points en otros productos y patrones, que en el futuro nos ayudaran a construir nuestro propio producto.
Se analizaron distintos perfiles de protectoras y asociaciones como El Refugio, Animales sin hogar,…, apps para animales como Dog Walk, TwinDog, Dogo app, Rover, … y se buscaron otro tipo de productos que estuvieran destinados a la adopción como Mascomad y Adopt me, entre otros.
Encuestas
A través de las encuestas podemos obtener datos cuantitativos acerca de lo que piensan los usuarios sobre el tema que estamos tratando.
Se lanzó una encuesta por distintos canales de comunicación digitales tales como Facebook, Twitter, Whatsapp y LinkeIn, obteniendo como resultado un total de 70 respuestas.
Gracias a las respuestas obtenidas se pudieron extraer las siguientes conclusiones:
Es curioso el contraste que se obtiene al analizar los datos, ya que un 95% de las personas prefieren adoptar en vez de comprar, pero en cambio el 50% de los usuarios no han adoptado a su mascota actual. Esta discordancia nos llamó la atención.
User Persona
Gracias a la elaboración de User Personas podemos crear arquetipos, que representan a los distintos grupos de los perfiles de los usuarios potenciales de nuestro producto. Estos nos permiten validar decisiones según su pensamiento.
En este caso decidimos crear dos, Tati, una mujer apasionada por los animales que vive por y para ellos y que cuenta con mucha experiencia en lo referente a su cuidado. Por otro lado estaría Manu, un chico joven que acaba de tener una pérdida de un familiar, que se siente bastante solo y que le gustan los animales pero en este momento no tiene mascota.
Jobs to be Done (JTBD)
A través de los JTBD podemos descubrir las tareas que el usuario necesita que nuestro producto realice por él. De esta forma nosotros conseguimos entender qué necesita.
A continuación podemos ver algunos ejemplos que salieron durante la realización de este ejercicio:
JTBD: Yo como usuario Cuando quiero adoptar un animal, quiero una herramienta que me permita conocer las condiciones necesarias, y así puedo agilizar el trámite.
Funcionalidad: Herramienta donde conocer los trámites y condiciones necesarias para la adopción de un animal.
JTBD: Yo como protectora de animales Cuando quiero anunciar a los animales que tengo a mi cargo y cuidado, quiero una herramienta que me permita darlos a conocer, y así puedo agilizar las adopciones y encontrarles un hogar antes.
Funcionalidad: una plataforma que permita a las proyectoras gestionar los animales que tienen a su cargo y darlos a conocer para que puedan ser adoptados (hacer su trabajo más fácil).
A través de esta herramienta podemos saber qué funcionalidades son las que más pueden facilitar la vida a nuestro User Persona y satisfacer sus necesidades dentro de nuestro producto.
Affinity Diagram
Para recopilar toda la información obtenida durante la fase de Research, decidimos hacer un Diagrama de Afinidad, gracias al cual podemos organizar todos los datos, ideas y percepciones obtenidas durante la investigación, agrupándolas por categorías o similitudes.
Brand Positioning
Para conocer dónde queríamos posicionar nuestro producto en relación con la competencia, realizamos un Mapa de posicionamiento de marca, situando a la competencia directa e indirecta con respecto a cuatro valores: protectoras vs usuarios y cuidados vs adopciones.
Gracias a la realización de este ejercicio pudimos entender que nuestro principal objetivo era crear un producto destinado a ayudar a solucionar el abandono animal, pero desde el punto de vista de los usuarios que quieran adoptar una mascota. Además era importante, apoyándonos en los resultados obtenidos durante el Research, tener en cuenta los cuidados destinados a las mascotas, ya que son un aspecto fundamental de su bienestar y de su vida.
Mindmap
Un mapa mental nos ayuda a desarrollar una idea de manera visual para entender los distintos conceptos que la rodean.
En este caso decidimos realizarlo entorno a la idea de “¿cómo ayudar a los animales?” . Esto nos sirvió para comprender que la ayuda tenía que venir de todos lados tanto de organismos y el estado, como de las proyectoras, de los veterinarios y sobre todo de los ciudadanos.
Sitemap
Se trabajó en un Sitemap, lo cual nos permitió poder organizar y estructurar toda la información que debía tener nuestro producto. Para ello tuvimos en cuenta los objetivos que nos habíamos marcado previamente (stop abandono, fomentar adopción, acceso a cuidados y productos).
Gracias a este ejercicio pudimos diferenciar entre navegación primaria (menú principal: adopciones, mascotas, perfil, …) y secundaria (menú secundario: condiciones, notificaciones, log in / log out, …).
4.Producto Mínimo Viable (PMV)
Una app, ¿por qué?
Se ha considerado que la mejor opción a la hora de desarrollar este producto es hacerlo mediante una app, ya que basándonos en los resultados obtenidos durante el Research, se vio que el dispositivo móvil es el más usado por los usuarios, nos permite geolocalización y portabilidad. Además, gracias a una app podremos conseguir fidelizar más y más usuarios.
User flow
El User Flow nos dice cuál va a ser el camino que va a seguir nuestro User Persona, Manu, dentro de nuestro producto para poder conseguir la tarea que se ha propuesto, en este caso adoptar un perro. De esta forma podemos identificar los pain points, es decir, los problemas que se puede encontrar a lo largo de su recorrido y poder solucionarlos rápidamente.
En este caso hemos tomado como guía el Happy path, en el que podemos ver cómo Manu accede a la app por primera vez y tras un onboarding se decide a buscar un perro para adoptar.
Prototipo Low-Fi
Cuando estuvo definido el User Flow, siguiendo metodologías Lean, se realizaron en papel los primeros Wireframes, para ahorrar tiempo y por lo tanto dinero, ya que el papel nos permite testar, iterar y hacer cambios de forma rápida aumentando la productividad de nuestro equipo y trabajo.
Conclusiones test
Una vez testado nuestro prototipo Low-Fi pudimos sacar las primeras conclusiones de nuestro producto, entendiendo qué podía fallar y qué debíamos cambiar para implementar en el prototipo Hi-Fi.
Las conclusiones obtenidas fueron:
- Añadir el término “ppp”, que significa “perros potencialmente peligrosos”, ya que en muchas ocasiones son abandonados por su condición y el seguro que exige el estado que se debe tener.
- Invertir el orden del formulario, ya que primero se pedían los datos de la mascota y después los del adoptante, por lo que era más coherente cambiar el orden. Además se vio necesario añadir los datos de la vivienda con el objeto de ayudar en el papeleo a las protectoras y asociaciones para agilizar los trámites.
- Añadir los costes estimados de la adopción al final del proceso, porque mucha gente piensa que ya por adoptar estas haciendo un bien a la comunidad y es gratis, pero en realidad tiene un coste por las vacunas, mantenimiento y supervivencia de las protectoras.
- Cambiar el copy en la sección de Mascotas, se optó por cambiar el “Añadir mascota” por “ Añadir otra mascota” ya que en los test se vio que causaba confusión entre los usuarios.
5. Brand
Al ser un producto digital nuevo necesitaba de una identidad de marca que lo diferenciase de la competencia y lo posicionarse, además de servir como guía para la parte visual del proyecto.
El branding debía representar el principal objetivo en que se apoya este proyecto, que es “fomentar la adopción” por lo que debía verse reflejado.
Logotipo
De esta forma nació Homy, cuyo nombre viene de dos palabras en inglés que son Home, hogar y Homie, Colega.
En el símbolo del logotipo se quiso hacer un juego visual de un perrito en cuyo interior se encuentra la silueta de una casa, un hogar.
Paleta de colores
La gama cromática que se escogió para la identidad de marca surge de un abanico de tonos amarillos y mostazas contrastados con negros transmitiendo vitalidad y calor.
Esencias visuales
Definimos también las esencias visuales que después constituirían toda la identidad del producto:
- Ilustraciones muy friendly, con un estilo cerrado en las formas y masas a color.
- Se determinó el uso del color para los elementos de comunicación que requieran más fuerza.
- Intentamos crear un sistema modular para poder hacer muchas piezas y composiciones si hay la necesidad.
- Elegimos una tipografía, la Nunito con aire desenfadado y cercano, con formas redondeadas como el resto de elementos visuales (cards, ilustraciones, …).
Tipología de módulos
Se fijó cómo debían ser los distintos módulos según lo que querían comunicar y a qué tipo de información correspondían. Esto facilita la jerarquización de la información, ya que según el registro visual del módulo, el usuario sabe dónde está, qué está leyendo o viendo y cuál puede ser su siguiente acción o camino según el módulo que seleccione.
Style Guide
Antes de comenzar a componer el prototipo Hi-Fi, se definieron cómo serían los UI elements para conseguir una coherencia tanto en contenido como visualmente de todos los elementos que podrían aparecer en la app. Esto nos sirve para crear una norma y estilo en la interfaz de nuestro producto.
6. Solución (Prototipo Hi-Fi)
Todas las conclusiones obtenidas durante el research y los test fueron implementadas, teniendo como resultado final este prototipo de alta fidelidad de la app.
A lo largo de la composición de toda la interfaz nos hemos guiado por un grid de múltiplos de 8, para guardar coherencia de tamaños, espacios y ritmos, además de facilitar el trabajo posterior a desarrollo.
Bienvenidos a Homy
Durante el prototipo vamos a poder ver cómo Manu, nuestro User Persona, quiere adoptar una mascota y todo lo necesario para poder conseguirlo.
En esta parte del prototipo vamos a poder ver:
- Como al acceder a la app desde nuestro teléfono lo primero que aparece es la animación de la splash page y cómo transicionaría a la home.
- Después partiendo desde la splash page accederíamos al onboarding, donde podríamos ver un resumen de lo que puedes hacer gracias a Homy.
- Una vez en la home tendríamos acceso al contenido del menú hamburguesa, donde podríamos encontrar las notificaciones, las condiciones de las adopciones, mis pedidos, el contacto y las preguntas frecuentes, además del log in y la política de privacidad.
- En la Home nos encontraríamos un sistema modular para distribuir todos los apartados.
¿Adoptamos una mascota?
Durante este tramo del prototipo el objetivo principal va a ser adoptar una mascota:
- En la Home podemos ver, como comentábamos anteriormente, una serie de módulos que nos sirven para dividir las secciones de perros, gatos y loros que están en adopción y CTAs (call to action) de las secciones de cuidados y productos, para conseguir un flujo continuo por la app.
- Pinchando en perros accederíamos a una página de listado de los distintos perros que se encuentran en ese momento en adopción.
- Seleccionando uno de los perros del listado, nos aparecería un backdrop con su ficha, para seguir teniendo a mano el listado y poder acceder al mismo con facilidad.
- En la ficha de la mascota podemos encontrar su imagen, la opción de favoritos y compartir. Además de un poco de su historia y ficha clínica, siempre con el botón de adoptar sticky para que nos acompañe en la navegación.
- A continuación podemos ver cómo sería la animación del backdrop de la ficha de la mascota:
Una vez hayamos decidido qué mascota queremos adoptar pulsaríamos en el botón de “Adoptar” y comenzaríamos un proceso a través de un formulario:
- En primer lugar, aparecería una pantalla para concienciar a las personas o futuros adoptantes de lo que es adoptar y se les daría la opción, por si tienen dudas, de acceder a un enlace en el que se explican las condiciones de adopción.
- Pulsando en entendido pasaríamos a una pantalla en la que se nos explica por qué nos van a pedir una serie de datos. Estos son para poder transmitírselos a la protectora o asociación, de la que depende la mascota que queremos adoptar, para agilizar el trámite y ver si es apta nuestra candidatura a la adopción.
- Una vez comenzado el proceso, entraríamos en un formulario donde se piden los datos del adoptante, se confirman los datos del adoptado y se piden una serie de datos de la vivienda del adoptante.
- Para terminar este formulario se necesitaría un registro para poder seguir todo el proceso de adopción.
- Una vez realizado el registro, aparecería una pantalla en la que se explica que la adopción tiene un coste y por qué lo tiene.
- Por último, ya con todo el proceso realizado llegaríamos a una pantalla en la que se nos da la enhorabuena y nos explican que nuestra solicitud está en trámite y que pronto una persona de la protectora o asociación se pondrá en contacto con nosotros.
Como es un proceso que se desarrolla en un formulario que resulta un poco largo, lo ideal en el futuro sería hacer un test AB con dos tipos de formularios para ver en cual hay más conversión e ir refinando más y más el producto final.
Mis mascotas & perfil
Una vez terminado el proceso de adopción aparecería una notificación en Mis Mascotas, donde se nos informa que nuestra solicitud se está tramitando y en caso de que tuviéramos más mascotas, podríamos añadir su perfil a la app, pero no podríamos comenzar más procesos de adopción, ya que la app solo permite tener una adopción en trámite.
Por otro lado, pulsando en Perfil en la tab bar, accederíamos a nuestro perfil que se ha completado con los datos facilitados durante el formulario. Dentro de este encontraríamos los favoritos que hayamos guardado.
Cuidados & productos
En la parte de Cuidados podemos encontrar una serie de experiencias para poder hacer la vida de nuestra mascota más feliz y fácil, además de darnos facilidades a nosotros a la hora de criarlos.
En la sección de Productos encontraríamos un pequeño e-comerce, donde encontrar los mejores utensilios, alimentos y demás objetos para nuestras mascotas.
7. Next Steps
Los próximos pasos a desarrollar serían:
- Integrar dentro de la app más razas y tipos de animales abandonados.
- Incluir notificaciones de pérdidas y robos de mascotas (mediante geologalización).
- Conseguir patrocinadores y colaboradores que quieran contribuir a la “Causa Homy” como parte de su RSC (Responsabilidad Social Corporativa).
- Creación de un blog para concienciar a la sociedad
- Desarrollo de una Landing Page que sirva como página de venta de una plataforma para que las protectoras y asociaciones puedan gestionar todo lo referente su logística. Esto nos serviría para obtener todos los datos de los animales que tienen y vincularlos con la base de datos de la app para que puedan ser adoptados.
8. Aprendizaje & Agradecimientos
En este proyecto he comprendido la inmensa tarea que supone llevar a cabo una app, la cantidad de cosas, flujos y opciones que hay que pensar para que el usuario consiga satisfacer sus necesidades con nuestro producto.
A través de la realización de este proyecto he entendido que hay una infinidad de buenas causas en las que podemos colaborar con nuestra profesión, y que es bueno poder aportar nuestro granito de arena, ojalá algún día Homy sea una realidad y podamos entre todos buscar hogar a aquellos que no lo tienen.
Quería dar las gracias a Samuel Hermoso y Óscar SP por todo lo que he aprendido de ellos a lo largo de mi trayectoria por Ironhack Madrid. También quería dar las gracias a Sheila 🐼, Ines Carballido y Juan Cortazar por todo lo que me han aportado y ayudado en estos meses. Quiero agradecer a Fernando Báez su apoyo incondicional, sin él nada hubiera sido posible.
Por último, quería daros las gracias a todos los que habéis llegado a leer este artículo hasta el final. Si tenéis alguna duda o comentario, no dudéis en decírmelo.
¡Vamos de camino al Hackshow con Homy! Deseadme suerte 😊
Espero que os haya gustado y si ha sido así espero vuestros Clap, Clap, Clap!!
