History is never gone, only we learn it differently
La Voz del Poder, the power of the voice, is a special site to learn about past Colombian presidents from 1938 to 1990.
↓
SCROLL
BACKGROUND
"La Voz del Poder" (the power of the voice) is a print book from Señal Memoria that explains about the speeches and history of past Colombian presidents from 1938 to 1990. The book was lauched at La Feria Internacional del Libro de Bogota 2021 ↗︎ (International book fair).
Before launching, there were some situations to be handled. The first was that Señal Memoria wanted to focus on the user experience by making sure more people would be able to acess the audio and resources that are mentioned in the print book. The idea was to be able to connect the print product with the digital content.
CHALLENGE
How might we support our audience into finding all of the digital content to allow them to learn more about the presidents and their speeches?
SOLUTION
The solution was creating a special website dedicated to the presidents of Colombia from 1938 to 1990. Each president had their own page, with their speeches and other types of digital content (like very old videos of them, photos and sound recording). The print book contains QR codes, allowing people to scan this code to be taken directly to the respective president on the website.
ROLE
Sr. Designer
TIMELINE
8 weeks (design) / 2020
Shipped on 2021
TOOLS
Adobe XD, Photoshop, pen & paper
SKILLS
Daniela Montanez (main designer),
Fabian Perez (product owner),
Javier Martinez (developer),
Santiago Rocha, Elsa Garzon (client)
THE BRIEF
Creating a special website to include all of the digital content of the past presidents that Señal Memoria has in their archive
Señal Memoria is the archive that saves all of the digital content of Colombian history. They have a big archive of files that include photos, videos and audio about every topic that was talked about in the past. Their mission is to save this data, digitize it and then share it with the world.
In this archive, they have tons of information about different topics, which includes the presidents of Colombia. Señal Memoria was writing a physical book about the presidential speeches from 1938 to 1990 that would be launched in the next Feria del Libro, but they also wanted a way to show the digital content they have in their archives, which is why they wanted a website to have this information available.
⟶ The user should be able to scan a QR code in the book that would take them to a page with a specific president and the information about them, including digital resources.
⟶ Digital resources, like audio, video, text and photos, had to be organized chronologically.
⟶ There must be a section with general information about the print book.
⟶ Users should be able to navigate between presidents freely.
⟶ Research team of the book had to be able to edit the information at any point.
⟶ Should be mobile-first.
⟶ MUST follow the style guide of the print book and Señal Memoria’s main website.
LOW-FIDELITY WIREFRAMES
Creating the sketches that would lead to the solution
Having an idea in mind, I started to sketch as many ideas as I could, always remembering the constraints and needs of the project.
People would enter the website through a QR code that would lead them to a presidential informative page, it would not lead them directly to the homepage (unless they entered without using codes), that meant it had to be easy for the user to understand what was going on and how to navigate so they didn’t assume they could not find anything else aside from the first presidential page they scanned.
Some screens of the ideations process while trying to come up with ideas to design the solution.
MID-FIDELITY WIREFRAMES
Going back to Adobe XD for a more concrete proposal
After my initial sketches, I chose the two proposals that aligned more with all of the points needed, while also making sure it felt modern and fun, as these are two of the things that Señal Memoria wants to represent with their brand. They don’t want to feel old-fashioned or like a history class.
Proposal B was the chosen one by Señal Memoria.
Proposals of the mid-fidelity wireframes, this is a extract of some of the screens that were designed.
UI DESIGN
Throwing color to the design, making sure it is aligned with the design of the book to follow the same style guide
As I had discussed before, Señal Memoria wanted to make sure the special website would aligned with their printed book (aside from their general style), which meant I had to get in contact with the designer of the book, and she helped me by providing some extracts of the book and her color guide to be able to have them as similar as possible.
Homepage
President list
Media
HIGH-FIDELITY PROTOTYPE
All that was left was putting it all together to create the prorotype to find the presidents and their content
We had a little mixed up versions with the developer. I was careless and sent him one of the old versions instead of the final proposal, however, we communicated through hangouts and solved the situation before he started working on the code. Needless to say, communication saved the day again.
DESKTOP VERSION
A Desktop version was still needed to allow users to access the content without the need of owning the book
LAUNCH DAY
While this project started on september 2020, it didn’t see the light of day until the book launch in August 2021, once it was announced in the Feria del Libro Internacional de Bogotá, were we got to see it for the first time.
Physical book with the QR that takes directly to the website that was created. It's always fun to see things work how they're supposed to.
REFLECTIONS
I will never get tired of seeing a design come to live
⟶ As usual, the key to any project is being able to communicate with every part of the team. Being able to keep an active conversation between everyone, helped me understand a lot better the scope of this project and what could be accomplished.
⟶ While I didn’t work on the print version, I was so proud to see it being launched (I have one of my own!)
⟶ Sometimes what is designed doesn’t look the same when it’s developed, and that’s ok.