PREP 2024

¿Cómo simplificamos la navegación para que cualquier persona encuentre la información, sin importar cuánto sepa de temas electorales?

La pregunta de diseño

Encuesta. 265 personas respondieron para que entendiéramos cómo buscan y encuentran la información electoral, qué partes les parecen más útiles y dónde puede mejorar el portal.

• 51%tenía entre 31 y 43 años
• 174 · 89 · 2mujeres, hombres y otro

Benchmark. Quise ver cómo otras plataformas de resultados electorales manejan la experiencia al buscar información, y comparé las características y la facilidad de uso de sitios de institutos electorales.

Con la investigación y el benchmark creé un mapa de afinidad para descubrir los problemas más comunes. Fue clave para guiar el rediseño: lo consolidé en seis temas: navegación más sencilla, apoyo con términos complicados, búsqueda y filtros efectivos, frustraciones, opciones de accesibilidad y experiencia móvil.

• 13mejoras implementadas
• 5líneas de trabajo

Con base en la investigación armé perfiles de los usuarios ideales del PREP. Después hice un flujo de usuario con los caminos posibles por las pantallas del rediseño, y pasé de wireframes de baja fidelidad (en papel) a media fidelidad en Figma, y de ahí a alta fidelidad.

Las 13 mejoras están numeradas sobre las pantallas. Desliza para recorrer las cinco líneas de trabajo: cada número se explica junto a su captura.

Navegación simplificada

1. Menús claramente etiquetados. Ubicados en la parte superior e izquierda de la página, para encontrar rápido secciones como Presidencia, Senadurías y Diputaciones.
2. Menú lateral organizado y accesible. Muestra opciones claras como “Votos por Candidatura” y “Votos por Partido Político”, para elegir rápido el tipo de información que se quiere consultar.
3. Diseño limpio y estructurado. Espacios bien definidos que reducen el desorden visual y ayudan a encontrar la información más fácil.

Ayuda para entender términos complejos

4. Centro de Ayuda integrado. Acceso directo en el menú superior con explicaciones detalladas de términos complejos.
5. Preguntas frecuentes. Sección visible en el menú superior, con respuestas a dudas comunes sobre términos y procedimientos.
6. Enlaces a recursos adicionales. Infografías descargables y documentos explicativos para entender mejor los términos y procesos electorales.

Búsqueda y filtros más efectivos

7. Filtros claros y personalizables. Más detallados, para refinar la búsqueda por “Entidad”, “Distrito”, “Tipo de Elección” y “Resultado por Candidatura”.
8. Personalización de resultados. “Mi Sección” permite ingresar directamente la entidad y la sección de interés para ver los resultados específicos.

Opciones de accesibilidad

9. Modo claro y oscuro. Un botón alterna entre los dos modos. Es útil para personas sensibles a la luz o con una preferencia de lectura.
10. Ajuste del tamaño del texto. Opciones para aumentar o disminuir la letra, pensadas para personas con discapacidad visual o dificultad para leer fuentes pequeñas.

Mejor experiencia móvil

11. Diseño responsivo. La página se adapta al tamaño de la pantalla: menús y opciones de navegación visibles sin hacer zoom ni desplazarse de lado.
12. Interfaz simplificada. La versión móvil es más limpia y prioriza lo más relevante: los resultados y las opciones de filtro.
13. Optimización de gráficos y tablas. Se ajustan automáticamente para que no se corten en pantallas pequeñas.

El PREP se publicó el 3 de junio de 2024 con las 13 mejoras implementadas. Tuvo más de 9 millones de usuarios en todo el mundo, según Google Analytics.

Lo que quedó corto

• La encuesta tuvo más mujeres (174) que hombres (89). Sus porcentajes describen a quien respondió, no a todo el país.
• El benchmark fue de solo tres países: Alemania, Australia y Dinamarca.
• La accesibilidad quedó a medias: hay modo oscuro y tamaño de letra, pero faltan lectores de pantalla e idiomas indígenas.

Lo que sigue

• Tutoriales interactivos.
• Notificaciones personalizadas en tiempo real.

Archivo de diseño del PREP 2024.

Cargar: PREP 2024: personas (Figma)

Cargar: PREP 2024: wireframes (Figma)

Cargar: PREP 2024: otra vista del archivo (Figma)