Sitio web

Huellas en el corazón

Diseño de web para fomentar la adopción de animales domésticos, recaudación de fondos y difusión de la ONG.

Rol

Diseñador UX UI

Herramientas

Figma
Illustrator
Wordpress

Habilidades

Investigación de usuario
Diseño web
Desarrollo en Wordpress

Tiempo

Septiembre 2023 - Marzo 2024

Equipo

Genesis Vicencio
Eduardo Fuentes
Iann Vera

ínea de tiempo del proceso de diseño: definición de temática y brief, investigación con encuestas, entrevistas y análisis de referentes; etapa UX con inventario de contenidos, arquitectura de información, mapa de navegación y wireframes; y etapa UI con guía de estilo, mockups y prototipo interactivo.

Descripción general

Ver Brief

Se necesitan 500-600 kilos de comida al mes solo para los animalitos de la ruta, contando con decenas de perros y gatos a los que asistir y buscar un hogar temporal. Se desarrolló el sitio web para la ONG Huellas en el corazón la calera con el objetivo de generar difusión y potenciar la donación de insumos y dinero, además de fomentar la colaboración de las personas como voluntarios u hogar temporal.

Huellas en el corazón es una ONG ubicada en la Calera, Chile, dedicada a la protección y alimentación de más de 70 perros y gatos comunitarios, además de proporcionar rescate y reubicación.

Investigación

Ver Investigación

Datos relevantes

Hay al menos 4.049.277 animales sin dueño en 35 comunas de Chile.
Los cachorros permanecen en torno a unos 3 meses y los animales adultos unos 10 meses en las ONG.
Falta de dinero para recursos básicos y veterinarios.
Falta de hogares temporales.

Mapa de navegación

Se propuso la siguiente estructura del sitio, considerando 5 páginas principales que contenga la información necesaria para solucionar los problemas detectados de la ONG.

Mapa del sitio web sin modificaciones, detallando las funciones de inicio, adopta, sé un colaborador, socios y nosotros.

Mapa actualizado, simplificando y cambiando socios por aúdanos y la pestaña nosotros sin otras páginas.

Wireframe

Ver Wireframes en Figma

En paralelo con la elaboración de la guía de estilo, se crearon wireframes individuales por cada diseñador del equipo, los cuales fueron unificados en uno solo, considerando la navegación simple del usuario.

Imagen del diseño base de cada página, conectada mediante lineas.

Guia de estilo

Se buscó colores que activaran y dieran energía al sitio, usando la tipografía montserrat para mantener un trato amable al usuario e invitar a visitar el sitio, además de iconos que combinen con la estética moderna, minimalista y amigable del sitio.

Se incluyó además ilustraciones personalizadas para el sitio, manteniendo una estética cercana y mostrando algunas mascotas que han sido rescatadas por la ONG.