cyberus header.png

CYBERUS

The Anti-Bully Chrome Extension designed to create a safe web environment for children.

ElleHacks Winning Project

Telus Challenge, UI/UX

PROBLEM

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.

Roles

Research, Ideation, UI/UX, Visuals & Illustrations, Prototyping,

Motion Graphics

Tools

Figma, Illustrator,

Photoshop, Primiere Pro,

Adobe After Effects

Duration

Jan 31st - Feb 2nd

Ellehacks 2020

Apprx 30hrs

Team

Zainab Alavi 

Aninda Poddar

Katie Tran

DESIGN CHALLENGE

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.

SOLUTION

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.

cyberus cover.png
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.

KEY FEATURES

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. 

CYBERUS EXTENSION

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. 

THE PROCESS

RESEARCH

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

PROCESS

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.

DESIGN PROCESS

cyberusinsta.png
VISUAL DESIGN

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. 

ILLUSTRATIONS

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.

instacyberus.png
personwhiteicon.png
personicon.png
settinggear.png
cyberusloginsolo.jpg
ICON DESIGNS

These are the icon designs we've made for the website. 

COLOUR PALLETS

#467AE

#A9D47F

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. 

Wireframe 1
Wireframe 1

press to zoom
Wireframe 2
Wireframe 2

press to zoom
Wireframe 1
Wireframe 1

press to zoom
1/2
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!

Ellehacks Team :)
Ellehacks Team :)

press to zoom
Ellehacks
Ellehacks

press to zoom
Ellehacks Team :)
Ellehacks Team :)

press to zoom
1/2