It was late 2019, the election of Regional candidates would happen soon in Colombia. We had little less than a month to be able to create a place that would have all the information regarding those elections in order for Colombian citizens to learn more about the election, the candidates, history of the elections and to make a conscious decision when voting. Furthermore, on election day we would need a way to show the live count by department and results of each category.
How might we encourage Colombian citizens to learn more about the elections and make conscious decisions while keeping them updated about voting results?
Create a microsite that would keep Colombian citizens informed about the elections and provide them general and specific information.
3 weeks / 2019
Adobe XD, Photoshop, pen & pencil
Daniela Montanez (main designer), Cristian Anzola (product owner), Dora Rivera (product owner), Daniela Guzman (client), Robert Castro (developer), Gerardo Penagos (developer), Einar Eraso (developer)
A new need had come, we were a month away to the day the Regionals elections would happen in Colombia. The elections would happen on October 27th, 2019, with the purpose of electing different government positions, such as mayors and deputies, of the 32 departments of Colombia.
One of RTVC Sistema de Medios Públicos (the public tv and radio of Colombia) missions is keeping Colombian citizens updated on what is happening or what is going to happen, which means they would need a place to inform about elections. To create a microsite there were some constraints and needs:
⟶ Color could not be the same as any of the existing parties.
⟶ UI needed to be different from the ones used in RTVC branding.
⟶ A section for each RTVC brand, as they would all provide different information.
⟶ Streaming section on election day.
⟶ Live updates on election day.
⟶ Countdown until election day happened.
⟶ Countdown on election day to show the end time to vote.
One of the things I like to do when approaching a new design, aside from looking for inspiration and design patterns, is sketch as much as I can to get all of my ideas out and arrive to those that accomplish every goal.
This is how I approached this project as well. Although I first started out with a simple sitemap to allow me to know how the pages and subsections would be laid out.
Understanding what was needed and the constraints, I prepared the initial mid-fidelity wireframes. Since they were going to be presented to the client, I prototyped the proposal in Adobe XD, to start having a feel on what it would look like.
At the same time I was doing the mid-fidelity wireframes, I was working on the header for the microsite. I played around with ideas about a box and the catchphrase of the project “Yo Elijo” or “I choose”. This piece was later on used for the banners and the background for the live streaming that happened on election day. I was working on these proposals before the UI was approved, which is why I have one proposal for each UI.
The main changes that they wanted were to add some additional icons to inform the person what type of content it referred to (image, text, video, audio). And they wanted to simplify the language, so instead of “Streaming” they wanted “En vivo” which is the spanish version; that small change helped with accessibility as not everyone is familiar with the english word.
Once the prototypes were ready to go, I created a style guide with all of the information they would need like the grids, colors, fonts and sizes, margins and padding, hover effects, examples of the animation I was going for, and any other element that they would need to develop the project.
While development was happening, there was a sudden new need from the client: an interactive map on election day that would work as a filter to click on each department to see how the voting was going on.
⟶ To understand this project better, I attended a conference on how the election system would work and what to take into account in terms of design and development constraints.
⟶ Even in fast projects, some last minute tweaks will occur, and that’s completely ok as long as the team can communicate clearly.
⟶ Style guides are time consuming, aside from doing one it is helpful to allow developers to see the “inspect” section of Adobe XD, so they can start working right away.
⟶ It is nice to have a client that answers quickly and it’s on top of things in every single step of the way.
⟶ Wireframing was especially useful for this project as there was a lot of information and it needed to be organized in a way that wasn’t overwhelming.