Learning about Regional Elections of Colombia 2019 to make conscious decisions
¡Yo elijo!, "I choose!", educational microsite to inform colombian citizens about the elections.
↓
SCROLL
BACKGROUND
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.
CHALLENGE
How might we encourage Colombian citizens to learn more about the elections and make conscious decisions while keeping them updated about voting results?
SOLUTION
Create a microsite that would keep Colombian citizens informed about the elections and provide them general and specific information.
ROLE
Sr. Designer
TIMELINE
3 weeks / 2019
TOOLS
Adobe XD, Photoshop, pen & pencil
TEAM
Daniela Montanez (main designer), Cristian Anzola (product owner), Dora Rivera (product owner), Daniela Guzman (client), Robert Castro (developer), Gerardo Penagos (developer), Einar Eraso (developer)
THE BRIEF
Creating a place with information about Regional Elections that catered to all of RTVC brands
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:
Constraints
⟶ Color could not be the same as any of the existing parties.
⟶ UI needed to be different from the ones used in RTVC branding.
⟶ Time.
Needs
⟶ Educational.
⟶ 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.
EXPLORING
Initial proposals to reach the best possible solution
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.
Extract of some of the low-fidelity wireframes of the website.
A MORE DEFINED SOLUTION
Starting point to organize and distribute information needed for each section
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.
GRAPHIC PROPOSAL
Design of a header to invite people to vote and be interested in the content
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.
Before deciding on a specific header, I made sketches and try different color combinations until arriving to the version that was chosen.
SOLUTION ALMOST READY TO SHIP
Adding the style guide and final revisions to the prototype
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.
DESKTOP PROTOTYPE
Making sure the designs can be seen perfectly on every screen
HAND-OFF
Preparing the files and assets for development
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.
Some examples of what the style guide contained for the developer.
ONE LAST REVISION
Even in agile environments, some extra needs will show up. Sometimes in the form of a map, like in this case
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.
Adding a map to function as a filter of each department of Colombia.
REFLECTIONS
Election Day is stressful but seeing everything come to live is fun
⟶ 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.