MyVoice App | Full Stack Development
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 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
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.
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
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 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.
- 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.
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
connection between the server and the live aspect of this program. We also worked on the Python code to run the system locally.
- 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.
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.
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.