#HACKED: Syria’s Electronic Armies – through the eyes of its makers

Launched on the 4th of October by Al Jazeera,  #Hacked is a web app that invites users to investigative a deadly cyber war in Syria, while the clock is ticking. Through mobile interviews, internet searches, and investigations, users need to un-tangle a network of cyber criminals without having their own phones hacked. Designed for mobile and tablets, but also playable on your computer, you will find at https://syhacked.com.

This is the second interactive piece done by Juliana Ruhfus, senior reporter for Al Jazeera’s “People & Power” investigative and current affairs strand, in the last three years. It demonstrates Al Jazeera’s interest in exploring new digital forms of communication (see Pirate Fishing, Palestine Remix and Life on Hold, without forgetting Al Jazeera Interactive, and their AJ+ news app), and shows Ruhfus’ determination to  communicate to a young audience the secrets of a job she loves: investigative journalism. It looks surprisingly different from her previous interactive project – Pirate Fishing – an online game that explored Sierra Leone’s illegal fishing trade – and builds on what she learned from that project about what young people want and what the media can afford.

Juliana Ruhfus presenting #Hacked at Sheffield’s Doc/Fest 2016

Juliana Ruhfus presenting #Hacked at Sheffield’s Doc/Fest 2016

Produced within a tight budget and in record time (about three months from the moment it got the internal go ahead), #Hacked is a good example of quick experimentation within the gamification of journalism. It shows that lots can be done to attract a younger public towards current and political news without having to commit huge teams and money.

The following is the result of a series of interviews aimed at understanding both the reasons for #Hacked’s mobile format and its production process. It is an in-depth case study in production processes. By speaking to its author and director, Juliana Ruhfus, it’s producers, Robert Pratten and Nataly Rios Goico, and its designers, Ilze Juhnevica and Zahra Warsame, this case study aims at giving a 360 degree view of what makes an interactive project possible.

Take it as a text-VR tour of the #Hacked production story.

The piece is also published in an edited form on MIT Open Doc Lab’s _docubase

1. From Pirate Fishing to Hacked

Screen-grab of Pirate Fishing interactive

Screen-grab of Pirate Fishing interactive

Sandra Gaudenzi: You work full time as an investigative journalist filmmaker for Al Jazeera, and you managed to produce two interactive pieces in little less than three years (Pirate Fishing, 2014, and now Hacked). What attracts you in interactive factuals?

Juliana Ruhfus: I think what got me about Pirate Fishing, and why I did want to do another interactive journalism piece is that I felt there was a very clear message that it’s okay to mix journalism and gamification, and that this new form really creates a different kind of engagement from print journalism or documentary. We absolutely did reach new audiences through doing this, 83% of visitors to Pirate Fishing had never before been on Al Jazeera website. And that, for me, is my ultimate goal, I would like to take the work that we do at Al Jazeera, which I think is really impressive, and open it up to audiences that are not our usual audiences.

I also felt that the gamification elements that we had used in Pirate Fishing were not properly integrated, maybe because they were a bit of an afterthought. Even though you could drag and drop the evidence that you gathered into an investigative notebook, which people really liked, there was no changed outcome for your actions.

My biggest question, ever since Pirate Fishing, has been to question “What does the person who interacts get for their click?” I think in a large percentage of interactive projects, including Pirate Fishing, you do not really get anything for your click. There is no changed outcome. With a few branches, the journey is pretty prescribed by the people who have designed the project. I wanted to do something, a new project where the click meant something.

Through making choices, can I get you, the user, involved in an active way that you wouldn’t be involved in when watching a documentary?

Sandra: What do you mean by “meaning” exactly…

Juliana: I think a click starts to mean something if you can get something wrong. We tried to do with this project.What we were trying to do was on one level replicate the journalistic journey: your click means something because you can approach people in the wrong way. For example, if you have a hacker from Syria, who wants to disguise his identity, because his family is still in Syria, do you trust this person? This is exactly the type of question that we had when we made the original film. Journalism constantly have to evaluate risks.  And because we had verified that he really is a hacker from Syria, it was okay for him to disguise his face and for him to protect his family in Syria. So, in the game, if you insist on him showing his face, you will lose the interview. This is why I say that “your click means something”: it replicates the investigative journalistic process.

Here is another example: you have the choice to connect to the internet via Wi-Fi or a VPN. If you connect via Wi-Fi, which is quicker and saves you time, you ultimately incur a man-in-the-middle hack and your contacts are compromised, and then we penalise you with time because you have to inform all your contacts that it’s no longer safe. So these were all things that we learned during the making of the film and examples that are based on real hacks during the Syrian cyber-war. So in that sense, the click means something.

Sandra:  Does this mean that each click is a way to learn and shape the story itself?

Juliana:  I think a click can also just be a way to follow the story, because some journeys are designed in a way that allows you to cut corners and, for example, decide not to interview somebody. If you’ve had enough, you can say, “No, actually, I want to go straight to the next one. I don’t want to speak to that person.” But then you lose data in your collection process.  For me the click is not really a way to “learn” but rather to be emotionally engaged. I want people to be immersed in my work and I want to reach a level of emotional, intellectual engagement. That would be my goal. Through making choices, can I get you, the user, involved in an active way that you wouldn’t be involved in when watching a documentary?

Sandra:  So this is your own goal: a more active audience engagement for investigative journalism. Would you say that this is also the aim of Al Jazeera? Was it easier for you to have Hacked commissioned than Pirate Fishing?

Juliana:  Yes, after Pirate Fishing, it was definitely easier to speak to people internally. With some people it was considered a success, and I’m sure that Al Jazeera is happy about the awards we had. So yes, it was easier to find an open ear, especially with my boss, Diarmuid Jeffreys, who’s the Commissioning Editor of People in Power, who did put the money into this.  So Hacked was actually funded by programming rather than online. I think everybody’s understanding that we can’t rely on the audiences coming towards us, and that we have to think about how we find our audiences.


2.  the birth of an idea: The Syrian Cyber war

Screen-grab of the documentary Syria’s Electronic Armies, part of Al Jazeera’s People and Power series

Screen-grab of the documentary Syria’s Electronic Armies, part of Al Jazeera’s People and Power series

Sandra:  And why did you pitch for a story about hacking? Why Syria, why mobile phones?

Juliana:  It all started with the making of a film about the Syrian cyberwar that I finished a year ago (watch the documentary here). I was interested in that because there is a lot of Syria fatigue. Nobody wants more stories about people dying in the conflict. And I stumbled across a report by a private cyber security company called Fire Eye, who rather amazingly have found 30,000 hacked Skype conversations on the internet.

What these Skype conversations revealed, it was obviously a hack carried out by President Assad’s supporters on the armed opposition. And these hacks very uniquely revealed a military hack, how the fighters on the field were hacked and what was hacked.So it revealed the use of female avatars to entrap fighters in the field by befriending them and then sending them photos infected with malware. It also revealed that in return, they managed to hack Skype conversations in which weapons procurement was discussed, and even battle plans of a very important strategic battle. That was a unique military hack and I thought, “Wow, there’s got to be a film on this.” It’s important on three levels. Firstly, it gives me the opportunity to tell the story of the Syrian conflict. Secondly, there’s a really important continuation of the Arab Spring that we don’t know about, where the internet has been seen as a tool of liberation.  Well, President Assad, after clamping down on the Internet, very quickly realised that he could put surveillance into place. And he opened the internet up again and used it against the activists and traced them down via their IP addresses. He had American technology, private sector technology that helped him to do that, and he even went as far, his security forces, as arresting activists and torturing them for their passwords to get into the networks.

I felt like we really hadn’t heard this story. The media narrative had stopped with the amazing Arab Spring. So for me it was firstly finding a way to tell the Syrian conflict story, secondly to continue telling the story of media in the Arab Spring, and thirdly, I think from what I understand now, all conflicts that we’re facing in the future will have this cyber element. And not just on a government-to-government level, which we may expect, but also on a level of security forces spying on private people, on accessing our social media. And not just, as we know, NSA surveillance, but actually in a conflict situation. So it was these three elements, which is why I wanted to make a film.

Screen-grab of Syria’s Electronic Armies online

Screen-grab of Syria’s Electronic Armies online

Sandra:  So that’s the story of the film. So why did you decide to do an interactive version?

Juliana:  To leverage the content. And this is another lesson learnt from Pirate Fishing: I looked at my own web-doc project, which was actually quite cheap, and compared it with some very expensive flagships, that some would call vanity web docs, and I thought, “If we want to really evolve with this genre, we have to be smaller, cheaper and more agile.” So I had been looking around for people who had the technology to help me do something that would be smaller, quicker and cheaper. And I had started talking to Conducttr, who’ve got this cloud-based messaging platform that uses characters to tell a story. We spoke, and it was Robert Pratten, the co-founder of Conducttr, who had the initial idea of the underlying game idea, of ‘Investigate the cyber war without getting hacked yourself’. Which I thought was brilliant. And between us, we were very clear very quickly that all the simulated hacks in which we try and come at you, each and every one is based on a real hack that happened during the Syrian Cyber War. So they’re not fictional hacks that we made up.

Sandra:  And the reason to do it on mobile? Is it to get to a younger target audience?

Juliana:  Well, it was because I basically looked at the stats, and, yet another lesson learnt from Pirate Fishing, I realised that two thirds of internet content is consumed on the go, on mobile. So I just thought, “It’s time to try something on mobile.”


3. The Commissioning process

Juliana Ruhfus - Senior Reporter for Al Jazeera's People & Power strand

Juliana Ruhfus – Senior Reporter for Al Jazeera’s People & Power strand

Sandra:   And what is the process within Al Jazeera? Once you have an idea, do you have you pitch it or can you just informally speak about it with your commissioning editor?

Juliana:  I pitched it for six months. I knew everybody I pitched it to. And actually, my boss was the first person who was won over, and it really helped with him, also, that it was an affordable budget. That was really important.

I wrote a proposal and Conducttr wrote up a more visual proposal, and then I wrote up various pages on the benefits to Al Jazeera in terms of reaching new audiences, being mobile-first, being innovative, and outlined all the reasons for which we should do it. And then people thought about it for six months, and in those six months I just pushed and pushed and turned into a bit of a pest, which I think is the way…

If we want to really evolve with this genre, we have to be smaller, cheaper and more agile

Sandra:  So once it got approved you were working with a third-party company, Conducttr, which provided the open-source platform, but who looked after the design and front end? Was this done internally?

Juliana:  Yes, at Al Jazeera the design and graphics department gave me two very smart, very bright young women who were working on the design. So we had actually a very female team between myself and Nataly from Conducttr and Ilze and Zahra from the Al Jazeera design team. I would say the vast body of the work was done by the four of us as women, and then with Rob Prattern in the background chipping in.


4. The technical process

Let’s migrate here to another interview with Nataly Rios Goico from Conductrr, the audience engagement software tool that is behind Hacked

Nataly Rios Goico creative consultant at Conductrr

Nataly Rios Goico creative consultant at Conductrr

Sandra: You and Robert are cited as producers in the credits. Could you explain in detail what your role and input has been in the production process?

Nataly: Taking Juliana’s documentary film as a starting point, we created the concept of the experience (to place the player in the role of journalist and research information without getting hacked), and contributed to the creation of the story, inserting the game mechanics to emphasize the importance of decision making, investigative journalistic skills and cyber-security knowledge.

Finally, we implemented and tested the project in Conducttr.  Three people from Conducttr worked on the project: I took the role of project lead, Robert acted as quality assurance and Eduardo Iglesias implemented Communicator graphic design provided by Al Jazeera. This means that I did all lion’s share of the work of keeping the project on track and translating Juliana’s requirements and script into Conducttr.

The experience gained by Al Jazeera and Juliana can now be applied to new projects which can be rolled out very quickly and flexibly.

Sandra: Why using Conducttr in this project?

Nataly:  Conducttr is a multi-channel gaming platform for real world stories. Add to this our Communicator web technology and it was a natural choice. The benefits of using the Conducttr-Communicator combination in a project like this are:

* Editorial: Script changes are easily made and the editorial process is very flexible because the content isn’t hardcoded with the mechanics in the way it would be in a regular mobile app. All the real world factual content can be easily uploaded or linked to by Conducttr and embedded in the experience.

* Multiplatform integration: mobile experiences are easily integrated with email and social media in order to really immerse the audience in the world of cyberwar. User testing revealed that this was too scary so it was toned down but we still integrate live news information from blogs and Twitter to make the content feel fresh regardless of when you play it.

* Speed & Cost: All the app functionality is part of the Conducttr-Communicator building blocks which means it’s much faster and cheaper to launch than developing an app from scratch

* Scalability: Conducttr allows hundreds of thousands of people to engage with the experience across the world.

Sandra:  Could it have been done without Conducttr?

Nataly: On the surface it might seem that anyone could create a mobile app to replicate similar functionality but this ignores the production workflow benefits, integration with existing content & social media and the analytics.

The experience gained by Al Jazeera and Juliana can now be applied to new projects which can be rolled out very quickly and flexibly. For example, if the experience is to run in a language other than English, this can be easily added.


5. The Production process

#Hacked's interface

#Hacked’s interface

Sandra:  I’m interested in the sort of methodologies you did use to create Hacked. Guide me through your process…

Juliana: The very first conversation was Rob Pratten and myself over a coffee. And then Nataly got involved very early one, and we started outlining which characters we would have; we had left out a couple from the documentary but have a couple of new ones as well. We have some characters that we created based on people that we knew in the field that are not necessarily in the film. So we have a producer, who is a character in the web app, who of course in the field we wouldn’t have filmed. That’s where we had the idea of it working along the lines of a docu-drama were you recreate what is real although your actions are not.

Then we started talking about characters, and Rob and Natalie did a very rough outline of the different channels and of some of the hacks. And then it really flipped towards me, because then it sort of hit me how much it needs to be based on journalism. And that was of course where I had the knowledge, so then I spent a lot of time writing the messaging dialogue and thinking about all the hacks. And what was really brilliant, is that we had the help of Ali Haidar, who’s an ethical hacker who’s been helping activists during the Arab Spring, and who’s been involved with investigating hacks from ISIS and so on. This was absolutely brilliant because we could bounce off him our hacking questions and make sure we get the language and scenario right…

Sandra:  So you had the structure done together with the guys from Conducttr, then you wrote the script, and had it double checked by experts?

Juliana:  Yes, but the structure throughout this process got revised. Because what was difficult is that our understanding of what we could and could not do grew throughout this process. So it was a constant reassessing and rewriting. For example, there would have been a genius scenario of a hack, but because it was fictional, or it happened in another country, I had to be strict, “It’s got to be about Syria. This is about the Syrian Cyber War. If it isn’t a Syrian example, then it goes out.”

I think in the beginning we never thought about integrating the journalistic process in the way we did. But once I started writing the script, I saw a lot of possible interactivity coming out of this, so suddenly the journalistic choices became a lot more prominent than originally planned.

Sandra:  And were your designers involved from the beginning, or did you involved them only once the structure and script had been decided?

Juliana:  They were around from the beginning, and I have to say, I think this was my biggest weakness, or I felt it was, because I’ve never worked with designers. I never had to do that so I had to learn fast. What was great with our designers, is that they are two young women that fit with the age and the mind-set of our target audience. So in that sense, they became involved, especially Zahra, in the editorial questions as well, because I’d just go to her and say, “What do you think? Is this a good idea, to put the interaction that way?”, so she became an additional person to bounce an idea off.


6. The Design process

The following comes from an interview with Ilze Juhnevica and Zahra Warsame, both designers at Al Jazeera, who had never worked on an interactive game narrative project before. During the three months of production they were assigned to Hacked but also had other project to work on. It has been a steep learning curve… here is their point of view on the process of making Hacked:

The team at work: Ilze, Zahra, Nataly and Juliana in a brainstorm session

The team at work: Ilze, Zahra, Nataly and Juliana in a brainstorm session

Sandra: From a designer point of  view was there any thing different in this project compared to what you normally do?

Zahra: I personally think it was focusing in the user journey where the user would have a one to one interaction with the piece, which totally changes the way you approach it as a designer. You now have to shift into mapping the user journey in such a way that the journalistic information can be delivered easily to the user.

Ilze: It easily proceeds for the user because its such a complex information you just have to find a way to deliver as an easy user friendly, step by step way hence the designs have to be very simple and very intuitive that was the biggest challenge for us.

An early wireframe of #Hacked with below its first designed screens

An early wireframe of #Hacked with below its first designed screens

Sandra: Before you even started thinking about the interface, how did you create the interactive map, the wireframe?

Ilze: From the beginning we started thinking from a design point of view, having this option rather than this one, providing all of the attractive elements or assets.

Zahra: As Ilze said we were lucky to be involved in this project from the beginning, and starting to develop it a bit. For us as designers the focus was definitely the wireframe, getting the foundations right, but the wireframe changed the further we got in the project we changed some details, at the user test you try different assets but then they don’t work. Its quite a journey, actually and we all collaborated and brought our skills and assets to bring that happy medium we were looking for.

Sandra: What was your schedule, when did you meet and how long it took until you started testing your ideas?

The team in a production meeting at Al Jazeera

The team in a production meeting at Al Jazeera

Zahra: Once we had our first meeting and we talked about the foundation for our wireframe, and we had regular meetings throughout this whole project consistently every week or two we would catch up. Once we had our wireframe we went on to actually show them quickly in short sketches, ideas, and mood boards and to give them different creative solutions different paths. Slowly we pushed away a few ideas and figured what would work best, then show initial frames getting the concept to come a bit more into life and then we would have a bigger meeting there, looking at frames and visual language and slowly it built up. It’s a very changing process, and we were open to change, about seeing where we are at that stage and taking what worked forwards.

Screen grabs of #HackedSandra: When is the first time you started showed your prototypes to potential users?

Ilze: Firstly we pitched our prototypes to Juliana as if she was the client, then we re-worked on the user experience, but we didn’t have any interaction with that user experience personally, we just had the feedback from Juliana and her suggestions. She was the link between us and the rest of the team.

Zahra: We actually had a bit user testing early on when it was as early as the wireframe stage it really was early on the project. We then had user testing towards the end when we had our first prototype which was very complete and we had a group of students to come over and test it. So we had user testing at two very different stages.The last user testing was particularly useful because this again was a new medium and we are trying to find that balance between journalistic integrity and gaming  and here we have it as a docu-drama and its about engaging the audience but we’re actually using them, maximising this media we have and bringing in game elements etc, and not being a traditional journalistic piece, but something where the audience can feel the excitement and interactivity an defining that balance between gaming and journalism, and its a lot harder than you would think.



7. The Testing process

Back to the interview with Juliana Ruhfus…

Mockups for testing – credits: Zahra Warsame

Mockups for testing – credits: Zahra Warsame

Sandra: I remember that for Pirate Fishing you did quite a lot of user testing with students. Did you do the same this time?

Juliana: Yes, this was absolutely another lesson learned. So right at the start of the project, when we had the roughest idea, I contacted Birmingham University, Paul Bradshaw’s MA in Online Journalism, because it’s the only social media MA that I know of in this country. And also contacted the games design course at the National School of Film and Television. So from the very beginning, I went in to see the students and bounce the idea off them and ask them what they would like and what they wouldn’t like, and it was very clear that the social media students wanted a maximum of interactivity. And were very happy to have a lot of fictional scenarios, which in the end we chucked out. Whereas what was absolutely brilliant about the games design course is that it opened up a debate for me, a field for me that I’d never entered before, which became really important in the final part of the design, about in-game and out-of-game experience, and a whole theoretical level of debate that actually ended up helping some journalism problems. But it was infinitely helpful to sit with those guys at the games design course and discuss this project. I got their opinions on everything. Would you do it? Do you like it?


#Hacked’s notifications

Sandra: So was this done only at the beginning?

Juliana: At the beginning, middle and end. I particularly had help from one particular student from the games design course, John Lau. Over two days, we went through the entire project and discussed in-game, out-of-game, what should be in the notifications, what is appropriate for the messages. And we really went through every single bit of script in this game and said, “Is it appropriate that this instruction is there? Who says what?” Which for me was a tremendous learning curve.

Sandra: So how long did the testing and production process take, from when you got the okay to when you more or less were ready to show it publicly at Sheffield DocFest in June? 

Juliana: Three and a half months.

Sandra: Wow, this is very short.

Juliana: Well… it takes longer than making an investigative film, that’s for sure, and more work. But what I learned most of all was the importance of rules. And the rules of journalism I am of course very clear about. And they’re being taught at universities and journalism students learn the rules at university. But this is journalism in a game format. I would say that it’s not a game because it’s not fictional. It is journalism in a game format. And because it is a game format, we needed to develop rules for that. And that was the agony of the process. And that is why there was so much learning from games design people about in-game, out-of-game, because we had to create those rules. And that was the difficult bit.

 It is journalism in a game format. And because it is a game format, we needed to develop rules for that.

8.  What next?

Sandra:  From being invited at Sheffield’s Doc/Fest to the official lunch of #Hacked it took a few months because in the meantime you had to work on another film. So what is next for you? Are you sold into the idea of exploring both fields?

Juliana:  Next, I definitely want to make a film because it’s so much easier! At least, I find it a lot easier, maybe because I’ve made so many films. But actually, I found working on this amazingly exhausting, because it engaged my brain on so many different levels. I really felt I was using so many parts of my brain at the same time.

Sandra: What do you mean by that?

Juliana:  The scripting I find easy, and that was intuitive, and that’s all great. But then for example to think about in-game and out-of-game, that was an entirely different level… For example, where we were muddled up in the beginning is how we place the instructions. So a character would say, “Now you should look in the menu because you have new information.” Now, let me put it the other way round. We decided that everything that is in the messaging is journalism.  Whereas anything that is about, ‘How does this all function and how do we guide you as a user through this?’ is in notifications. And then we also have drop-down menus for help. But it became very, very important to have a real separation. Maybe that sounds obvious now but it wasn’t when we started. I struggled to get the messages from my main character in a clear way so that at times it would give feedback on your actions and at times indications on the game flow.

in-game and out-of-game experience

in-game and out-of-game experience

So I would read the script and think “Oh, what language am I using?” At the beginning, the language was a bit more flowery, because I tried to script for each character. And that did not work. It made the whole thing feel totally unreal. I re-scripted everything and actually took all the character out of the characters. And it just started feeling about journalism again. And the content had stayed the same, it was just the choice of language. So that was a massive redraft from my point of view. And then as I was reading the journalistic script, I kept going back checking the in-game and out-of-game, and then I had to look at the user journey, which is yet different from in-game or out-of-game or even journalism. So I kept reading through it and thinking, “Oh, I have to think about that, and then I’ve got to think about that, and then I have to think about that.” And then there are the videos, and then there’s the social media stuff in it, and then of course there’s a potentially litigious story, some of it. I had to think about the lawyers, will this company sue us if we write about it in the wrong way?

In a film there is the visual and the script. You put that together. You sit in and edit, and put script to pictures, that’s not an easy process either, but there are less dimensions.While doing Hacked I had a phase where I found it so complex that I was literally lying awake at night because my brain couldn’t stop, and I said to my friends, if I ever want to do another interactive, chain me to the radiator!

Sandra: Maybe you will get used to it… you never know…

Juliana: Yes, but after Pirate Fishing I thought the second interactive would be so much easier. It was not.

Sandra:  But you went for a different style as well.

Juliana:  Yes. It was not easy. Not easy at all. It was just a new set of problems.

Sandra:  So are you planning to do another one?

Juliana:  I need to finish first two films I am already working on, but there is a particular story that has to do with biometric testing in Africa, where biometric data is gathered in a way that would not be okay in the West. And of course I’m thinking about that and I immediately think, “Ooh, biometrics? Something interactive…” And now it’s time for you to tie me to the radiator!

Sandra:  Well… not if I want to see your next interactive… Great ending for an interview though!

Play the game and try it yourself right now: #Hacked