Herramientas Ciudadanas

UX   UI   CSS   HTML

Este es el sitio de herramientas de Ciudadano Inteligente. El objetivo es mostrar las herramientas digitales y metodologías desarrolladas por la ONG para otras organizaciones latinoamericanas con el fin de fortalecer las democracias de América Latina. Las herramientas ya han sido utilizadas más de 70 veces en diferentes países de la región.

Site | Code in Github

Stages of the project for which I was responsible:

  • Proceso User Center Design
  • Arquitectura de Información (IA)
  • User Experience (UX)
  • User Interaction (UI)
  • Diseño de Wireframes
  • Diseño de Mockups
  • Implementación del Front-end
  • Diseño de marca y gráficas

Este sitio me lo encargó la ONG Ciudadano Inteligente para promocionar sus herramientas disponibles para otras organizaciones latinoamericanas. Lo más importante para este proyecto fue la difinición de usuarios, para eso cree personas que representaran a nuestro público objetivo tan particular (activistas, ONGs y sector público principalmente).

Luego de definir a nuestro usuario, comencé con la arquitectura de información organizando las herramientas en cuatro categorías según el objetivo de la herramienta:

  • Incide estrategicamente (herramientas que sirven para potenciar la incidencia de activistas u organizaciones en políticas públicas)
  • Informa de manera efectiva y amigable
  • Rinde cuentas o fiscaliza el avance de otros
  • Fomenta la participación ciudadana
Y organicé los contenidos del en torno a estas categorías.

Para dar respaldo a las herramientas, decidimos mostrar a los usuarios más reconocidos que habáin confiado en nosotros. A través de un mapa enfatizamos la presencia de nuestras herramientas por toda Latinoamérica.

Mapa y carousel de usuarios.

A través de Hotjar hemos tenido información de como los usuarios utilizan el sitio con mapas de calor. Así hemos podido ir iterando y corrigiendo problemas de usabilidad.

Heatmap.