The Anti-Bully Chrome Extension designed to create a safe web environment for children.
ElleHacks Winning Project
Telus Challenge, UI/UX
Cyberbullying negatively affects mental health, within younger generations. From our research, we came to conclude that cyberbullying is especially common within younger generations due to the nature of their lifestyle (being born into the digital age), putting their mental health at risk.
Research, Ideation, UI/UX, Visuals & Illustrations, Prototyping,
Photoshop, Primiere Pro,
Adobe After Effects
Jan 31st - Feb 2nd
The main challenge we face in this extension is the integration of front-end and back-end development. I learned a lot throughout this hackathon. I learned that when it comes to designing the UI/UX of the website, it is extremely important to communicate with the front and back end so that you know what is possible to code and what isn't in terms of the UI/UX. This was a first-time experience for all of us in this team at a hackathon which was equally exciting and challenging. It was fun being surrounded by individuals fueled with the same passion and helped tremendously in creating a successful product.
How can we use technology and design to create a safer space for youth on the internet? We created Cyberus. A Google Chrome extension that when enables blocks out negative comments on the internet. E.g When enabled while a child is browsing, any hateful comments that might be on their Facebook post, Youtube video or even on other people's platforms, they will not be able to see it. This allows for the child to not be able to see the hate comment and thus not have their mental health jeopardized.
The Anti-Bully Chrome Extension
Cyberus is a chrome extension that hides hateful comments and images to help protect youth on the internet by creating a safer web for them to browse through; thus supporting their mental health and helping to end cyberbullying. Cyberus aims to end cyberbullying and raise awareness of mental health through our marketing campaign #TelCyberus and the use of the chrome extension.
CYBERUS INSTAGRAM AD
For our pitch, we decided to include a Cyberus AD. Our marketing strategy includes the #TelCyberus to raise awareness of anti-bullying and mental health. The instagram AD would also lead you to the Telus website for people who want to donate to the cause. The AD also promotes the extension which creates a safer environment for children who are exposed to the internet.
In order to download the extension, you have to make an account. After you download the extension, it would appear on the top right of Google Chrome along with your other extensions. Once you click on the Cyberus Logo, a drop down menu would pop-up, allowing you to select which domains you would like to turn off the hateful/rude comments. On the Cyberus website, it gives users information on cyberbullying/mental health and what you can do to help raise awareness.
EXTENSION IN ACTION
After the back-end and front-end of the extension was coded, we were able to make the extension work on Youtube's domain. Here is a demo on the Cyberus extension in action. In the video, there is a hateful comment that says "stupid pig". After the user turns on the Cyberus extension and refreshes the screen, the hateful comment is blocked on Youtube.
For our Hackathon pitch we conducted many facts from our research to draw our viewers attention.
Some facts include:
1 in 5 young adults face cyberbullying
41% young internet users who experienced cyberbullying report emotional, psychological or mental health issues
47% Young people ages 11 and under experience nasty comments or message exchange on social media
54% of teens have witnessed bullying online (29% Youtube)
68% of children that have faced mental health problems have dealt with cyberbullying
71% of the young generation say they are concerned about cyberbullying
Our process was fairly simple once we had established the problem we wanted to solve, which was cyberbullying within youth. After research, we developed our goals for each person to accomplish whilst creating the app. Katie worked on Front-end, Aninda worked on the back-end while Zainab and myself worked on the User-Experience and Graphic Design of the app. Through constant communication and collaboration, we were able to create a seamless google chrome extension that truly helps the youth of today. Through research, wireframes, iterations and endless executions, this was possible.
We started off the project with illustrations and creating a logo for Cyberus. Since Telus' colour scheme is green and purple, we made sure that we stuck with their main colours thoughout the illustrations and UI design phase.
Zainab and I decided to make other illustrations that represent the internet/web/technology. We used these illustrations throughout the User interface design, the advertisements, and the motion graphic video.
These are the icon designs we've made for the website.
WIREFRAME & PROTOTYPING
After we finished the illustrations, I began designing what the Cyberus extension would look like. I quickly planned and designed the user interface for the Cyberus website so that the coders on my team could begin coding the extension. After i finished the User interface design for the extension and website, I started mapping out the user scenarios on what the Cyberus AD would look like on the Instragram feed and Instragram story. I also planned out and created a visual prompt for the website that displays facts on cyberbully and mental health.
CHALLENGES / REFLECTION
The main challenge we face in this extension is the integration of front-end and back-end development. I learned a lot throughout this hackathon. I learned that when it comes to designing the UI/UX of the website, it is extremely important to communicate with the front and back end so that you know what is possible to code and what isn't in terms of the UI/UX. This was a first-time experience for all of us in this team at the hackathon which was equally exciting and challenging. Being surrounded by individuals fueled with the same passion, helped tremendously in creating a successful product. Teamwork makes the dreamwork!