UX / UI Design para SOS GALGOS
Uno de los proyectos que tuvimos que desarrollar durante el Bootcamp de Ironhack fue elegir una ONG o web de carácter oficial e intentar mejorarla. Estudiar cómo estaba hecha, analizarla, empatizar con sus usuarios y pensar en optimizarla para que la acción principal fuese lo más ágil, fácil e intuitiva posible.
Yo elegí la Asociación SOS Galgos que, como bien dice, es de Defensa de los Derechos de los Galgos y de Búsqueda de Casas de Acogida y Adopción para los perretes.
No os voy a detallar tooodo el proceso, pero sí os dejo ejercicios/herramientas que me ayudaron a ir afinando cada vez más hasta llegar al resultado final.
Cualquier duda o comentario, serán super bien recibidos :)
- ANÁLISIS
Lo primero: analizar de dónde partimos. En este caso la web estaba en realidad bien. La estética se nota que está cuidada y a nivel de contenido está también bastante bien estructurado. Pero siempre se puede mejorar y ¡ahí entro yo en juego!
Por si no conocéis la problemática de los Galgos, es básicamente que después de la temporada de caza, estos animales son ahorcados, abandonados, ahogados.. porque ya han cumplido su “misión”.
La página web es esta:
Además de esto, siempre hay que hacer un Research de qué están haciendo otras Asociaciones, cómo está el panorama en general en ese sector.
Mi objetivo estaba muy claro: intentar que el proceso de adopción online fuese lo más fácil posible, sin olvidar que para la Asociación es super importante a quién le dan un perro en adopción. No cualquiera vale.
Como primera toma de contacto, lo que hago es un Lean Survey Canvas, para valorar qué información tengo y qué necesito saber. Es como una especie de guioncito para facilitar poner en orden la información y hacerse preguntas que luego ayudarán a elaborar las encuestas y entrevistas que hagamos.
Con esto, sacamos ya las preguntas para nuestra encuestas y entrevistas. La encuesta la tuve que repetir dos veces, porque es lo primero que la lancé e hice preguntas muy genéricas sobre la adopción. Si hubiese hecho antes las entrevistas, esa info más bien cualitativa la habría conseguido antes y me la hubiera ahorrado. Por ahora yo estoy descubriendo que saco más partido haciendo antes las entrevistas que las encuestas.
Las entrevistas las hice a 5 personas interesadas en acoger o adoptar en un futuro o que ya lo habían hecho. De todas formas eran perfiles dispares, ya que aquí lo que interesa es buscar la variedad y diversidad.
Con esto más claro, lanzo la segunda encuesta, ya con preguntas más concretas y definidas, intentando ir a por cuestiones que quiero validar o aclarar. Vamos de lo más concreto a lo más genérico aquí. Para ver si las pistas que me han dado en las entrevistas son sentimientos generalizados.
Para las encuestas hemos visto dos herramientas: Google Forms o Typeform. Como no puedo evitar que me salga la vena diseñadora, tiro por Typeform, que está más cuidada a nivel visual y de ritmo. Podéis hacerla aquí, si queréis.
Lanzo la encuesta por redes, Whatsapp (lo más efectivo) y Slack de Ironhack. La segunda encuesta, ya la defino un poco en la intro el perfil que busco. Gente que ya tiene un interés en adoptar/acoger o lo haya hecho.
¡Como veis tuvo muy buena acogida! Ayuda mucho poner fotos simpáticas para que la gente se anime a responderla.
2. ANÁLISIS
Una vez tenemos los datos, toca analizarlos. Se hace un Affinity Diagram. Quizá esto sea de las herramientas más divertidas que nos han enseñado. Toca empapelar la pared con post-its. Consiste en ir poniendo todos los datos en post-its y luego ir agrupando por temáticas, conceptos o cosas en común.
La foto es una birria, pero ya sabéis, Ironhack es non stop y lo hice en casa a las 23h. Post-its azules para info cualitativa sacada de la entrevista, post-its verdes para info cuantitativa de las encuestas y los post-its amarillos, son los títulos que se ponen a posteriori una vez que has agrupado por tema o concepto.
Con todos los conceptos en la cabeza, lo que hacemos es “vomitar” (sí Aketza Gómez, lo he vuelto a hacer, jajaja) todas las ideas y conceptos en un Mindmap. Yo como lo veo es una especie de conexión neuronal. Lo plasmas todo en el papel y eso te hace ver cómo se conectan unas ideas con otras.
Ya vamos teniendo claro qué quieren nuestros usuarios. Pues lo ponemos por escrito con el Problem Statement.
Con esto pasamos a crear nuestros User Persona, nuestros arquetipos de usuario que hemos ido detectando. Ya se han ido perfilando en nuestra cabeza con la info que hemos ido recabando.
Os presento a Ignacio.
Esto hay que currárselo más, ya lo sé. Pero os lo pego tal cual. También tenemos a María, a Sara y a Luis, pero nos vamos a centrar en Ignacio.
Hacemos un Mapa de Empatía con Ignacio. Nos ponemos en su piel y respondemos a las preguntas: Qué ve, qué siente, qué oye, qué hace y dice. Además ponemos sus frustraciones y aspiraciones (debajo).
Ya sabemos lo que necesita Ignacio y creamos las User Stories. No es una app, al contrario de lo que teníamos en mente inicialmente. Lo que sí necesita es esto:
Perseguimos un poquito más a Ignacio. Entre varios ejercicios, hacemos un User Journey. En realidad un ProtoJourney (versión cortita y simplificada), que consiste en seguir a Ignacio en un momento que nos interese. Yo elegí el momento primer contacto con SOS Galgos.
Este ejercicio está muy bien, porque detectamos ya los Pain Points (o puntos de fricción) donde nuestro Usuario puede abandonar el proceso por algún tipo de sensación negativa. A la izquierda tenemos la escala de satisfacción y vemos que a medida que va realizando acciones, aumenta o disminuye.
Este es el análisis que hicimos con la página actual. Veía que había información que faltaba y que se dejaba para el final. Con estos pain points (los puntos rojos), en realidad lo que hacemos es darle la vuelta a la tortilla y convertirlos en Oportunidades de Diseño. Esto me encanta, es super optimista :D
Vamos un poquito más allá y hacemos un Storyboard de Ignacio. Diréis... pero no es lo mismo? Pues no. Porque el Storyboard lo que nos permite es afinar un poquito más allá y afinar sobre la situación, espacio y contexto en el que Ignacio está realizando esa acción. Aporta y enriquece mucho la visión. El story, por supuesto, está hecho en un tiempo mínimo, no para que quede bonito. Todo esto responde a la metodología Lean. Hacer las cosas rápidas y ágiles sin centrarse en que quede “bonito” o presentable. Así que como veis, me lo tomé al pie de la letra.
3. IDEAR
Con estos problemas detectados, ya vamos empezando a esbozar unas posibles soluciones. (Si os fijáis, hasta ahora no nos hemos preocupado para nada de pensar en dar soluciones, eso me flipa del UX, tomarse su tiempo para cada cosa).
Llegada a este punto, hay muchas técnicas creativas para dar con soluciones. Casi todas se tratan de no cohibirse, de coger lápiz y papel y hacer garabatos. Mi favorita es el Crazy8, donde coges un folio, lo doblas en 8 áreas y tienes que dar 8 soluciones diferentes para esos problemas. Luego lo puedes repetir centrándote en una sola idea. Es exprimir el cerebro al máximo. Hacer zumo de naranja de tus ideas. Salen cosas muy divertidas y pensar 8 cosas diferentes hace que no te encariñes tanto con “tu idea”. Un error que se comete (¡cometemos!) muy a menudo. Muy bien. Os dejo mis bocetos aunque no entendáis nada.
Pasamos a “limpio” las ideas que más nos hayan convencido en los Hand Sketch Concept. Por páginas. ¡¡Ya tenemos el proyecto enfilado!!
Como ideas “revolucionarias” a incorporar salen:
- Explicar en la home más sobre los valores de la asociación y la problemática del galgo.
- Un filtrado potente para encontrar el galgo más afín a tu estilo de vida.
- El apartado de quiénes somos, darle una vuelta y ver más caras. Esto lo demanda la gente.
- Ver más información del perro, sobre todo porque es un proceso de adopción online. Queremos enamorar en la ficha del perro.
- Informar muy bien por adelantado de lo que es el proceso de adopción, con sus entrevistas, esperas, vistos buenos, pagos y confirmación.
- Creación de un chatbot para eliminar el formulario taaan tedioso.
Llegamos a la parte más densita. A la parte de Arquitectura de la Información. Hace falta estructurar el contenido de la página. Como os he dicho, estaba bastante bien, pero ya con las nuevas ideas que voy a incorporar, hace falta darle un repaso al sitemap y darle una pensada. Quedaría así:
Cuando tenemos clara la estructura, vamos concretando y pasamos a crear los Wireframes de baja fidelidad (Low-Fi Wireframes). Aquí solo nos fijamos en estructura y funcionalidades. No en colores, formas, acabados.. blablabla. Todo en gris y hecho con Sketch. Ya toca coger el ordenador.
Esto lo ideal es testearlo también. Se monta y se hacen tests para detectar posibles problemas de flujo. En este caso lo monté con Invision.
¿Ahora qué toca? Darle vidilla y alegría, ¿no? Para ello, vamos a usar un herramienta muy útil, el Moodboard, que no es más que una especie de tablero donde poner categorizado por conceptos a qué quieres que se parezca tu UI (User Interface). Son como guías que te van a ayudar a concretar hacia dónde tirar. Yo lo suelo hacer en Pinterest.
Este es el resumen del mío. En principio lo que haces es trabajar cada uno de los conceptos por separado y compartirlo con el cliente y él elige por dónde le convence más tirar. Como se trata de cosas muy abstractas, con imágenes es más fácil concretar. Ayuda a comunicarse.
Ya pasamos a hacer los Wireframes de alta fidelidad (High Fidelity Wireframes) donde ahora sí, ya nos preocupamos por el aspecto visual, el Look & Feel. Como veis, vamos a tirar mucho de fotos. Aspecto muy limpio, colores nada saturados, muy sutiles y elegantes. Como un galgo. Quería captar esa elegancia también en la web.
Para hacer el prototipo, lo planteamos como una Web Responsive, pero sería tanto para Desktop (escritorio) como para mobile (dispositivo móvil).
Mismo proceso que antes, ahora lo montamos para crear un Prototipo con microinteracciones. Para que a la hora de testearlo sea lo más parecido a la realidad posible. En este caso, lo monté con Flinto (mi mejor amigo).
Aquí el vídeo. Llegad hasta el final, que tiene la sorpresa del Chatbot (¡¡que tanto me costó animar con Flinto!!)
5. TESTEAR
La idea de este prototipo es testearlo con usuarios reales poniéndoles unas tareas. Mientras las hacen, tú observas y ves dónde se atascan (¡o no!) para corregirlo. Se hace con varios y se buscan patrones que se repitan para ver si esos errores o dificultades son comunes. Esto se llama iterar. Una vez que está mejorado, ya se podría empezar a desarrollar y llamar a tu amigo programador.
¡Ah! Este proyecto fue seleccionado para presentar en Google Campus Madrid. Os dejo fotos del emocionante momento :)
¡Y eso es todo amigos! Espero que os haya parecido interesante. Cualquier duda, lo dicho. Encantada de responderla :)
¡Y mil gracias a todos los compañeros (conejillos de indias de test) y profesores: Chucho Lozano, Óscar SP, Samuel Hermoso, Danny Saltaren y AlejandroArribas!
Y también a los super T.A. Aketza Gómez e Isabel Morell por consejos y apoyo.
Y si os habéis quedado con ganas de más (que sería para hacéroslo mirar), podéis ver mi proyecto final Vooy, que resultó ganador del Hackshow de UX/UI de Ironhack.
