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

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:

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.