cyberus header.png
Cyberus

Designing a chrome extension and campaign to combat cyberbullying.

This product won First Place at ElleHacks 2020

Role
Type and Timeline
Tools used
Team

Research 

Ideation 

UI/UX

Illustration

Graphic Design

UI/UX

Mental Health

Jan 31 - Feb 2 2020

(36 Hours)

Zainab Alavi

Janet He

Aninda Poddar

Katie Tran

Figma

Adobe Illustrator

Adobe AfterEffects

Problem

How can we use technology to create a safer experience for children online?

Cyberbullying is prevalent 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.

Solution
Cyberbullying is prevalent 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. 
 
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.

We went through 4 stages to achieve the final product:
 
                                       
                                          1) Research          2) Design          3) Ideation          4) Execution



 
Research

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.

Some key research insights we discovered were:

  • 1 in 5 young adults face cyberbullying

  • 41% of young internet users who experienced cyberbullying report emotional, psychological or mental health issues

  • 47% of 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

 
Design Challenge

​Challenge: 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

Design
Style Guide

Creating and implementing a viable product requires clear communication and transparency with design decisions. Creating a style guide and branding guidelines were 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. 

cyberus logo.webp
Logo

Meet Cyberus. He's the friendliest cyborg

there is, and he's here to fight off cyberbullying

Illustrations
instacyberus.webp

We decided to make other illustrations that

represent the internet, web, and technology. 

 

#6467AE

#A9D47F

Colour

A simple two-tone colour palette that is

equal parts bold yet comforting.

Typography

Rubik is a bold, comforting and clean rounded

sans-serif font that provides a reassuring yet friendly

feeling for the user perfect for children and adults.

Headers - Rubik Light - 30pt

Paragraph - Rubik light

 
Ideation

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.

Wireframes

To begin the process of turning our research into a plausible product, we took our Systems Requirments chart, personas and scenarios and combined them to come up with paths users would take when using the app, we combined all the possible features into a map to see where the features would be throughout the app. 

cyberus logo.webp
Iconography

Using our colour pallet and illustrations, we created these

simple and friendly icons to be used in the Chrome Extension. 

Execution

After creating all the high-fidelity mockups and assets, I handed we handed off the design to the developers who would implement the front-end through HTML and CSS, and the Backend using JSON and Google Cloud API. 

Launching Cyberus 

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.

 
Cyberus in action

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.

Instagram Campaign

For our pitch, we decided to include a Cyberus advertisement. Our marketing strategy includes #TelCyberus to raise awareness of anti-bullying and mental health. The Instagram campaign 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 Onboard.png
 
Lessons learned

Teamwork 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 and winning first place for Telus's Challenge was definitely a cherry on top.

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.

IMG_7032_edited.jpg
IMG_6244.JPG