Miguel Mazin's profile

Diseño UI/UX App y sitio web "Primates Mexicanos"

Diseño de App y sitio web 
"Primates Mexicanos" (Caso de estudio)
Agradecimiento especial a los especialistas en conservación de primates (adelante mencionados) que han apoyado la realización de este proyecto.
Especie: Mono araña (Ateles geoffroyi) Fotografía: David Almazán
Al culminar la especialidad en experiencia e interfaz de usuario de Google realicé el proyecto que a la fecha más me ha entusiasmado, el diseñar una forma de ayudar a conservar una especie de primates.
Captura de pantalla del proyecto descrito obtenido por Sharpen.com
El amor por los animales y demás formas de vida ha estado presente a lo largo de mi vida, por lo cual decidí enfocar este proyecto hacia la conservación de especies endémicas de México: El Mono araña (Ateles geoffroyi), El Saraguato Negro (Alouatta Pigra) y el Saraguato Pardo (Alouatta Palliata).
Para concepción de este proyecto fungí los roles de: investigador, generador de ideas, estratega, diseñador, artista, realizador de prototipos y conductor de pruebas de usabilidad.
Investigación
Comenzando por observar documentales como "Voces de la Selva" por Jorge Ramos Luna, quien más adelante colaboraría con la realización de este proyecto, fue como entendí el mensaje más importante: 

Los monos son esenciales para la conservación de selvas en el territorio mexicano.
Selva mexicana, fotografía: Facundo/Youtube
Platiqué con especialistas como el Dr. Gilberto Pozo Montuy, Director Ejecutivo en Conservación de la Biodiversidad del Usumacinta A.C. sobre el estado actual de conservación de nuestras selvas y las especies primates que en ellas habitan para así entender el escenario completo.
Así como el equipo de trabajo del Dr. Gilberto existen muchas otras organizaciones que están implementando acción para apoyar la conservación de primates en México, pero aun el trabajo no es suficiente.
Las especialistas en primatología y vida silvestre Denise Spaan, actual investigadora en el Instituto de Neuroetología y Montserrat Franquesa Soler, coordinadora de proyectos en Miku Conservación comentan la importancia de combatir la ignorancia y la mal-información que existe en torno a estos animales.
Especies amenazadas
Mono araña capturado
Existen diversos factores que ponen en riesgo la estabilidad, salud y equilibrio de vida que tienen los monos en la selva, siendo la interacción humano-mono la principal problemática, la cual se desglosa en:
Monos en la urbe.- Debido a la extensión de la mancha urbana en el sureste y suroeste del país, han incrementado los avistamientos de monos en las partes urbanizadas, provocando monos electrocutados por cables de alta tensión, monos atropellados en carreteras y monos siendo víctima de violencia por parte de algunas personas. 
Tráfico ilegal de especies.- A pesar de que las autoridades mexicanas han establecido leyes que restringen el tráfico de estas tres especies, el tráfico ilegal por parte de organizaciones criminales no ha cesado en los últimos años, donde una manera común de captura por parte de los cazadores es asesinar a la madre o a los monos más grandes de una tropa para poder secuestrar a las crías.
Domesticación de la especie.- El crear vínculos con los monos conducidos por la ignorancia, genera un cambio en su dieta, comportamiento y función ecológica, siendo la asociación "mono-banana" uno de las principales datos que corregir.
Video ejemplo de domesticación a la especie, video: Victor Aragon/Youtube
Problema
A pesar de las medidas implementadas por expertos primatólogos para motivar a la población a conocer más a estas especies y concientizar lo importantes que son para el ecosistema, aún queda un gran rango de personas que esta quedando fuera del alcance, siendo los turistas que visitan el sureste y suroeste mexicano un grupo importante a considerar.
Meta
Diseñar un producto digital que pueda llevar la información necesaria a un mayor número de personas y que genere una reacción de interés, identidad y respeto por parte del usuario hacia estas especies silvestres.
Ideación
¿Cómo diseñar algo funcional, visualmente agradable y que atienda las necesidades de mis usuarios? Todo proceso de diseño lo inicio por empatizar con las personas que pueden interesarse en usar el producto.

Después de entrevistar personas que muestran interés por conocer más sobre especies biológicas, especialmente primates, creé mapas de empatía que me ayudarían a definir mis usuario persona: Guillermo y Miriam.
Usuarios persona ficticios que simbolizan el agrupamiento de ideologías e intereses de potenciales usuarios.
Al crear el mapa de viaje de mi usuario Guillermo, para entender quién es, qué es lo que hace y porqué lo hace (que lo motiva), me percaté de otra situación que no está siendo atendida, el denunciar ante las autoridades correspondientes avistamientos, maltrato o tráfico de especies de una manera práctica y sencilla.
Captura de pantalla del mapa de viaje de mi usuario persona: "Guillermo".
Audiencias a la "competencia"
Aparte de empatizar con el usuario, investigar sobre otros proyectos de conservación existentes y analizar qué están haciendo bien y como podrían hacerlo mejor, es la manera en la cual obtengo inspiración para resolver el problema encontrado; siendo en este caso Naturalista, WWF  Conservation App, Seek y Enciclovida los productos digitales que más llamaron mi atención.
Captura de pantalla, audiencia competitiva de apps y sitios web dedicados a la conservación de especies.
Diseño
Al ser un proyecto de diseño de app y sitio web, decidí comenzar por diseñar la arquitectura de información de la app, puesto que el sitio web sería una versión simplificada de esta.
Primer diseño del mapa del sitio web hecho a mano.
Posteriormente diseñe 5 versiones de cada pantalla con elementos que considere podrían ser una buena solución para los problemas o temas hallados, y así definir cada una de las pantallas en el flujo del usuario.
Ejercicios de "crazy eights" a la izquierda y diseño de 5 versiones de cada pantalla a la derecha.
El proceso de dibujo termina hasta que con certeza puedo asegurar que las pantallas, así como su estructura, están completas.
Primer prototipo de baja fidelidad
Al estructurar la arquitectura de información del sitio web, definí los tres flujos esenciales que el prototipo de baja fidelidad deberá incluir:

1.- Registrar avistamientos. Realizar avistamiento de monos ayudaría a los especialistas a tener un control de monitoreo más exacto con la ayuda o participación de la población, al mismo tiempo que incentivaría al usuario a involucrarse.

2.- Denunciar ante las autoridades. Realizar denuncias anónimas por monos heridos, muertos o en peligro, así como tráfico de especies y daños a su ecosistema.

3.- Conocerlos. Conocer a cada especie de primate endémica del país, que los distingue, sus características, dieta y funciones ecológicas de una manera agradable y directa.
Primer prototipo de baja fidelidad realizado en Figma
Pruebas de usabilidad (primera ronda)
Realicè pruebas de usabilidad con especialistas antes de realizarlas con potenciales usuarios, así obtuve el feedback necesario para terminar de armar un prototipo completo bajo la guía y tutela de expertos como el Dr, Juan Carlos Serio Silva, Investigador Nacional y Titular en el Instituto de Ecología.
Capturas de pantalla tomadas durante las pruebas de usabilidad remotas con expertos primatólogos del primer prototipo de baja fidelidad.
Desarrollo del prototipo de alta fidelidad e interfaz de usuario
Después de analizar la interacción de usuarios con el prototipo de baja fidelidad, identifique temas que abordar al momento de hacer el prototipo de alta fidelidad, entre los que resaltaron: Agregar la opcion de cambiar el idioma en la app como tema de accesibilidad, un desglose de datos a capturar mas especifico al momento de realizar un avistamiento y diseñar un display más interactivo y divertido en la sección "conocelos".
Al momento de crear la identidad visual del proyecto deje mi impulso artístico hacer lo suyo, realizando un moodboard visual en Miro sobre lo que me gustaría ver y posteriormente creando ilustraciones digitales en Procreate (una para modo oscuro y otra para modo normal de luz) de estas maravillosas especies para generar inspiración y definir una paleta de color acertada.
Ilustraciones digitales realizadas en Procreate por mí.
Al sentirme identificado con el arte que diseñe me senti mas comodo para crear mi sistema de diseño, definiendo el estilo visual de la app y el sitio web con la colorimetría, las tipografías exactas y la iconografía adecuada.
Captura de pantalla del sistema de diseño que realicé para el proyecto "Primates Mexicanos".
Mientras construía el prototipo de alta fidelidad, se me ocurrió la idea de definir una identidad de carácter sustancial que apadrine el desarrollo de este proyecto, definiendo a la Comisión Nacional para el Conocimiento y Uso de la Biodiversidad (CONABIO) como principal desarrollador.
Prototipo de alta fidelidad
Mock-up de la app y sitio web responsivo.
Realizando el rediseño y los ajustes necesarios a la estructura de la app en el prototipo de alta fidelidad, te invito a interactuar con este:
Consideraciones de accesibilidad
Al ser un producto que serviría para informar y concientizar a muchas personas, la opción de traducir a múltiples lenguas debía estar incluido, así como lograr un equilibrio visual en donde los colores contrastasen lo suficiente para lograr una legibilidad clara pero que no perjudicarán la vista de los usuarios, es por eso que definí un tono beige para los tonos luminosos y un cafe obscuro para los tonos más bajos.
Uso de tonos contrastantes pero visualmente amables para la vista.
Siguientes pasos
Siguientes pasos serán realizar nuevas pruebas de usabilidad con habitantes del sureste y suroeste mexicano, así como desarrollar el prototipo de alta fidelidad del sitio web que alojaría el link de descarga de la app.
El impacto de este proyecto hasta ahora ha sido solo medido con las palabras de especialistas como Montserrat Soler, quien describió el diseño de la app como un "sueño haciendose realidad".
Diseño UI/UX App y sitio web "Primates Mexicanos"
Published:

Diseño UI/UX App y sitio web "Primates Mexicanos"

Published: