Proyectos / Una Gota de Salud
Un reencuentro oportuno
En 2018 conocí Una Gota de Salud, una fundación que ofrece asistencia sanitaria en comunidades vulnerables del noroeste de Córdoba. En ella suelen participar personas del ámbito de la salud (médicos, dentistas, nutricionistas, etc.), brindando sus servicios a quienes no tienen otra forma de atenderse. Yo participé como voluntario acomodando cajas de donaciones y dando una mano en general, ya que no era estrictamente necesario ser un estudiante o profesional de la salud para hacer algunas tareas. Sin embargo, quienes sí lo eran, explayaban su vocación gustosos de poder combinarla con una ayuda hacia los demás.
Varios años después volví a contactar a esta fundación, y me apenó un poco que no estuvieran haciendo tantos viajes como antes. Entre 2008 y 2020, un grupo de 40 personas había viajado casi todos los meses a parajes remotos de la provincia para ofrecer su ayuda, pero tras la pandemia el personal comenzó a escasear, así como los choferes voluntarios que posibiltaban el traslado. Todo esto hizo que la frecuencia de los viajes disminuyera significativamente, y en ese momento, ya siendo desarrollador y con algo de experiencia en marketing, les ofrecí ayuda desde un lugar que, ahora sí, tocaba mi vocación de cerca: una página web y una campaña de marketing que servirían para reclutar voluntarios y recibir donaciones.
Investigación y UX
El desafío inicial fue descubrir cómo hacer una página web que resultara efectiva para este tipo de organizaciones. Necesitaba conocer qué información se manejaba comúnmente, cuántas páginas se utilizaban, qué tipo de contenido incluía cada una, etc. Y luego tendría que adaptarlo al caso de La Gota, para saber qué información requerir de sus fundadores y con qué fin. Para eso, me dediqué un tiempo a buscar referentes y, sobre todo, me guié por algunos videos de The Website Architect, donde se explicaba con lujo de detalles las decisiones tomadas al diseñar varias páginas de este estilo. Al final, la que usé de referencia fue la de Ekal Canada, desarrollada por el mismo youtuber, y de allí diseñé una UX dirigida a cuatro perfiles bien definidos:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
Finalmente, planteé una estructura de siete páginas que permitirían conocer en profundidad a la organización y sus actividades, y que además tendría varios llamados a la acción para llegar rápidamente a las formas de colaborar. La idea era que el sitio estuviera bien adaptado tanto para la persona más curiosa del mundo, como para la más impaciente que no necesitaba leer tanto antes de pasar a la acción:
Inicio: La página principal daría una rápida introducción sobre quiénes eran las personas de La Gota, lo que hacían y lo que necesitaban para poder seguir ayudando. Incluiría varios links para ir rápidamente a las páginas secundarias donde se explicaba todo con más detalle. La idea fue tener una narrativa simple y persuasiva, que diera confianza y contagiara las ganas de participar.
Quiénes somos: Una página centrada en la historia de La Gota. Esta parte buscaría dar solidez a la institución y generar un primer paso de confianza con quienes no la conocieran en absoluto.
Qué hacemos: Un detalle extenso sobre las actividades de la fundación. Aquí se contaría sobre las áreas de ayuda (clínica, pediatría, odontología, etc.) para que cada tipo de profesional o estudiante pudiera darse cuenta del valor que podría aportar en su propio campo de expertise.
Formas de ayudar: Esta página explica las tres maneras fundamentales de colaborar. Una consiste en ser voluntario (siendo o no parte del ámbito de la salud), otra en ofrecer transporte (la necesidad más crítica) y, por último, hacer donaciones (de medicamentos, alimentos, etc.).
Donaciones: Aunque ya se mencionaran en la página anterior, las donaciones merecían una sección exclusiva por un tema de accesibilidad: muchas personas buscarían directamente la palabra “donaciones” en la barra de navegación, ya que es la forma más habitual de colaborar en la mayoría de los casos.
Contacto: Una página típica para contactarse. Al igual que el caso anterior, aunque esta opción aparece en otras partes del sitio, requiere de su página exclusiva por una cuestión de accesibilidad.
Voluntariado: Un formulario para pasar a formar parte de La Gota. Esta sería la última página por una buena razón: al serlo, permitiría ubicar un botón destacado al final de la barra de navegación con el título “Voluntariado” y tener así el máximo llamado de atención. Después de todo, este es el objetivo principal de todo el proyecto.
Recursos y copywriting
Un recurso básico que necesitaba era el logotipo de la fundación para incluirlo en el header del sitio. Sin embargo, La Gota no contaba con una marca gráfica, sino con un fotomontaje que colocaban en los vehículos para ser reconocidos rápidamente en sus viajes. Si bien este había sido el “logotipo” de la fundación hasta el momento, en realidad se trataba de un banner que servía medianamente para los viajes y las redes sociales, pero que no funcionaba para otros usos. Por ello, decidí crear una marca gráfica a partir del mismo y creo haber hecho una buena adaptación:
El copywriting requirió de una investigación más específica, ahora enfocada en la historia y las actividades de La Gota en sí. Por suerte pude hacer buenos paralelismos con páginas como la de Ekal Canada. Por ejemplo, Una Gota de Salud contaba con “áreas de ayuda”, lo que me permitió crear la típica sección de tarjetas, con links a la página secundaria donde se explicaba cada área en párrafos más extensos. El tema es que esos párrafos no existían, así que tuve que revisar artículos de entrevistas que le habían hecho a la fundadora de la organización, así como hacer consultas constantes, para poder darle forma a todo.
La fundación subía constantemente fotos de sus actividades a su página de Facebook, así que tuve muchísimo material para elegir basándome en lo que quería contar. También encontré un par de videos muy bien producidos que estaban subidos a YouTube y que le dieron vida al hero de la página principal. Tanto las imágenes como los videos necesitaron un poco de de edición con Photoshop, Premiere Pro e inteligencia artificial para poder llevar a cabo lo que tenía en mente: un diseño que se basaba en cuadros de imágenes y secciones con efecto parallax:
UI y desarrollo web
En este proyecto vi la oportunidad para aprender una tecnología que hacía mucho quería probar: Astro. Era ideal, ya que se trataba de un sitio meramente estático, para lo que esta herramienta suele ser muy recomendada. Para los estilos utilicé Tailwind y traté de no recurrir a ninguna librería UI, ya que quería tener un código nativo incluso para los formularios, desplegables y mensajes flotantes. El único código third-party que usé fue la librería de EmailJS, para que los fundadores pudieran recibir mensajes desde los formularios de contacto, donaciones y voluntariado.
Por lo general, por más básico que sea un proyecto, siempre me gusta darle una vuelta creativa, algo desafiante que, manteniéndose dentro de los estándares y buenas prácticas del diseño web, le dé una chispa única al proyecto. En este caso, se trató de una marquesina de fotografías que comienza ocupando toda la pantalla y que luego empieza a moverse y cambiar de tamaño con el scroll del usuario. Es un efecto que hacía mucho quería probar desde que vi cómo estaba creada la página de Wennect, y que desafortunadamente solo puede apreciarse en desktop (en mobile simplemente no funciona por la falta de espacio horizontal, así que la marquesina pasa a ser un slide infinito de fotografías).
La campaña de marketing
Ahora que la fundación cuenta con una página robusta, llega el momento de sacarle partido. Como por el momento no hay una cuenta bancaria para recibir donaciones online, no fue necesario desarrollar una página para ello, sin embargo, el sitio es lo suficientemente versátil como para adosarlo a distintos proyectos. Uno de ellos consiste en una campaña de marketing con flyers que diseñé para promocionar la página y recibir así donaciones físicas y reclutar a más personas. La idea es repartir estos flyers especialmente en centros educativos para llegar a personas que estén estudiando carreras del ámbito de la salud. Todo esto es bastante nuevo, así que espero poder compartir dentro de poco los resultados. ¡Deséenme suerte!