Decide Chile

Mobile Wireframes Interactions Data visualization
  • Año: 2019 - 2020
  • Cliente: Unholster (proyecto propio)
  • Equipo:
    • Project manager
    • Diseñadora
    • Desarrolladores
Mi rol en el proyecto:
  • Proponer primeras ideas de visualización
  • Construir las primeras ideas del sitio mobile-first en Sketch
  • Proponer interacciones con los datos y navegación del usuario

Contexto

DecideChile nació años atrás de mano de Unholster para visualizar e informar sobre resultados electorales en Chile. Con el estallido social de octubre del 2019, y como respuesta al descontento de la ciudadanía, se propuso una elección donde los chilenos decidirían si continuar on la constitución actual o redactar una nueva con una comisión o convención también elegida democráticamente.

Es con esto que surge la necesidad de crear un sitio que pudiese mostrar en tiempo real los resultados de este importante plebiscito que se realizaría en abril del 2020.

Objetivos

Objetivo principal: Visualizar en tiempo real los resultados del Plebiscito Nacional 2020.

Objetivos específicos:

  • Visualizar resultados para ambas preguntas del plebiscito.
  • Visualizar resultados a nivel nacional, regional y comunal.

Gran cantidad de personas marchando en las calles de Chile en el 2019.
Marcha masiva en Chile, 2019.
Gráfica a color del Plebiscito 2020 de Chile.
Gráfica para el Plebiscito 2020.
Dos hojas con proto-personas.
Proto-personas.

Usuarios

En términos de investigación de usuario no hubo una etapa concreta, sino más bien se hicieron un par de proto-personas que después se confirmaron con los socios de la empresa, que anteriormente estuvieron altamente involucrados en el proyecto. Se definió como usuario a una persona mayor de 21 años, generalmente con estudios superiores e interés en la política nacional.

Listado con personas que cumplían con el perfil de las proto-personas.
Listado de personas reales que cumplían con las características de las proto-personas.

Proceso

Para empezar con las ideas primero se hicieron mock ups de baja fidelidad en sketch, en formato desktop, ya que era el formato conocido que se tenía de DecideChile. Estas fueron iteraciones cortas con feedback directo del Project Manager, por lo que las variantes fueron numerosas.

Dos pantallas con las primeras ideas en formato desktop.
Otras dos pantallas mostrando iteraciones de ideas iniciales.
Dos pantallas con pruebas de colores en las visualizaciones.

Mobile-first

Después de varias iteraciones en formato desktop, se definió que el sitio debiese ser mobile-first, por lo que las ideas pasaron a formato móvil, donde se empezó a iterar tanto en estructura de la información como en colores y tipografías.

Cuatro ideas de visualizaciones a color.

Desafíos

En un principio la idea era tener una cantidad grande de círculos que representara cierta cantidad de votantes, y que éstos se fuesen distribuyendo entre las dos opciones que tenía cada pregunta. Al diseñar en formato móvil, el mayor desafío que se presentó fue el diseño de interacciones y la usabilidad del sitio en pantallas más pequeñas. Para eso se probaron diferentes ideas que comprendían distintos gestos para la navegación a través de los resultados electorales. Esta idea se descartaría por el tiempo de desarrollo que requeriría. En su lugar, se decidió una visualización estática, en el sentido de que no requeriría de una acción del usuario para obtener datos.

Tres pantallas con anotaciones.
Tres pantallas con anotaciones.
Gif que muestra el flujo de navegación.
Gif que muestra el flujo de navegación.

Arriba: Prototipos interactivos hechos con Principle donde se muestran los flujos de navegación de resultados a nivel nacional y regional.

Derecha: Últimas propuestas.

Diagrama que muestra un listado de síntomas.

Aprendizajes

Este fue un desafío corto en tiempo y desafiante en términos de diseño. El tiempo y la complejidad técnica de una visualización interactiva jugaron en contra. Sin embargo, el ritmo y periodicidad de las iteraciones fueron un excelente ejercicio en términos de feedback entre diseño y desarrollo. Conocer los límites técnicos permitió descartar a tiempo ideas que pudiesen haber sido muchísimo más costosas en tiempo de desarrollo.

Este en particular fue uno de los proyectos que más he disfrutado, por la libertad creativa, la posibilidad de probar nuevas herramientas, nuevos formatos de visualización, el feedback constante y la posibilidad de trabajar más por el lado del diseño de visualización de datos.

Un iPhone flotando con una vista de la visualización de Decide Chile.
Actualmente el sitio presenta colores y una navegación distintas, pues se pausó un tiempo y se volvió a replantear el look & feel con otra diseñadora del equipo una vez se retomó el proceso.