Homing: Facilitant l'adopció de mascotes

Disseny de la interfície i creació d'un UI Kit per a una plataforma web d'adopcions de mascotes.

Overview

Overview:

Homig és una plataforma web responsive creada per connectar protectores i refugis d'animals amb persones interessades a adoptar una mascota. Dissenyant una experiència que ajudi les persones a trobar la mascota adequada per a elles, tenint en compte factors tant de l'estil de vida de la persona com aspectes de la mascota.

Veure prototip interactiu

Briefing

Es rep un briefing amb els resultats de les fases de recerca, ideació i wireframes de baix nivell i es demana dissenyar la identitat, interfície i la creació d'un UI kit que permeti l'escalabilitat del producte. Així com el prototipatge de les funcionalitats clau i una primera avaluació amb persones usuàries.

Objectius

• Homing busca trobar el millor emparellament entre l'adoptant potencial i la mascota, ajudant les persones a trobar una mascota que s'adapti al seu estil de vida.
• Reduir la taxa d'abandonament d'animals de companyia proporcionant informació i educació als adoptants sobre les seves responsabilitats.
• Simplificar, facilitar i fer còmoda l'experiència dels potencials adoptants a la plataforma.

Reptes

• Trobar la mascota ideal pot ser un procés laboriós per a moltes persones, amb la necessitat de revisar diverses fonts d'informació i prendre decisions importants.
• És crucial que la informació sobre les mascotes disponibles es presenti de manera clara, senzilla i accessible, ja que si no, les persones poden abandonar el procés d'adopció.

Dissenyant la interfície

Creant l'experiència emocional

Partint dels resultats de la recerca i la ideació recollits en el briefing, vaig començar a buscar referents alineats amb els conceptes clau que la solució havia de comunicar. En aquesta primera fase, vaig elaborar diversos moodboards per traduir les emocions a recursos de disseny.

Construcció de la identitat

La paleta de colors sorgeix de l'estudi dels referents i dels moodboards previs, i els conceptes derivats per a la plataforma Homing: esperança, dinamisme, optimisme. Així, els colors principals són saturats i amb contrast, complementats amb el taronja i el rosa pàl·lid per reforçar la sensació de calidesa. La tipografia i la marca van de la mà amb aquest estil, amb línies arrodonides i una estètica neta i minimalista.

Les il·lustracions s'han preferit sobre les fotografies per evitar confusions amb altres continguts. Totes les imatges d'animals en adopció són reals, per fer el disseny 'el més real possible'. El fons està inspirat en el segon moodboard, amb una textura de terratzo que transmet alegria i vitalitat.

La marca

L'elaboració de la marca va junt amb l'estil gràfic. La tipografia escollida reforça la identitat de homing, creant una marca diferenciada del contingut de la pàgina. S'han proposat diverses aplicacions del símbol per garantir un bon contrast i adaptabilitat a diferents pantalles.

Retícules responsive

Les retícules responsive estan pensades perquè el disseny s'adapti de forma proporcional a totes les superfícies. Els tres breakpoints comparteixen 12 columnes, proporcionant versatilitat al disseny.

Disseny de l'UI Kit

El desenvolupament de l'UI Kit va ser una part crucial en la creació d'Homing, assegurant la consistència visual i oferint una experiència coherent en tota la plataforma. Aquesta col·lecció de components i elements de disseny va ser concebuda amb l'objectiu de proporcionar una base sòlida per a la construcció de totes les pantalles i interaccions. A més, la seva estructura modular facilita l'escalabilitat del producte.

Prototipat

Prototype

Per tal de poder testar les solucions de disseny vaig prototipar les principals pantalles del flux de la prova de compatibilitat en els 3 breakpoints, utilitzant els components de l'ui.

Avaluació i primera iteració

Test amb persones usuàries

Després de crear el prototip, vaig dur a terme proves d'usabilitat amb 4 persones, seguint un pla de recerca detallat que establia objectius, KPI i metodologia. El principal objectiu era assegurar que el qüestionari de compatibilitat fluís sense friccions i generés interès a adoptar un animal.

La tasca consistia a completar el qüestionari de compatibilitat i llegir el perfil d'un animal. Aquesta tasca es va fer en els 3 breakpoints per assegurar la consistència entre els dispositius. Durant la tasca, es va encoratjar a les persones usuàries a expressar el seu procés de pensament i manifestar qualsevol confusió o frustració.

Després del test, se'ls va demanar que completessin un breu qüestionari SUS per avaluar la usabilitat global del prototip.

Resultats del test

Totes les persones van completar amb èxit la tasca per a cada dispositiu i es va aconseguir una mitjana de sus per sobre els 80 punts. Durant el test, es van recopilar dades qualitatives sobre l'experiència en general i l'estètica. La idea d'un test d'afinitat per buscar mascota va agradar i també el look and feel general de la web. Hi va haver comentaris molt positius sobre les il·lustracions, la jerarquia i les micro interaccions de les cards, però les persones usuàries van tenir certes dificultats a l'hora de completar el qüestionari i van comentar que la pàgina estava massa saturada de color. En la mateixa línia tampoc va acabar de convèncer la presentació de la fitxa d'adopció, que es va descriure com a freda i massa similar a un e-commerce. També hi va haver problemes amb les micro interaccions dels botons: massa subtils, van passar desapercebudes. Tampoc van agradar les imatges de header a les pàgines de 'antes de adoptar' massa grans per accedir a dos botons.

Implementació de millores

Després de recopilar els comentaris i els resultats del test d'usabilitat, vaig realitzar una sèrie de millores per a la versió final del prototip d'Homing i vaig ajustar els components de l'UI kit.

• Ajustar el disseny dels formularis per millorar la seva llegibilitat i reduir la sensació de càrrega visual.


• Revisar la presentació de la fitxa d'adopció i afegir més imatges de l'animal.


• Redissenyar les micro interaccions dels botons per fer-les més perceptibles.