Decide Chile

Mobile Wireframes Interactions Data visualization
  • Year: 2019 - 2020
  • Client: Unholster (own project)
  • Team:
    • Project manager
    • Designer (me)
    • Developers
My role in the project:
  • Proposing first visualization ideas
  • Building the first prototypes in Sketch
  • Proposing interactions with the data and user navigation

Context

DecideChile was born in Unholster years ago to visualize Chilean electoral data. With the October 2019 protests, and as an answer to Chileans' unrest, the government proposed that citizens should decide if they wanted to stay with the current Constitution or if they wanted to write a new one through a democratically elected assembly.

With this comes the need to create a website to show the election results in real time, during the process that would take place during April of 2020.

Goals

Main goal: Visualizing of National Plebiscite results online in real time.

Specific goals:

  • Visualizing results for both questions asked in the election.
  • Visualizing results at a national, regional and communal level.

Big number of people marching through the streets of Santiago, Chile in 2019.
Massive protest in Chile, 2019.
2020 Plebiscite graphic piece.
2020 Plebiscite graphic piece.
Dos hojas con proto-personas.
Proto-personas.

Users

In terms of user research, there was not a concrete stage of it. I actually built a couple of proto-personas that were later matched to real people in terms of their description. As a main user, we defined it as a person older than 21 years old, usually with higher studies (undergraduate degree or higher) and with an interest in national politics.

List of real people that fitted the description of the previously built proto-personas.
List of real people that fitted the description of the previously built proto-personas.

Process

To begin with I came up with low-fidelity prototypes in Sketch, in desktop format which was the standard Decide Chile format.These were short feedback exchanges with the Project Manager so the different alternatives of the prototypes were numerous.

Two screens with the first ideas in desktop format.
Another two screens with the first ideas in desktop format.
Two screens with colour tests.

Mobile-first

After several iterations in desktop format, it was decided that the site would have to be mobile-first because of the huge usage of smartphones, so the ideas were adapted to that format where several more iterations were made.

Cuatro ideas de visualizaciones a color.

Challenges

At the beginning the idea was to present a big amount of circles representing the quantity of voters and that these circles were distributed between the two options that each question had. Designing this in mobile size was the biggest challenge because of the interactions the user could have with the data and the usability issues this could bring. We started testing different ideas with different navigation gestures. This idea was later discarded because of the time of development it would take. In its place we decided to go for a static visualization in the sense that it wouldn't require an action from the user to obtain or display data.

Three screens with handwritten notes.
Three screens with handwritten notes.
Gif showing the navigation.
Gif showing the navigation.

Above: Interactive prototypes made with Principle showing interactions and navigation.

Right: Latest proposals.

Screens showing latest proposals.

Learnings

This was a brief and challenging project in terms of design. The time and technical complexity of an interactive visualization were definitely a factor of stress. Nonetheless the rhythm and periodicty of the iterations were an excellent exercise in terms of feedback between design and development. Knowing about the technical limitations allowed us to discard some ideas earlier in the project and focus our attention to other ideas.

This was possibly one of the projects I've enjoyed the most because of the creative freedom, the opportunity to try new tools and new formats of visualization, the constant feedback and the opportunity to work more on the data visualization side of design.

An iPhone floating with a screen showing Decide Chile visualization.
Currently the site has different colours and navigation as part of the work with another designer, but the structure and the idea is essentially the same.