Motion Design and Full Stack Development

i24NEWS is an Israeli-based international 24-hour news and current affairs television channel, belonging to the Altice group.
I began working for channel as an Executive Motion Designer in January 2017. My role was to create the visual and graphic content requested by journalists, such as tweets, citations, articles, timelines, and any other publicly visual entities.
After a few months, I was promoted to Motion and Graphic Designer, where I was in charge of i24NEWS' branding across all platforms. Since then, I've presented and completed a number of projects geared for the of the channel and the internal systems.

In February 2020, I was promoted to Project Manager and Full Stack Developer, where I executed and oversaw large-scale projects, such as the creation of the channel's ticker and the creation of the system behind the ticker that allows for additions and removals of text objects, accessible through an editable XML document via a multi-user web page.
My final project with the channel was the creation of a web application through which journalists could send their graphic requests, eradicating the practice of sending requests through e-mail.

To view the projects, click on the buttons below.

MyVoice App | Full Stack Development

The Project

This project consisted in the creation of an efficient platform to allow for reporters to send complete requests to the graphics department easily. This idea came to me after witnessing the lack of effective communication around requests beween the journalists and the graphics deprtment, leading to inefficient use of time and resources.

The Challenge

- The creation of a space for error-free graphic requests
- The short learning curve for the journalists and the graphics department
- The quality control of requests sent
- The creation and development of this platform as the sole full-stack on the team
- The adaptation to the lack of proper financial resources to complete a project of this scale

The Wireframe

In order to effectively visualise the kind of application desired and to create the project plan prior to execution, we began working on wireframing in Figma.

The Style Guide

We began working on the analysis for the color palette and typography. We chose the typography and colours seen below to respect i24NEWS' style guide, while also ensuring accessibility. We also chose to remain with primary colours to ensure a clean and simple look to the application. One of the most important aspects was to ensure that every button had a particular colour, depending on its function.

The Final Design

Following numerous testing cycles and revisions to ensure utmost clarity in design, the design in the link below was the final product.

FIGMA Design | Click here

The Development & Execution

I created a comparative plan to consider the potential coding languages which would be most efficient for this project.
I chose to develop in PHP for its simplicity in the creation a web appliation. I also chose JavaScript to ensure the flow of the web application and to improve the connection between the server and the live aspect of this program.

This project was comprised of 4 parts. This allowed for the creation of each function, while keeping track of all the information inputted into the system.

Part 1: Login Credentials

The first step was to ensure secure login credentials. I developed a function to allow employees to log in through their work email. The employee would receive a security code by email to log in, with every login attempt.

Part 2: Rank System

Each user had a rank number that determines his role within the system. This rank system determined which page the user would see, based on their needs. This ensured easy accessibility and UX.

Part 3: Templates

This system allowed for journalists to request the insertion of various templates, from graphs to images. Given the important difference between each template and its composition, i created a process within the database to register each template individually with its respective form. This also ensured that each template was isolated, in the case that a change should be made to any individual template.

Part 4: Upload System

The upload system was a highly personalized system which enabled the addition and deletion of files in real time. The particularity of this system was to have the ability to upload many elements at the same time onto a request. While this option was the most time-consuming to build from the ground up, it also ensured that there would be no time lost in the creation of the requests due to incomplete or inadequate attachments.

This system works as follows:

Step 1: Journalist Request System

Through this system, the journalist had the possibility to send a request based on a specific template, in accordance to their needs. A form was made available with all the necessary information to fill for each template. Once the request was finalized and sent, the journalist also had the possibility to edit or delete the request. Since this system was created to be updated in real time as the graphics department worked on the requests, the request which was edited by the journalist would change colours to ensure all changes were taken into account, no matter the stage of the request.

Step 2: Request Received by Graphics Department

Once the journalist sent his request, the designer would receive it in real time. Upon review, the designer could start to work on the request by clicking a "In Progress" button, which was also updated by changing colours in real time. The journalist could see which designer began working on his request, and the time. If the designer has any inquiries regardin the request, there was a button to warn the journalist of the inquiry, and the colour would show that the request was put on hold until the inquiry was answered by the journalist.

Step 3: Finalized Request

Once finalized, the designer simply pressed the "Done" button, and the request was placed in the "done" column. The journalist could review the completed request and could also flag any issues to the designer. If a mistake was made, the request would go back to the "Requests" column, where the element to modify would be highlighted. Once the journalist approves the final product, the request goes to the "Complete" column, for archive purposes.

The Final Result

Ticker App | Full Stack Development

This project was the creation of a ticker, which displays all relevant information on live TV on a banner at the bottom of the page. This banner shows a rolling cycle of breaking news, developing stories, updates, titles and weather. In the past, the ticker could only be edited on-site, directly through the servers room. My application allowed for this ticker to be updated securly from anywhere, at any time. This was especially useful during the pandemic, following the work-from-home order, where news still needed to be delivered, and fast.

The Project

The idea was to create a simple webpage with secure user-specific login credentials which would grant access to the system anywhere and at any time. Through my system, users could create a new ticker and add, update or delete text, as well as insert a picture for a promotional tagline, directly in the ticker.

The Challenges

- Ensuring seamless integration with the live broadcast to cater to breaking news and live updates
- Quality control of uploaded information and files
- Identifying the logic behing the code to integrate the users to the live content.
- Working as the sole Full-Stack Developer on the project.

The Plan

Firstly, I analyzed the original ticker to understand its strengths and weaknesses. Since I wanted to create a new ticker, I also wanted to gain insight on the previous developer's logic.
Following my team's initial findings, we concluded that using Python to run the ticker internally through Vizrt, a broadcast system,
would be most effective.
Due to a lack of funding for this project, we were unable to purchase a server to run Python. As a plan B, we began to plan running the ticker locally before developing a PHP application that we could upload to a web hosting service to export all information obtained from journalists onto an XML file.

The Development & Execution

I chose to develop in PHP for its simplicity in the creation a web appliation. I also chose JavaScript to ensure the flow of the web application and to improve the connection between the server and the live aspect of this program. We also worked on the Python code to run the system locally.

The Functions

- The first step was to ensure secure login credentials. I developed a function to allow employees to log in through their work email.
The employee would receive a security code by email to log in, with every login attempt.
- The journalists could add, edit or remove text on the ticker, while also having the possibility to change the display order.
- The administrator could easily add new users to the system with their respective rank, depending on their role.
- The journalist is able to add a promotion indicating their guest on set. An image with the corresponding text and information
could be uploaded to the website.
- The administrator could modify all the settings of the website and could also completely disconnect the ticker
from its live environment, if need be.

The Result

Due to privacy regulations, I am unable to preview of the dashbaord for the finished product. However, the ticker can be seen below during a live broadcast show:

Motion & Graphic Design

I created a number of motion design videos, depending on the needs of the channel. The videos below were created using After Effects.

The Templates

Upon starting at i24NEWS in 2017, each video was made from start to finish, per the requests. When i witnessed this inefficiency of labor, time and resources, i decided to create entirely editable templates that the graphics department can utilize to make videos faster and to create consistency in the content produced, with little variability from one employee to another.

Each template was designed to be entirely editable in Adobe After Effects. In addition, i also added expression scripts to each template to facilitate the workload of the in-house graphic designer. After the integration of my template system, the time needed to create videos went from 25 minutes per video to 7 minutes per video. This system improved team's efficiency and the content produced greatly.