Identifying and Tackling Manipulated Media

A course dedicated to truth seekers.

Reuters' course tackles the issue of spreading inaccurate and misleading information by educating users on manipulated media detection. In this project, my role at Ronik involved multiple aspects. As a motion designer, I created the header and supporting animations for the course. I also contributed to UI development, ensuring its adaptability to mobile and tablet devices. Additionally, I performed quality assurance for Reuters' development team.

Role: Motion & UI Designer, QA

Timeline: October 2019 - December 2019

Collaborators: Ronik Design & Reuters, in partnership with Facebook Journalism

Awards: Webby Award - Website: News & Politics

ezgif.com-gif-maker-3

How can interaction and motion design visually represent and bring awareness to a phenomenon that is designed to be unnoticed?

MOTION

I was given a lot of creative freedom for these animations which allowed me to explore many abstract solutions. The only requirement for the animations being to maintain the brand established for visual consistency.

Header Animations

These animations were created, edited, and exported in Cinem 4D and Adobe After Effects.

ezgif.com-gif-maker-5
ezgif.com-gif-maker-6

Supporting Imagery

Short animations were created to further solidify the messaging of the course. I was given the text and a sketch to translate into motion graphics. These animations were made and exported in After Effects using the plugin Lottie.

ezgif.com-gif-maker-7

UI DESIGN

Low Fidelity to High Fidelity UI

When I wasn't working on motion graphics, I hopped to translating the LoFi wireframes to HiFi by implementing the brand elements and copy.

manipbrowser

Resposiveness

Designed the mobile and tablet UI from the desktop lofi and hifi wireframes for the website's responsivity.

PixelBook-Go-and-Pixel-4-XL

DESIGN X ENGINEERING COLLABORATION

Quality Assurance

Alongside Reuter's engineering team, I swept the site in develop to track any bugs or visual inconsistencies. Issues were tracked on a spreadsheet where I marked the bug, its priority, an image, and any other supporting information.

The course is offered in 16 laguages. My Arabic knowledge allowed me to assist in tracking formatting bugs when taking the course in Arabic.