designer
image cards-01.png

Uprooted

A Multimedia project on the Venezuelan migrant crisis and its impact on Medellín, Colombia.

About Uprooted

This project is a part of the Hussman School of Journalism and Media at UNC. Just under 30 students were selected for the team, which consists of 10 videographers, 2 photographers, 5 reporters, 8 designers/developers, and 1 public relations person. Previous classes have produced award-winning multimedia projects on Puerto Rico after Hurricane Maria and Cuba’s New Wave. Our project was nominated as a finalist for the 2019 David Teeuwen Student Journalism Award in the Online Journalism Awards.

Workroom.jpg

I was thrilled to take on the position of UX/UI designer within the interactive team!

This meant I mainly worked on the design and overall concept of the website. The class was structured so that the first month and a half focused on a multimedia project with local stories on Venezuelan migrants in North Carolina, and then we switched our focus to the Colombia stories mid-February. This mini-project also gave my team the chance to work together and find everyone’s strengths and weaknesses.

My first task for “Uprooted” was to come up with basic design inspiration and to think about the audience our site would draw.  As a team, we created personas and a creative brief. A lot of our design inspiration came from recent news stories and interactive websites featuring multimedia elements. I noticed a lot of designs that relied on scroll watching, and a general push for subtle movements on the page (parallax, video backgrounds, hover states, etc.).

Next, I tackled the general wire-framing and sketching out of page designs. This, so far, was the most challenging task. It took a lot of creative energy to think of a sleek, simple and mobile-friendly page design. I’ve worked with groups before, but this group of developers and designers really pushed me to think differently and collaborate with other designers to create the final page design. Iterations of the page designs are below.

That brings us to Medellín, Colombia!

The whole team hopped on a plane during our semester’s spring break in March 2019. The class also paired up with the Pontifical Bolivarian University and Universidad de Antioquia from Colombia, and 7 students helped us create this multimedia piece. Please check out our process, but ultimately, our final site!


The Discovery Phase

We looked at a lot of different websites for inspiration.

  • How are people telling stories in a captivating way?

  • What did we like or dislike?

  • How might we incorporate some of this inspiration on our own site?

  • What types of features are feasible for our developers to build within 2 months?

  • Who is our audience, and how can we best appeal to them?

  • How do you think they built this?

  • What kind of storytelling would be most effective for our project?


The Creative Brief

What are we looking for? What story are we telling?

  • Current – the crisis in Venezuela is ongoing, and the political, social, and economic facts surrounding this story may change frequently.

  • Poignant – but not sensationalist/fear mongering.

  • Clear – a lot of factors go into this crisis and Colombia’s response, from oil dependency in Venezuela to drug warfare in Colombia, and we want to cover the details without being convoluted.

Project opportunities:

  • Shed light on the unheard stories of the Venezuelan migrant crisis—not just about Venezuelans, but about the people receiving them.

  • Provide objective information on the crisis that is easily digestible.

  • Offer ways for our audience to help, even on a micro level.

  • Create awareness in our local community.


What is our project about?

  • Migration

  • Borders

  • Mixing

  • Crisis

  • Refuge

  • Family

Site design goal: The goal of the Uprooted site is to find a way to make seeming fewer transitions between the stories to make them more unified instead of as separate entities. By unifying the content, we also hope to ensure that users are visiting all the sight has to offer.


Personas


How does our audience engage with the content? What background knowledge do they have?

The Design Process

This site was the perfect example of some design ideas being great the first time around, and other ideas needing a lot of refining. I worked alongside two other designers and my professor to come up with the design of the homepage and story page. We pulled inspiration from interactive story features on the web, drafted and sketched potential designs, and wire-framed several possibilities for our multimedia site. The brainstorming process took about two weeks to completely agree on a design. We continuously changed and updated our wireframes throughout the project to hand off to our developers.

The first sketch I made of the homepage ended up looking similar to our homepage 3 months later…after several iterations and debates with my design team on the most practical design.

IMG_4801.JPG

Initial UX Planning

Uprooted Homepage

Final Homepage Design

Story cards pop out and change to description on hover.

The Final Design

After many revisions and group discussions, we decided on our final design. The process began with basic sketches and moved into full prototypes of the home page, story pages, photo story pages and about page. We also designed the mobile version for the entire site. Each story page features a progress bar at the bottom that helps the reader track their place in the story. The lights go down when you reach the video, and each story page features interactive elements designed and coded by the team, some from scratch, and some using a visualization tool called Flourish.

Although it took a while, we were also able to roll out the entire site into Spanish as well! Users are able to toggle between languages on the menu bar at the top of every page.

Featured below is my story team’s piece on Children and Education. We spent 10 days in Colombia with Angelys and Angelo, learning about their struggles adjusting to life in Colombia as young students, and how they were able to fight for their right to education.