cyberus header.png

CYBERUS

Creating a safer web experience 

THE PROBLEM

Cyberbullying negatively affects mental health, within younger generations - How can we design a digital product that protects children from cyberbullying?

At ElleHacks 2020, we were presented with an array of many challenges to base our product on. A notion that stood out to me, was how prevalent cyberbullying was. Children today, essentially live on the internet being born into the digital age. And while being native to the internet has perks of its own, children are just as exposed to its cons, one of them being cyberbullying. Through research, we came to conclude that cyberbullying is especially common within younger generations due to the nature of their lifestyle putting their mental health at risk. Cyberus is a product that advocates for mental health awareness in this digital age as an anti-bullying chrome extension and campaign.  

HIGH LEVEL TIMELINE

36 Hours

January 31st, 2020 -

February 2nd 2020

MAKE OF THE TEAM

Zainab Alavi (Designer)

Janet He (Designer)

Anindha Poddar (Back-end Developer)

Katie Tran (Front-end developer)

KEY GOAL

Create a product to help users from cyberbullying 

RESEARCH AND PROCESS

From Brainstorming to many rounds of iterations, research and process are the backbones of the product

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.

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

THE SOLUTION 

Cyberus - the anti-bullying chrome extension

We created Cyberus. A Google Chrome extension that when enables blocks out negative comments on the internet. When it is 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, will not be visible. This allows for the child to not be able to see the hate comment and thus not have their mental health jeopardized.

I'm a title. ​Click here to edit me.

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.

BREAKING DOWM THE PROCESS 

Creating and implementing a viable product requires clear communication and transparency with design decisions

In all my previous design experience, I never had to create a product that would actually be programmed and implemented in real life. Cyberus meant that I had to be fully transparent with the programmers with any design decision Janet and I had to make, from the colours to the sizing.

 

The main challenge we faced as a team, was 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. It was fun being surrounded by individuals fueled with the same passion and helped tremendously in creating a successful product.

STYLE GUIDE 

Creating and implementing a viable product requires clear communication and transparency with design decisions

Creating a style guide and branding guidelines was crucial as it allowed for consistency and reliability. By creating a fun, bold and trustworthy style guide, we were able to use these elements throughout Cyberus from the application and further into the marketing assets as well. 

Logo

cyberus logo.webp

Meet Cyberus. He's the friendliest cyborg there is, and he's here to fight off cyberbullying. 

Icons

personicon.webp
personwhiteicon.webp
cyberusloginsolo.webp
settinggear.webp

Illustration

instacyberus.webp

We 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 we've made to promote the extension.

Colour

#6467AE

#A9D47F

A simple two-tone colour palette that is equal parts bold yet comforting - Purple being the main colour and green for secondary aspects and highlighting. 

Using our colour pallete and illustrations, we created these simple and friendly icons to be used in the Chrome Extension

PROMOTIONAL 

VIDEO

A 30 second advertisement video to highlight 

In all my previous design experience, I never had to create a product that would actually be programmed and implemented in real life. Cyberus meant that I had to be fully transparent with the programmers with any design decision Janet and I had to make, from the colours to the sizing.

 

WIREFRAMES

Creating and implementing a viable product requires clear communication and transparency with design decisions

In all my previous design experience, I never had to create a product that would actually be programmed and implemented in real life. Cyberus meant that I had to be fully transparent with the programmers with any design decision Janet and I had to make, from the colours to the sizing.

 

LAUNCHING  CYBERUS

An enlightening and empowering onboarding experience for both children and parents alike

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.

CHROME EXTENSION IN ACTION

A functioning and effective chrome extension to hide hateful comments on the internet

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. 

INSTAGRAM CAMPAIGN IN ACTION

A functioning and effective chrome extension to hide hateful comments on the internet

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. 

TITLE OF THE CALLOUT BLOCK

LESSONS LEARNED

Team work makes the dream work - literally

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. It was fun being surrounded by individuals fueled with the same passion and helped tremendously in creating a successful product.

I'd like to thank York University for hosting such a great Hackathon and providing this space for women in tech. As a woman in technology, I feel empowered and excited for the future and can't wait to attend more hackathons and continue to create products for the better of the future.

IMG_7032_edited.jpg
IMG_6244.JPG

Like what you see?

Let's chat.