Premise
An interactive story that lets people experience how easy it is to trust a system and provide your confidential information.
Synopsis
The world becomes more and more digital. However, one downside is that it also causes the rise of cybercrime (especially phishing). Phishing is the act of sending a false email to a user pretending to be a reliable organization to convince the user to give his/her confidential information. In order to make people aware of phishing and teach them not to give their personal information for no reason, I created an interactive story. The story shows them that not every system is reliable and that they first need to make sure that it is a trusted system.
Background
The growth in cybercrime is mainly due to an increase in phishing (NU.nl, 2020), whereas 35% of the population suffer from this crime (Centraal Bureau voor de Statistiek, 2019). Phishing could be described as “The act of sending an email to a user falsely claiming to be an established legitimate enterprise in an attempt to scam the user into surrendering private information that will be used for identity theft” (Suriya et al., 2009, p. 196).
Based on this research, I wanted to take the direction of creating awareness, because phishing attacks have been so successful due to the lack of awareness about phishing attacks (Gupta et al., 2016, p. 3647). My lecturer suggested to do research into how people learn and how that could reduce phishing. “For example, once you are conducting a certain action which results in a negative feeling, then in the future you are trying to avoid that action.” It reminded me that learning is not only about literally learning some theory but is also about learning through experience. That is the reason why I did some research into the feelings of a victim of phishing in order to create an experience for others which let them experience that feeling.
Feelings of a victim (Slachtofferhulp, z.d.):
- Shame: how is it possible that they trapped in this phishing mail?
- Blame: they think they are stupid
- They hope that the bank or some other organization can compensate for the money that they lost
The interesting thing is that these feelings are both a result of the thought, ‘Why did I trust the mail as a reliable mail?’.
Trust in the cybersecurity system relates to how the individual believes they are safeguarded by protective technologies from a cyber-attack. Trust results in negative consequences as individuals maintain trust unconditionally and over and above evidence to the contrary (Pienta et al., 2020). In this case, people rely heavily on the system (Pienta et al., 2020).
Therefore my focus is ‘how a tool can show people that a trusted-looking system does not have to be trusted.’
To get more insight into phishing, I had several interviews with some experts in phishing. They told me about the indicators of a phishing mail and the current methods to prevent phishing. Besides, one of the interviewees inspired me by giving the idea to develop a story which tells a story of how a phishing attack is committed (from a phishers perspective).
Design process
FIRST ITERATION – ADOBE XD
The first prototype was created in Adobe XD in order to see if the idea could work. The idea is an interactive story where the user gives their confidential information without paying attention to it. Therefore, the story has to be reliable and user-friendly in order to convince the person to give their confidential information. Once the person gives their confidential information, the system changes to an unreliable system to let people experience the difference between trust and untrust in order to remind them that something looks not like what it seems.
I wanted to create a story about a hacker who would like to steal your personal information. During the story, the main character changes from trusted (a researcher) to untrusted (a criminal). However, the character first has to gain trust in order to get private information, which could take some time. Therefore, it would be better to use an existing organization which already gained some trust. This could be in the form of a survey, for instance.
In order to visualize the first idea, a prototype was developed.
https://xd.adobe.com/view/d52cb145-98d0-4219-6fc7-f966cebb5844-a31d/
Findings after the first test:
Positive points
- A good concept, pretty scary when you don’t know what to expect
- The distinction between trust and untrust is very clear
- The first part is very simple, which makes it reliable
- The fact that people can fill in their information to win a voucher is a good one because I see it often happen at my work.
Critical points
The only thing is that the trusted part really needs to be an organization that is trusted and credible. For example, a bank will not send a survey and ask for your bank information.
SECOND ITERATION – PHASER
During this stage, I started with the technical prototype and I applied the feedback to the concept.
> I changed the organization of the survey, since one of the test participants told me that it is unusual to get a survey from the bank. Therefore I changed it to the Consumentenbond, because they come up for the needs of a consumer and therefore it might be possible that they ask to fill in a survey.

> The survey has to be a completely different subject than the actual point in order to get people distracted (for example the dentist).

I chose to use HTML and CSS because it fits the aim of the first part (creating a survey). Surveys are often filled in on a web browser and therefore the technology makes sense. For the second part, I chose to work with Phaser since I am interested in the technology, and the concept needs a technology that can make visuals interactive.
First I did some experiments with Phaser and after that I created the second prototype.
[aesop_video src=”youtube” id=”mThQjdy3vQs” align=”center” disable_for_mobile=”on” loop=”on” controls=”on” mute=”off” autoplay=”off” viewstart=”off” viewend=”off” show_subtitles=”off” revealfx=”off” overlay_revealfx=”off”]
[aesop_video src=”youtube” id=”3nToGilb84Q” align=”center” disable_for_mobile=”on” loop=”on” controls=”on” mute=”off” autoplay=”off” viewstart=”off” viewend=”off” show_subtitles=”off” revealfx=”off” overlay_revealfx=”off”]



When the second prototype was finished, I realized two things:
> The story has to show people that websites actually save information of their visitors (to trigger the blame/shame feeling). Therefore, I came up with the idea to create a personalized story by using the information that they filled in in the survey, such as name and phone number. LocalStorage (a principle in Javascript) could be used to save information in key-value pairs.
> The design doesn’t show fear. Therefore, I tried to change the current colors to a darker color scheme and I experimented with the main character.


Findings after the second test:
Positive points
- You don’t expect the difference in the system when you fill in the survey
- The story is clear, I like the personalized part
- It is good to use the information you filled in in the survey, and it shows that information is saved on the internet
Critical points
- I would add the black screen to the middle of the story; otherwise it doesn’t feel real
- Maybe add pop-up errors to create an unexpected situation
- I like to see the images dynamic
THIRD ITERATION – CSS ANIMATIONS
During this stage, I applied the feedback to the concept, and based on the feedback, I decided to change my technology.
> I decided to move the ‘error screen’ to the middle of the page and I added a white flickering criminal to create fear.
> I switched the technology to CSS animations because animations keep a person out-of-control and besides it helps to create unexpected things.
I decided to change the color scheme again to a darker one to create a consistent style and to make use of shadows and black/white to create fear.

Findings after the third test:
Positive points
- The idea is clear and the animations are valuable
- “It is freaking me out”
- The form is a good option because when you enter a site, you just give your information, because it feels like you have to do it
Critical points
- I would create multiple error statements (however, some people say one error statement because otherwise they will click away from the page)
Final version
https://github.com/MerelHu/stateofthearttechnology.git
[aesop_video src=”youtube” id=”L_J6Je6L1Ks” align=”center” disable_for_mobile=”on” loop=”on” controls=”on” mute=”off” autoplay=”off” viewstart=”off” viewend=”off” show_subtitles=”off” revealfx=”off” overlay_revealfx=”off”]
Conclusion
Based on the tests with participants, it might be concluded that the idea gives the ‘blame’ and ‘shame’ feeling. It depends on the person if the concept works, because some people are just clicking the page away. However, everybody got a bit of fear due to the fact that they were out of control and some unexpected things happened.
In the future, certain animations which support the story (for example about what a phisher actually does) could be integrated in the story. Besides, sound could be included to create a more engaging experience.
References
Centraal Bureau voor de Statistiek. (2019, 31 oktober). Bezorgdheid over internetveiligheid maakt mensen alert. https://www.cbs.nl/nl-nl/nieuws/2019/44/bezorgdheid-over-internetveiligheid-maakt-mensen-alert#:%7E:text=Vooral%20last%20van%20phishing%20en,valse%20website%20lokten%20(phishing).
Gupta, B. B., Tewari, A., Jain, A. K., & Agrawal, D. P. (2016). Fighting against phishing attacks: state of the art and future challenges. Neural Computing and Applications, 28(12), 3629–3654. https://doi.org/10.1007/s00521-016-2275-y
NU.nl. (2020, 27 januari). Fraudehelpdesk: Flink meer fraudemeldingen in 2019, grote stijging phishing. NU – Het laatste nieuws het eerst op NU.nl. https://www.nu.nl/tech/6026617/fraudehelpdesk-flink-meer-fraudemeldingen-in-2019-grote-stijging-phishing.html#:%7E:text=Fraudehelpdesk%3A%20Flink%20meer%20fraudemeldingen%20in%202019%2C%20grote%20stijging%20phishing,-27%20januari%202020&text=Bij%20de%20Fraudehelpdesk%20is%20het,ruim%2031.000%20meldingen%20in%202019.&text=Onder%20cybercrime%20valt%20onder%20meer%20phishing%20en%20oplichting%20via%20nephelpdesks.
Pienta, D., Tams, S., & Thatcher, J. (2020). Can Trust be Trusted in Cybersecurity? Proceedings of the 53rd Hawaii International Conference on System Sciences, 4264–4273. https://doi.org/10.24251/hicss.2020.522
Slachtofferhulp. (z.d.). Fraude | Slachtofferhulp Community. Geraadpleegd op 20 maart 2021, van https://community.slachtofferhulp.nl/fraude
Suriya, R., Saravanan, K., & Thangavelu, A. (2009). An integrated approach to detect phishing mail attacks. Proceedings of the 2nd international conference on Security of information and networks – SIN ’09, 193–199. https://doi.org/10.1145/1626195.1626244