Listen First website mockup 1.png
Listen First (UNODC)

2020, Website UX/UI

To combat the global COVID-19 pandemic, UNODC collaborated with Ethan Films to produce and launch a series of parenting resources in the form of scientifically-backed animated videos and science sheets in English, French, and Spanish. In order to house this content online, the Listen First website, which was originally created in 2016, needed a facelift.

Listen First Portfolio1.png

Initial Website Structure

Challenges

The new website was to be built using UNODC’s proprietary CMS, which limited the visual layout to a fixed grid, as well as its overall functionality. If this CMS didn’t have a specific function, such as a customizable video player, then it wasn’t possible to add it to the website. The website was also to be housed inside the UNODC’s main website, which meant there was a possibility visitors may be confused by the numerous navigation buttons.

Listen First Portfolio 2.png

Preliminary Homepage Wireframe

Solutions

The first step to creating this website was to lock down all of the different forms of content that this campaign had to offer, as well as content from the previous version of the website. That included new videos, old videos, science sheets, fact sheets, and a variety of COVID-19 related resources for parents. Different target audiences were then established, and different pages within the website catered to show content that was relevant only to those audiences. 

For example, a page titled Parenting Resources had a collection of the old and new content displayed in a way that it is easy for concerned parents to watch, read, or download whatever piqued their interest. The homepage served as a general navigation hub and news section, where the latest available videos would be highlighted, and videos that were to come are greyed out to alert visitors that they are not yet available to watch.

Listen First Portfolio 3.png

Homepage / Individual Video Page

The website can be viewed here.
Team

UNODC Team

Elizabeth Mattfeld, Giovanna Campello

 

Animated Videos & Science Research

Ethan Films

UX/UI

Yara Hindawi

Listen First Main Website Mockup2.png