Case study: “bits” how to teach cybersecurity to Muggles

Esther Calaco
Bootcamp
Published in
8 min readNov 6, 2022

“Once upon a time there was a society more and more technified, hyper-connected but unaware of the cybersecurity risks stalking them.”

Chech the Behance shorter version here.

Introductory image with the title. The author’s name: Esther Calaco Martín. Role as a UX/UI Product Designer. The length of the project: 12 weeks and the tools used: Figma, Illustrator, Photoshop, Miro and Notion

This project started as a result of the amount of news, tweets, and pieces of information related to the increasing number of cyber attacks that affect not only businesses but common people, all day everyday, and why we all behave like there’s nothing to lose… until we lose something.

We take action too late, millions are lost, private data stolen…

Which and where is the problem and what can we do to solve it? Let’s start by following the Design Thinking steps.

DISCOVERY. Let’s do some research and understanding.

What’s going on with the cybersecurity issue? What does the datum tell us?

The first step was my secondary research, some desk-research and some netnography, what did I find? The most repeated concern was that human error is responsible for 95% of data breaches and the average cost stands at more than $4.24 million (IBM Cyber Security Intelligence Index Report). What else? Ok, these will give you the chills:

  • According to Forbes from 2005 to 2018 there were 3,854 data breaches, six months into 2019 there were recorded 3,800.
  • Google says that phishing mails growth has been 600% compared to previous year.
  • And Cisco reveals that 61% of business with less than 1,000 employees have been attacked.

What do we do about it? Well…

  • Varonis asserts that 65% of corporations have over 500 employees that have never changed a password.
  • Verizon also warns us about the 30% of users that open phishing mails and 12% also the infected link or attachment.
  • Last but not least… Accenture says that 69% of businesses find the cost of long term cybersecurity unsustainable.

I should point out that these were just some of the most striking data I found, there were way more, all of them in the same vein.

Despite everything, I run a survey and an interview, some primary research to compare with, these were the results.

SURVEY
The goal of this survey was to find out the knowledge level and behaviour towards cybersecurity.

How do people manage their digital life? Social networks, personal data, passwords, security measures at work and for their private life. Do they know about the risks and threats that surround them?

70 people answered my questions, the average respondent was a millennial that had little to none cybersecurity knowledge, 79.4% did not receive any training at work or wasn’t enough. They were not familiar with concepts like malware, ransomware, phishing or botnet.

Their security measures leave much to be desired: Almost 33% of them never change their passwords, and their actions go from choosing pets or family members’ names and birthdays (33%) to using the same for different apps or subscriptions (34%); As well as using free WiFis (52%), sharing too much personal info on social networks (33.3%) or sending sensitive information like passwords or bank accounts through SMS or WhatsApp (20.4%).

INTERVIEW
No names. No recordings. Just a nice and insightful conversation with someone who worked for a tech company. The aim was to know how companies manage their security, and I just want to give three facts:

  • The company used to have ALL their passwords in a text file saved in a public Drive folder called “Passwords”.
  • The CEO wanted all the files and info to be send by WhatsApp messages.
  • They didn’t have an IT Team.

This is not a horror story, although it may look like one, this was the final blow that helped me draft the problem and the question:

“There’s no security culture embedded in our corporations and everyday behaviour”

so…

”How might we educate about cybersecurity and embed it in our culture to have safer experiences in the upcoming digital world?”

I did a little bit of extra research, a benchmark, re-read my notes and got some insights:

  • 💡 Not even coders care enough about security, due to lack of confidence, leadership and proper workflow. **(86% of coders do not view application security as a top priority according to GitHub)
  • 💡 Benchmark analysis uncovered that companies offer (insufficient) courses as bait for their security products.
  • 💡 Companies only care after the attack happens.
  • 💡 Everybody needs to be prepared, but not everybody is an engineer, tech savvy or are able to be updated by themselves, we cannot rely solely on IT Teams to guarantee security.

TARGET

With all of the above and knowing that:

  • 35.5% of my respondents from 18 to 40 years old have suffered some kind of cyber attack.
  • The main victims of phishing are people from 18 to 29 years old (ETH Zurich)
  • Every two seconds an ID is targeted and stolen, and the victims are 29 to 40 years old (TechJury)

How can we combine the urge to educate people and companies? Easy, targeting the people that work or will do for those companies, since the ones making changes are the individuals, not the corporations.

The high unemployment rate and the big number of candidates point out the need of differentiating yourself from others as one of the keys to achieve a better job or a promotion (Empresariados)

So… We seek people from 20 to 40 yo, workers or looking for a job.

HYPOTHESIS

Al last, we can sum up all the previous work in this hypothesis that will lead the work during the next stages:

🔥 “If we offer high value and long term cybersecurity training and mentorship to people, then, chances to embed cybersecurity culture in society and companies will grow, because everybody -muggles included- will have a way to prove they can achieve the proper knowledge”.

STRATEGY & IDEATION. Let’s get the party started!

That is, let’s design the best digital product we can to bring high quality cybersecurity knowledge to ordinary people, thus to companies, thus to society.

First step, our Users and their Journeys (AS IS) so we can get to know them, their pains, gains and goals a little better.

Both are my extreme users, that is, the most distant profiles that embrace the whole spectrum of users.

👩🏻 Helena, a graphic design student that wants to make an appealing CV to increase the chances of getting a good job.

She knows that one of the best ways to stand out is getting certifications. So she’s looking for resources and training, not just graphic design related, that will bring her CV to the top of the pile.

User persona and Journey of HELENA. She wants her CV to stand out. She’s afraid about cybersecurity being too hard for her but learning would be a big boost to her career and selfsteem. Her journey is about searching for some kind of trainin in the Internet and finding recommendations about security training for common people, how to select, try and consider what to do about it.
Portrait image created by AI DALL-E 2

🧑🏻‍🦱 Darío has been working in software and tech companies for the last 13 years.

He suspects that his remarks to improve the company’s security performance aren’t taking into consideration because he lacks proper training. He wants to be heard, and, hopefully, gain some recognition and thrive in his job, or maybe find a better one.

User persona and Journey of DARÍO. He wants to be heard at work, he’s afraid no one cares about he opinion because he lacks training. He has had bad experiences with cybersecurity training because it has always been insufficient. He’s also looking for, comparing and thinking about trying the courses the profesional social networks offer.
Portrait image created by AI DALL-E 2

Thanks to my Users, the Stakeholders and all the previous work I could define…

MISSION
We want to provide high quality and custom-made cybersecurity training shaped as “small and affordable knowledge bits” along with long-term support system.
Our target are people that want to prove their acquired skills and add an extra value to their CV.

VISION
We want to become the teaching and mentorship service everyone will look at when looking for specific and highly regarded cybersecurity training.

VALUES

  • We are committed workers
  • Tech innovative and updated knowledge
  • Skilled professionals

HOW DO WE WANT OUR BUSINES TO BE?
Thanks to a couple of ideation techniques, Lotus Blossom and Affinity Map and a MoSCoW canvas…

Ideation techniques. A pic with a Miro Canvas with the Lotus Blossom and Affinity map, all full of post its with ideas that help me knew what I wanted and is described in the next paragraph.

… we knew what we wanted:

  • A B2C digital platform where ordinary people can learn about the most important topics related to cybersecurity.
  • It’s gonna be a hybrid: “Pay just for what you need” (single bit or combinations) or pay for a “subscription” with access to premium options and long term support.
  • Syllabus will be custom-made in order to allow a wide range of users to choose from the basic simple topics to the most complicated. Therefore personalised, scalable and clustered.
  • Badges and rewards will reflect their achievements easily on Professional Social Networks.
UNIQUE VALUE PROPOSITION: “We teach how to navigate safely the upcoming digital world to ordinary people by custom-made and affordable training bits to add extra value to their curriculums and the companies they want to work for or already do”

CONCEPTUALIZATION

Well… First thing first… We made an inventory, but excels are boring so we use it to decide how our digital product will be organized. Here are just the main sections, this is the whole map.

The “short” sitemap. It has five categories: Ongoing lessons, finished lessons, Favourites, Catalogue and BITS Community (the premium option)

Next I wanted a closer look to our User Journey, so I designed the step by step path until the goal is reached: To buy a bundle and star studying it. First, a Taskflow and second, a Flowchart.

A Taskflow where we see the happy path of our user when buying a bundle and the longer version in the Flowchart, where he or she will face all the steps and decisiond of the process: Searching the catalogue, finding what they want or not, buying it, adding it to their collection, start the lessons, resume older ones or leave the app

With all of this done:

…an organized hierarchy for our product.
…a predefined task for our user…
…that revealed the main purpose of our product
…the path to achieve it.

What’s missing?

UI DESIGN!!

To settle on the idea I had to draw and redraw, design in MIRO and redesign again to get a better system and choose the best future navigation and interaction for my users. I concluded that if learning is the reason they choose us, that will be the first screen and minimalism is a must.

These are MI-FI WIREFRAMES

Wireframes of five screens with the different sections and a brief description of each content: settings, Community buttons, profile info, where to find the CTA to buy, bits and bundles, shops, favorites, etc.

BRANDING
Logo, colours and typography,
How did I choose and design them?

I’m just gonna talk about the main colours, of course there are also gradient combinations, semantic and neutral hues, but focusing on the important ones I picked up:

  • Blue and violet: seriousness, most common colours in the industry, trust.
  • Pink and Yellow: fun, big contrast, young and with some neon soul for the futuristic-Blade Runner looks.
The colours mentioned before with their names and web codes

The typography, Montserrat came and stayed. It’s a readable font, with many weight options, simple but with nice identity. These are the technical measurement for the typography:

  • Base 16px 1rem
  • Line Height (LH) x1.3
  • Major Third x1.250 (aprox)
  • Paragraph spacing based on 8pt grid
Examples of the typography sizes and weights, line heights and spacings.

The product is called bits, and eight bits are a byte… And we sell small knowledge bits… Besides, we want everything plain and simple… Here the logo:

A pic with the logo, a blue circle with a white circle iside made with a long line and eight small points. One has the word bits written and othe just a B. It show colour and size alternatives.

ENJOY THE PROTOTYPE HERE!!!

BIBLIOGRAPHY

--

--

Esther Calaco
Bootcamp
Writer for

Hi! I’m an experienced graphic designer & illustrator and a brand new UX/UI product designer trying to find new opportunities.