BACKGROUND

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 case, they had salvaged the episodes of the first informational content of Colombia that was transmitted on the movie theaters back in the day. They wanted to be able to share the content, as there isn’t any specific place to hold them.

CHALLENGE

How might we create a space to publish the video content to be more accessible to people?

SOLUTION

Special section on the main website that contain the episodes of Colombia al Dia, timelines and storymaps related to said content.

ROLE

Sr. Designer

TIMELINE

1 week (design) / 2021

TOOLS

Adobe XD, Google hangouts, pen & paper

TEAM

Daniela Montanez (lead designer), Leonardo Perez (product owner) Santiago Rocha, Luis Rodriguez (client)Javier Martinez (developer)

THE BRIEF

Design a space to contain the history of the news in Colombia

Señal Memoria, the archive that contains all the content from the history of tv and radio of Colombia, had recovered many videos produced in the beginning of television, when news and informative programs were shown on the theaters.

They wanted to have a space to share this content with their audience, as they had no place to upload them, aside from keeping them in their archives. To design this website, they had some limitations and needs they focused on.

Constraints:

⟶ Maintain the UI of the main website.
⟶ Do not design appealing to a “nostalgic” feeling.
⟶ Modern and inviting.

Needs:

⟶ Educational.
⟶ List of episodes.
⟶ Player for the episodes.
⟶ Embedded story maps & timelines.

SITE MAP

Organizing the content to determine ui requirements

The special was going to be one-page, as per required by the client. I still wanted to do a small sitemap, to understand the hierarchy between sections and if there was going to be pop-ups or other special features. I also created a task flow and user flow, mostly to understand how the users might interact with the content provided.

Site map laying out the important sections of the special.

LOW-FIDELITY WIREFRAMES

First steps to reach the goal of sharing content to the world

While the website was a landing page, which means it didn’t require more than one screen, I still wanted to explore more than one possibility, having in mind the constraints, especially the one about keeping it modern.

Extract of some of the proposals for the special.

MID-FIDELITY WIREFRAMES

Having a more concrete plan to reach to the solution

From my low-fidelity wireframes, I picked the two choices that fit more into the criteria and requirements. Those wireframes helped me create a more robust form of the design, adding more content and organizing it as how the client was asking for. The proposals were A/B tested with the client and a few of their stakeholders.

Desktop mid-fidelity wireframes of the special.

HIGH-FIDELITY PROTOTYPE

Adding the UI, iterate on priority revisions & voila

Proposal B was the one selected as the winner of the competitions. Having that ready, I followed by adding colors and photos related to the content the user would see once it was developed. The responsive version was also done. A few priority revisions were required: add emission date and sinopsis of each episode, introductory video in the header.

REFLECTIONS

Always remember constraints and needs of the client and the person that will use the product

⟶ There's always room to learn new things. For instance, I didn't know the first news show were played on the theaters. That's pretty cool.
⟶ Just because the content is about History, it doesn't mean the design has to reflect nostalgia. That's how the client likes to do it.
⟶ It is important to prepare original files to handoff, keep layers and assets organized to quickly start the development.

daniela md © 2023