Cyber-Girls

• 

  Figma Design

Inspiration

As new programmers ourselves, we wanted to think about a way that would've helped our younger selves get more invested in computer science in a fun and engaging yet non-overwhelming way. Additionally, we understood the current problem of how the media portrays the field of cybersecurity and wanted to demystify it for younger girls to inspire their passion early on. Drawing from the name Cyber-Girl and its heroic ring to the wording, as well as our personal preferences for stories, visual art, and active learning, we came up with the idea of creating a website that teaches younger girls in a story-like format.

What it does

Cyber-Girls is a website that contains a tutorial-like program that a user can interact with through instructions given by a female mentor and accomplish missions in cybersecurity-related topics including email phishing, identity theft, and website cookies. Once you click on the Portal to CyberWorld, you begin the tutorial and complete the missions by entering the correct code and defeating the cybersecurity threat, Vector.

How we built it

Once we decided on the storyline and characters, we implemented our designs into a prototype in Figma, and then we converted the design into a website writing in HTML & CSS & Javascript.

Challenges we ran into

Time management was a bit of a challenge in developing the designs and then having enough time to convert the prototype into an actual website. There was also difficulty in formatting when it comes to fonts not being the same from our designs to the fonts available in the website and also adding icons into the footer of the index page and subsequent pages.

Accomplishments that we're proud of

Our team's collaboration this weekend was very smooth. We were able to meet up and develop our ideas and vision for our idea. We tried not to focus on the small details and look at the big picture goal of our design and implement our website focused on functionality first.

What we learned

We learned many aspects of UI/UX design as well as developing more experience in web development through new attributes in HTML, CSS, & Javascript. We also learned a few technical terms in cybersecurity and wrote the tutorial design as a Java/Python mix using python variables and Java syntax.

What's next for Cyber-Girls

For the future, there is a lot of potential for expansion of a multiplayer mode and to expand users to not just target young pre-teen girls but also include high-school and college girls as the mentor figure in our tutorials and simulation. We can do this through the implementation of a login/user sign-up system and recording of their progress and have communication through chat from older mentors to younger learners.

Built With

• css
• figma
• html
• javascript
• qoom