DISEÑO WEB

Tablero de Atención Ciudadana

Tablero de Atención Ciudadana

Tablero interactivo que presenta información relevante sobre la atención de solicitudes de la ciudadanía. El tablero incluye datos desglosados por entidad federativa, programa social, procedencia de las solicitudes y eficiencia en los tiempos de respuesta. Además, muestra gráficas mensuales que reflejan la evolución y el desempeño en la atención de las solicitudes

Mi rol:
Fui responsable de la creación de wireframes y prototipos de alta fidelidad, asegurando el cumplimiento de las normas de diseño UI/UX establecidas. También trabajé en la aplicación de principios de accesibilidad y diseño centrado en el usuario para garantizar una experiencia intuitiva y eficiente

RETOS

Uno de los principales desafíos fue diseñar un sistema visual que permitiera a los usuarios navegar fácilmente entre diferentes niveles de datos, desde una visión general hasta detalles específicos. Esto requería un enfoque minucioso para garantizar que la información fuera clara y accesible, sin saturar la interfaz con datos excesivos.

Ajusté la paleta de colores, tipografía y elementos visuales para garantizar consistencia con la identidad visual institucional.

PROCESO DE DISEÑO E INVESTIGACIÓN

  1. Definición de requerimientos: Identificación de métricas clave y objetivos del proyecto mediante reuniones con las partes interesadas.
  2. Investigación de usuario: Entrevistas y análisis de herramientas similares para comprender necesidades y mejores prácticas.
  3. Wireframes y prototipos: Creación de wireframes de baja fidelidad para validar la estructura y prototipos interactivos de alta fidelidad para pruebas de usabilidad.
  4. Iteraciones de diseño: Incorporación de retroalimentación, ajuste de elementos visuales y aplicación de colores institucionales para garantizar accesibilidad y consistencia visual. 

 

SOLUCIONES DE DISEÑO

Soluciones de diseño:

  • Colores institucionales:
    • Utilicé los colores oficiales del gobierno como base para el diseño del tablero: tonos verde oscuro y blanco como principales para representar confianza y transparencia, combinados con acentos en rojo para destacar alertas o indicadores importantes.
    • Apliqué una jerarquía de color que ayudó a diferenciar niveles de información: los tonos más claros resaltaron las gráficas y los datos más relevantes, mientras que los más oscuros se reservaron para el fondo y los encabezados.
  • Accesibilidad:
    • Aseguré un contraste adecuado entre texto y fondo, especialmente en secciones críticas como gráficas y tablas, para cumplir con los estándares de accesibilidad (WCAG).

Implementé un diseño responsivo que permitió que el tablero fuera accesible en diferentes dispositivos, incluyendo tablets y laptops.

RESULTADOS Y CONCLUSIONES

Servicios
Diseño centrado en el usuario, Prototyping, HTML/CSS3.

Cliente
Gobierno Federal

Rol
Diseño WEB/UX/UI

Fecha
Octubre 2021