“A SOCIETY IN WHICH PEOPLE CAN BE MONITORED AT ALL TIMES IS A SOCIETY THAT BREEDS CONFORMITY AND OBEDIENCE AND SUBMISSION...
WHICH IS WHY EVERY TYRANT, THE MOST OVERT TO THE MOST SUBTLE, CRAVES THAT SYSTEM.” GLENN GREENWALD WHY PRIVACY MATTERS, TED 2014
1
TABLE OF CONTENTS INTRODUCTION RESEARCH • CONCEPTUAL • AESTHETIC DESIGN & PROCESS PROJECT ADJUSTMENT PROPOSAL IMPLEMENTATION • WEBSITE • APP PROTOTYPE • MOTION GRAPHIC USER TESTING CHANGES AFTER TESTING REFLECTION & EVALUATION APPENDIX BIBLIOGRAPHY
1 3 3 5 9 11 12 15 17 25 31 39 41 43 45 52
INTRODUCTION ALEX HAW At the start of the year, I attended a Universityorganised talk by Alex Haw. He founded the company Atmos in 2006, with an ambition to improve our spatial experience of the world. Among the topics that interested him in general, surveillance sat at the top. He spoke a bit about the implications of the modern day Big Brother, as we are constantly monitored for our own safety at the expense of privacy. He gave some scope as to just how invasive in particular security cameras are getting, able to determine and track the movements of anything or anyone in it’s view. I always saw surveillance as a bit of a boring subject, and went along with the whole “If I have nothing to hide, I have nothing to fear” motto. But after being exposed to some of these surveillance schemes, it was obvious there was more to surveillance than I even thought I knew.
Fig 1. Alex Haw Portrait. 2011.
GLENN GREENWALD With an inquisitive eye, I started reading up on recent surveillance scandals. Obviously, Edward Snowden and the NSA leaks were the most prominent results, which directed me toward a TED talk by Glenn Greenwald - the Guardian journalist who helped bring the Snowden leaks to press. His views challenge that common belief that privacy isn’t that important unless you’re doing something you shouldn’t. From Greenwald, I learned why that’s a ridiculous and unacceptable excuse for not challenging surveillance. Why Privacy Matters Click play to watch.
Fig 2. Glenn Greenwald At TED. 2014.
11
ARAL BALKAN The final individual that really got me conceptually involved with the issue was Aral Balkan, founder and lead designer of Ind.ie. He approached privacy issues surrounding free services like Google, Facebook and Twitter, with his main point being that companies, as well as governments, know too much about us, and that their business models are founded with the sole intent of monetising user data. He highlighted past actions of the aforementioned companies, and linked them to how they grant them evermore customer data, and I found it fascinating. I, Simulation Click play to watch.
Fig 3. Aral Balkan. 2011.
I’D NEVER REALLY THOUGHT ABOUT IT LIKE THAT. WE DON’T PAY FOR THE SERVICES WE USE EVERYDAY WITH MONEY, BUT INFORMATION.
These technologies are double agents - they enable a truly connected lifestyle while secretly recording and analysing it. We are the quarry being mined, to quote Balkan’s analogy. The dishonesty in making your users into the product is disgusting. Most disturbingly, these companies make money hand over fist even after the scandals like Snowden. Why isn’t this enough to make us all question the services and protect our data? Because we have nothing to hide, of course. Like these guys I refuse to believe that’s a justifiable reason. Now, not only was surveillance interesting, it was also going to be the basis of my final major project.
Fig 4. Surveillance of the Fittest Mural (2013) 2
CONCEPTUAL RESEARCH ALL CONCEPTUAL RESEARCH IS EXCERPT FROM MY DISSERTATION, “THE CONVERGENCE OF SURVEILLANCE: CONTROL AND ESCAPE,” WHICH WAS PUBLISHED IN 2015, AND EDITED TO BETTER FRAME IT FOR THE CONTEXT OF THIS DISCUSSION.
THE PANOPTICON In aforementioned TED talk, Glenn Greenwald talks about the Panopticon, designed in the late 18th Century by English philosopher Jeremy Bentham as a concept for a prison. I’ve written a concise description of the Panopticon in my dissertation, and will include it here. “A centralised tower manned by one guard allowed single handed surveillance of all inmates. Crucial to the design, inmates could not see into the tower, meaning they never knew whether they were being watched or not. The suggestion that “you could be watched” was enough for inmates to exhibit behaviour that was more obedient and compliant, as any misbehaviour could end with punishment, thereby using surveillance as a means of control. French philosopher Michel Foucault subsequently realised in the 20th Century that this concept could be utilised in any institution that wants to control the behaviour of its members - the school, hospital, workplace, factory (Greenwald, 2014).”
Nowadays, the Panopticon acts as a perfect metaphor for describing the way surveillance is carried out not only in the physical world, but also the digital - the watched cannot see the watchers. When challenged, a lot of online companies are characterised as digital Panopticons, who employ a range of pervasive algorithms rather than guards. This is because they can automate the process of surveillance, and do other things that solely govern our experiences online. After all, that is what an algorithm is - a “description of a method by which a task is to be accomplished,” (Terranova, 2013).
Fig 5. Presidio Modelo, A Panopticon Prison (n.d)
Algorithms Online I chose to focus on Google and Facebook when I exploring the pervasiveness of algorithms online, as they are the first and third largest internet companies in the world respectively (Fox, 2013). Even though they provide a catalogue of free services, they are viewed by some as digital panopticons because their business models are reliant on pervasive forms of web advertisement, and collecting hoards of user data (Pasquinelli, 2009). These tech-giants have their own unique algorithms that steer their services and gather user data. Facebook uses its EdgeRank algorithm determines which articles should be displayed on a user’s newsfeed, determined by your interactions with others on Facebook, the post’s content and its age (Cooper, 2013). Perhaps a bigger and more elaborate algorithm that affects the most people is Google’s PageRank algorithm, which sifts through 11.944 billion search enquiries a month (Smith, 2014), and decides on the “importance of a webpage and its hierarchical position within the search engine
results” (Pasquinelli, 2009). This value is determined by analysing the number and quality of incoming links coming from other websites. By indexing and establishing a value to each node on the web, Google becomes “the first systematic global rentier of the common intellect” (Pasquinelli, 2009), the corporation that receives revenue from indexing and distributing the knowledge of today. Search is just one aspect of Google’s business, as stated before, they offer a plethora of free services ranging from mail to documents, social networks, media stores and more. Using these services through one user account generates a digital version of an individual, which doesn’t have the same constitutional rights as the physical person (Balkan, 2014). In essence, they know and own you in a digital form. This concrete data makes the targeting of adverts even more precise and gives Google a more well-rounded profile of an individual, enabling dataveillance by Facebook and Google in particular. By tieing you into their ecosystem of services, it makes it hard to migrate that data to another service which makes them not only a monopoly, but also a control mechanism over an individual’s service of choice. 31
on a news-feed has direct emotional impact on a user. The unfortunate thing about this kind of experimentation however, is that it is completely legal and within Facebook’s bounds as it is written in their Terms and Conditions - the document that users agree to when signing up for the service. User data can be used “for internal operations, including troubleshooting, data analysis, testing, research and service improvement” (Facebook, 2014), a broad statement that allows research such as this. This was to be a major part of my project, as I ended up playing on the process of agreeing a policy like this. If this kind of research is allowed within Facebook to affect just 0.04 per cent of its users (Byford, 2014), what other kinds of research is being done in-house that affects an even wider range of Facebook’s 1.35 billion users (Smith, 2014)? Users just have no idea wha they’re signing up for until a scandal like this happens, by which time it’s too late to reverse eh damage. People should be more vigilant when agreeing to a major companies privacy policies, as it contains some serious privacy concerns.
Emotionbook I then explored a news story about the emotional manipulation Facebook employs in their news feed. This experimentation affected 689,003 Facebook users’ in 2014, (Brandom, 2014) as they conducted research into whether “in-person interaction and nonverbal cues are not strictly necessary for emotional contagion” (Kramer et al, 2014). The aim of the research was to see how “positive and negative effect travels through social networks” (Brandom, 2014), by altering the amount of positive and negative posts that appeared on those affected user’s timelines. Each post that had some sort of embedded emotion had between a 10 percent and 90 percent chance of being omitted from a user’s timeline, but was still accessible from a friend’s timeline directly or by reloading the newsfeed (Brandom, 2014). This story likens the Facebook user to the lab-rat, as Facebook data scientists manipulate its users emotions just to test whether the content
CAPTURE ALL
Even if we choose independent start-ups offering devices that aren’t in relations with other big companies, how can we trust that they won’t be later bought out by a massive conglomerate such as Facebook or Google? Everyone who bought a Nest thermostat, a smart thermostat that automates your homes’ temperature and senses whether or not a house is occupied, didn’t know that Nest would later be acquired by Google in January 2013, but under the agreement that no user data would be shared with Google (Ingraham, 2014). Nest customers also didn’t know that the policy would then be amended in June of the same year, allowing Nest to share data with Google (Winkler and Barr, 2014). The same goes for Facebook acquiring WhatsApp and Instagram, and therefor the future conversations of their users.
The user data mined by corporations is like a gold mine to governments that wish to keep tabs on the public. If this is how control is already seized, the onset of more personal devices exposes potential plans that will enable the next great advancement in surveillance. Wearables, trackers and home automation technology might be revolutionary and convenient, but also elevates the potential for surveillance in truly invasive ways. If our shopping habits can already detect whether a teen girl is pregnant (Hill, 2012), let’s imagine the value and implications of the health and home sensing data that is soon to be acquired through new generations of devices. With this in mind, it appears that companies can assume control over many aspects of a consumers use with its services as long as it is written in their Terms and Conditions. The possibilities for surveillance are being heightened wit every new technological innovation, which can be carried
4
out by corporations who then in turn inform governments. These institutions write their own rules, and then create the machine (algorithms and hardware) that fetches them both a financial return and the information they desire. With no one to watch the watchers, how can indivisuals escape?
AESTHETIC RESEARCH
After all of my initial conceptual research, and having written a more in-depth dissertation about surveillance issues, I felt that I was ready to start thinking about potential project outcomes. At first, I thought that a multi-platform campaign would be the best medium. I was starting to feel so
strongly about the issue that I just wanted to make it abundantly clear to people as to what was going on. I was frustrated that we spend more time talking about celebrity gossip, for example, than we do real issues like the implications of surveillance. With the campaign goal in mind, I explored some typical conventions used by other campaign organisations.
Fig 6. Adbusters Logo, 2014
Adbusters had a style that appealed to me the most. In their spoof ads and campaigns, they attack the materialistic mindset that brands help create in consumers to feed a capitalist economy. They cleverly twist branding elements of companies to communicate a serious message along with an heir of humour. My favourite works of theirs are the spoof ads, that inherit some of the characteristics I outlined just now. They make fun out of the things we do in an inoffensive way. I really like one spoof ad in particular, Are You Happy Yet? asks whether all of the things we have bought over the years have actually made us as happy as the glorified stereotypical happy young people we see in the adverts. They take an infographic-lead design approach to this, which is the route I had planned to also go down.
Fig 7. Adbusters Kick It Over Poster, 2014
Fig 8. Adbusters Kick It Over Poster, 2014
My favourite campaign of theirs is Kick it Over, and the brutal feeling all of the design elements evoke, totally obliterating any sense of being precious or holding back. I also really like their approach to superimposing people’s heads onto figures – rather than doing them realistically, they’ve gone for a kind of bobble-head effect that makes the person more distinguishable. It feels as though Adbusters beat me to the punch here slightly, as part of my aesthetic was to have CEOs watching over people’s shoulders, but I think making them too realistic would make them less distinguishable – something that i’ve learned from this campaign. 51
Fig 9. PBS Married to a Mime, (n.d)
I then found a campaign by PBS that extends this playfulness and humour, and uses it to trick the viewer into believing it’s a real advert. It addresses American TV viewers’ numbness to what is and isn’t real, thanks to uprising of nonsense reality TV programmes. I really like not only the staged yet
photorealistic techniques used on the images, but also the right-hand half of the ad reading “the fact that you thought this was a real show says a lot about the state of TV.” The feeling that you’ve been tricked and educated at the same time is really effective marketing.
Fig 10. Greenpeace Logo
Greenpeace is renowned for their participation in raising awareness of problems relating to the welfare of the environment and it’s creatures, and rival against large corporations that pose a threat to them. They are varied in their approach to campaign aesthetics, from photo manipulation to digital illustration to propaganda imagery incorporating rival’s branding elements. Their missions are fairly clearly represented on their websites, and they have the research, statistics and empathetic language to make compelling arguments as to why we should care. They have some really great imagery, but none of it is transferred – it usually just lives in a banner at the top of the page and they let the writing do the rest. Their articles are dense with text and intimidating to read, for those who just want the “scoop.” They do however have update sections on most of their web pages, to keep readers up to date. But again, the presentation makes reading an unexciting experience.
Fig 11. Greenpeace, Lego Dumps Shell, 2015
Fig 12. Greenpeace Green Gadgets, 2014
6
Stop Watching Us Logo, 2013
To get a feel of the current conventions surrounding surveillance-specific campaign, I investigated the way they communicate graphically and their approach to whichever part of the issue they address. Stop Watching Us is a rally to send a message to congress to stop monitoring citizens, in light of the recent NSA revelations. They have a brilliant logo that includes tropes referring to big brother and other assets related to surveillance, making it easy for the viewer to distinguish the subject right away. There isn’t much else that’s particularly “designed” about the graphics representing them, I suppose as to not take away form the message – only the necessary parts are there.
Fig 13. Stop Watching Us Poster, 2013
DON’T SPY ON US Don’t Spy on Us has a bit of a more serious and ominous feel about it, blocked with colours signifying danger – (Red, Yellow, Orange etc). Their site is well laid out and guides the user down to where they can take action. They also go down a simpler route when it comes to communicating their message by summarising their mission and the problem into six key principles. This quick, bite-size infographic is probably enough to make an educated decision to sign up or not. As I’m thinking of doing some interesting imagery relating to CEOs spying over their customer’s activities, composing them so they fit around titles, text and other elements will be important to the design, and is something this campaign has struck a nice balance on. Fig 14. Don’t Spy On Us Poster, (n.d)
Reset the Net is another surveillance orientated campaign, with a fairly neutral design. It feels almost a bit innocent in nature, and doesn’t really convey the seriousness of the issue due to a lack of punchy colours, shapes or font. Having said that, they have a brand and logo that is transferrable and recognisable, and I do love their website. All on one page and responsive, it contains all information and interactions on one page. If there is anything I take away form this one, it’s the site design and layout. Fig 15. Reset the Net Logo, 2014
71
I came across this campaign a long time ago, thanks to the catchy song and YouTube video associated with it. The overarching message for this campaign is that the dumbest way to die is “acting stupidly” around trains – not waiting at level crossings, walking on the tracks, standing too close to the edge of the platform. They contrast these against truly stupid ways to die that people wouldn’t usually even think of, to convey the stupidity of being irresponsible around trains. All of this though, despite the sincerity of the message, is communicated through simple, colourful and animated cartoons, creating an odd dynamic that appeals to a wide audience (especially children – supposedly to spread these messages to people at a young age). This campaign strikes a balance between the sincerity and humour that I admire. The campaign is also widely distributed across apps, videos, songs, websites, posters, making it recognisable and accessible. The simple characters and environments make it clear as to where the viewer should be focusing their attention, wherein the written message is displayed.
Fig 16. Dumb Ways To Die Posters, 2014
IF YOU’RE TEXTING, YOU’RE NOT DRIVING. This campaign is a stark contrast to Dumb Ways to Die, removing humour completely and taking the problem head-on. It was produced by the Tombras Group and posted online by the National Highway Traffic Safety Administration to mark the beginning of National Distracted Driving Awareness Month (The Huffington Post, 2015). It shows a group of 18 to 20-somethings (the target audience) having fun in the car unreceptive to any kind of danger. An alert brought on by a mobile phone distracts the drivers’ attention away from the road and into the path of an oncoming truck, creating catastrophe for the teens. This is a great way to catch the audience off guard and send a message in a short amount of time something I hope to emulate. Fig 17. The Huffington Post, (2014).
8
DESIGN & PROCESS
SIGNATURE IMAGE
Now it was time to put all my research into practice. Perhaps the most notable thing that was to find its way into my work was the Adbusters approach of using a bit of humour to relay an even stronger message. I started playing around with concepts for a signature image, like having Facebook and Google employees looking over the shoulders their oblivious customers and recording their actions. This was in an attempt to show what is currently invisible - how algorithms are spying on us.
BRAND IDENTIY & LOGO
“COULD YOU PLEASE STOP?”
Simultaneously, I was trying to figure out a brand identity for the campaign - something punchy and instantly recogniseable. In the early stages, I experimented with different tropes and more recognisable references to surveillance, and explored ways make the CEOs recognisable.
Fig 18. Mark Zuckerberg Walking, 2013
The name “Please Stop Spying On Us” was inspired by the documentary “Terms and Conditions Apply,” which exposes th vivid ways large companies gather consumer data. At the end of the documentary, the film makers catch Mark Zuckerberg walking down his street, who asks them to “please stop” recording him. He then relaxes when the main camera is shut off. Little did he know, another hidden camera continued recording, capturing Zuckerberg’s mood change from defensive to compliant and friendly.
91
I continued experimenting, with varying degrees of success. I ended up with two nice solutions that were tough to decide between. One was a logo with Terminator-like figures watching over the shoulder of the user. The other was a 5-tone logo, inspired by the
Obama “Hope” poster, and subsequent references in other posters, like “Big Brother is Watching You”. Both slogans read in their respective companies’ fonts, PLEASE adding recognitionONvalue. US
Stop Spying
Please Stop
Please Stop
FINAL I decided on a modified 5-tone logo with the Facebook and Google colours, as this was the most obvious and direct link to the companies I’m targeting. Trimming the name to “Stop Spying” is also a lot more direct and less polite, getting the message across quickly and clearly.
10
MOTION GRAPHIC
The other leg of this project was going to be some sort of video piece, as some of the PSA’s I looked at were able to convey their messages very strongly through a short piece of footage. My piece would incorporate animated infographics to expose the issues surrounding my subject. I started by looking at Government compliancy, how using the services
builds a digital replica of our identity, and how corporations acquire smaller companies for their assets - usually users and their data. Again, I was having relative success and trying new software like Adobe Edge to make HTML 5 animations, but things just weren’t flowing the way they usually do.
PAUSE WHY A CAMPAIGN?
WHAT’S THE CRUX?
Stepping back, I objectively weighted up the pros and cons of a campaign-based approach. It felt too ordinary, with no critical design at all, aside from targeting a couple of CEOs. Trying to condense a complex issue into some simple infographics wasn’t fulfilling anything for me, and was sapping my motivation. Putting everything aside, I focussed on a new approach that made me more excited about the project. After just a bit of thinking, I arrived at a solution that did just that while using everything I’d already created.
Except when they do so, the crux of this project is revealed. Rather than signing up for the beta, they are redirected to another web page, informing the user how they have just been tricked. By agreeing to the terms and conditions, they allowed Stop Spying to, once linked to the users social profiles, act as a digital “bug” that records the users interactions across Facebook and Google services. It doesn’t do any of the things it says on the website. In fact it does nothing - it’s a fake product. In this capacity, it’s a warning that signing up for services that require agreeing to a Terms and Conditions policy are probably hiding some questionable requests within their sometimes 5000+ word documents. The user is then reassured that this is a fake product and their email address data was never collected in the first place, and the terms and conditions policy is a fake. If the user chooses to click “read our terms and conditions,” situated next to the “agree” button, they are congratulated for their online vigilance, and issued the same explanation.
TURNING IT AROUND I made Stop Spying into a piece of software that makes using Facebook and Google services more secure. It keeps data from said companies without hindering the user experience thanks to some groundbreaking encryption and scattering technologies. I will be making a website to showcase and advertise the product, and set up an emailing list for people to sign up to the beta and try it for themselves. All they have to do is enter their email address and agree to the terms and conditions.
This is product conception, interactive campaign with propaganda all in one, and so much more exciting for me than telling people about the wrongdoings of big internet companies. With this new found enthusiasm, I was able to really start getting down to work. 111
PROPOSAL This proposal outlines my exploration into the convergence of physical and digital surveillance in the lives of Western consumers. Mass surveillance of our physical and digital activities infringes on basic human rights (Cotzlft, 2015) for the benefit of monopolous corporations that thrive off of a dishonest business model. But despite recent revelations over the NSA and other surveillance organisations, consumers still don’t make conscious efforts to resist indulgence in free services that monetise data, based on Facebook’s user statistics (Sedghi, 2014). The purpose of the project will be to show others just how easy it is to be seduced into surrendering personal data to such services.
Stop Spying is a software product that makes using Facebook and Google services more private while leaving the experience unhindered. The aforementioned companies operate on a data monetisation business model that grants a user access to their services at the price of personal information. As has recently been exposed through various revelations such as Wikileaks and the Edward Snowden NSA file leaks, it’s true that personal information is incredibly valuable to these large internet companies, but is exploited in a range of unethical ways. Stop Spying helps to make most of this data stay anonymous and works invisibly in the background, making the services truly “free”.
Technology should be empowering, but not at such a high cost. Like the many product being developed by the likes of Ind.ie, Bitcoin, Stealth Wear and more, I want to design something that helps serve the same goal - retaining privacy. With a Critical Designers’ mindset, my project will address this issue through a series of surprising and interactive design artefacts called “Stop Spying.”
Stop Spying is essentially a filter for your Facebook and Google accounts, sharing only essential personal data with the services. Any extra data that could be used to identify you is deleted, thanks to groundbreaking encryption and security technologies that ensure the safety of data:
1
Dazzle destroys facial recognition nets used to find your face in an image. It also removes meta-data, so photos can’t be processed.
2
Isolate restricts your location data being sent to Facebook or Google, and is instead stored on your device for quicker access.
3
Scatter randomises your IP address every time you search, as well as your instant messages to friends and family, making your searches and conversations private.
4 12
Finally, Encrypt provides end-to-end encryption of your documents and emails that are stored online, and therefor currently vulnerable to snooping.
In-depth information about the product is available through the website, which will be the primary design artefact for this project, along with a motion graphic that explains what Stop Spying is. To download the Stop Spying beta, users are required to submit their email address and agree to the Terms and Conditions. The user then either chooses to download the beta or read the Terms and Conditions, revealing the crux of this project. If the user chooses to download the beta, they are redirected to another web page informing them how they have just been tricked. Stop Spying is a fake product that appealed to their desires, so they were willing to surrender personal information. By agreeing to the terms and conditions, they allowed Stop Spying to, once linked to the users social profiles, act as a digital “bug” that records the users interactions across Facebook and Google services. It doesn’t do any of the things it says on the website - In fact it’s just another user-data miner. The user is reassured that this is a fake product and their email address data was never collected in the first place. If the user chooses to read the terms and conditions, they are congratulated for their online vigilance, and show them what they would have signed up for if they had chosen to download the beta. Both the tricked and vigilant have access to a prototype Stop Spying app made with InVision. It’s not a functional app, but rather a visualisation of what it could be on a smart phone. By following the QR code, they can download it to their home screen as a web app, or follow an alternative link to access through the browser on a computer. This project then acts not only as an interesting concept for a privacy-protecting product, but also as a warning that signing up for services that require agreeing to a Terms and Conditions policy are probably hiding some questionable requests within their sometimes 5000+ word documents. I’ve chosen to adjust the project in this way because it has the potential to be more effective than a campaign, and far more stimulating for me as a designer. We are constantly bombarded by campaigns trying to get across many different messages that make us numb. By hiding the message in something they are already interacting with will make the message all the more prominent when they find it, therefor making the interaction far more engaging and tangible.
The artefacts required for this project to work are: A website to promote the product and redirect the user to either the congratulatory or warning page. This will involve relearning some of the HTML and CSS skills I’ve developed but need renewing. I then intend to go way and above those basic skills, developing specifically in CSS, to create a professional-grade website. A 2 minute motion graphic explaining what Stop Spying is. This will act as product promotion, increase authenticity (due to professional standards of animation) and as a compact educational medium. This is definitely the area of most intense technical learning, due to my novice experience with applications such as After Effects. A short section of a fake terms and conditions policy to show what the user would have agreed to if the product was real. This will exaggerate the typical conventions used by corporations when writing their policies. A Prototype iPhone app, made in InVision. I intend to do a fake “launch” of this product at the end of year exhibition and see how many people fall for the trap, and see their reactions. I intend to set up a desktop machine running the website so users can experience the project. The prototype iPhone app will be made downloadable with a QR code, giving them something to walk away with as a reminder of the issue, and my project.
UPDATED GANTT CHART Click here to view
SOFTWARE PROMOTION Next, I undertook some market research to see how software companies promote their apps, as I hope to communicate professionally to achieve a “faked” authenticity. I looked at a few high-rated apps to get some ideas – Evernote, Pixelmator, Phone Expander, Clean my Mac and Pocket, among others. I chose these as a bench-mark for my own work, and as influence for the sites’ aesthetic.. 131
What are those conventions? A “hero” image takes the dominant position at the top of the page, spanning the width of the browser window. To keep things simple, they distill their app’s capabilities into about 4 major features. I like the way Evernote names it features as verbs, making it very clear the kinds of interactions its users will have with the app. Each feature has its own icon or image, name and
a description, juxter-positioned against the other features to visually separate them. The description is kept short and usually opens with a one-liner summing up why it’s good for the user. Screenshots prepare the user for what they could potentially be using, and shows off any unique UI design. Finally, a way to purchase or sign up, usually backed up with user reviews.
“HERO”
FEATURES
BUY
14
IMPLEMENTATION
SIGNATURE IMAGE
A signature image is something that goes along with all the other branding elements to enhance the recognition value of something. I wanted mine to communicate this idea of users being spied on by the services their using, by having CEOs and employees of those companies watching over user’s shoulders. I looked at some conventional representations of spying, but drew little inspirations from them - they all had a “stock photo” feeling about them that was unconvincing and staged.
Fig 19. Spying over man’s shoulder, 2012
Fig 20. Government Spying, 2013
Fig 21. Spying Boss, 2012
FIRST SKETCHES So for my implementation, I decided to target just the CEOs (Zuckerberg and Schmidt) and have them watching over the user, with the camera looking back at all of them. If the user was to turn around, they’d see they were being spied on - an illustrative way of telling people to look around and see that these services aren’t as honest as we naively think. This first proper illustration has the CEOs looking over not only the user but also straight into the eyes of the viewer, delivering the overall message while making a personal connection. I decided on this composition as opposed to one like the images above because making the CEOs recognisable was paramount, and most images I could find of them were a portrait shots. This would require less Photoshop edits and therefor easier recognition.
151
USER MODELLING To keep things simple, I used myself as the model for the user being spied on. I darkened my living room, set up my camera on a tripod infant of me, and took many shots at different exposure settings to get the right result. It was important for em to get the glow of the smartphone on my face to create an etherial and spooky scene, as the edited background would be black.
FIRST MILESTONE The first major milestone I made with this idea is this. Taking two hi-resolution images of the CEOs faces, cutting them from their backgrounds and overlaying their respective company colours made an interesting representation of the two men.
Fig 23. Eric Schmidt, 2011
Fig 22. Mark Zuckerberg, 2014.
Fig 24. Man in Blue Suit, 2009
EFFECT TUTORIAL
Photoshop: How to Make Obama’s HOPE POSTER using your own Face. Click play to watch.
This technique is something I learned from the Youtube tutorial by Blue Lighting TV. It demonstrates how to make any face look like that of the Obama “Hope Poster” that I was inspired by earlier on. I chose this effect because It would accommodate the brand colours best, rather than just overlaying them on a photographed face. It’s essentially a Posterise adjustment coupled with gradient maps.
16
IMPLEMENTATION
•
THE WEBSITE
The website is the main design artefact for this project - it’s where all project elements finally reside. It has five main functions: •
Tell a story - Educate the user on why they should take online privacy seriously. This story is told by the motion graphic piece as well as the images and text on the site.
• • •
Advertise and expand on the product’s features and functionality, delivering a convincing and authentic pitch to make people want to try it. Provide a way to “sign-up” to the beta, in the form of an email sign-up box. Deliver the message that the user has been tricked, or congratulate them on their online vigilance. Link to prototype iPhone app, giving the user something to keep as a reminder and use.
FONT
COLOUR SCHEME
The font I’ve chosen is inspired by Don’t Spy On Us. I’ve gone for a similar font called MYRIAD PRO BOLD as it’s simple and hard-edged, leaving little room for mistaking the product for something lighthearted. It’s also a readily available Typekit font.
With a dark colour scheme, the website’s colour palette is similar to dangerous insects. Black, Red, Yellow and other vivid colours are used in nature as a way to warn other creatures, in the same way this is a warning of the severity of not taking online privacy seriously. With a dark background, the vivid colours of the other design elements will pop off the screen.
MYRIAD PRO BOLD CONDENSED The body text on the site is a light grey shade to make it more comfortable to read against a dark background - I found this to be a great design feature Pixelmator's website.
HEX #878787
A preliminary rendition of the brand identity made into the iconic rounded square shape of an app icon immediately gives the user an inclination as to what kind of product is being advertised. Flanking this is the Stop Spying logo, developed to visually relate to the targeted companies. The header image makes visible in a literal way how these services view their users - as people to watch over the shoulders of and watch passively without knowledge. Both CEOs, Zuckerberg and Schmidt, carry they respective company colours to make them recognisable.
The motion graphic piece that tells the story of Stop Spying appears high up on the website for those who prefer to watch and learn rather than read. Its professional standard also helps the product seem more authentic.
171
Teaching the user about the problems surrounding the current attitudes towards online privacy. It outlines why online privacy is important, how it’s being broken and why nothing is being done to fix it - it’s the targeted companies’ business models. This short abstract describes what Stop Sying is and how it brings back online privacy. Each major topic on the site is in its own section, segregating elements into a way that makes them easier to conceptually digest. Most topics have their own attractive large image accompanying them, again helping to break up the page and help the user to stop and read each section without feeling fatigued. This section gives the realistic reason why the software is only available on Apple devices - they don’t operate on a data-monetisation business model, and are therefor the most secure.
Breaking down the features in an easy-tounderstand way for the user while being technically feasible is this section’s main function. It describes how Dazzle, Scatter, Isolate and Encrypt work in tandem to retain privacy while using Facebook and Google services. Each feature is named to sound a little bit “hacky” but comprehensive. From the sites I looked at during my research, I’ve chosen to juxtapose each feature against the other, making them less confusing and easier to read.
Finally is an area at the bottom of the page that enables sign-up to the Stop Spying beta. It’s a different background colour from the rest of the page to make it stand out more prominently. The Input fields won’t actually work - but the user doesn’t know that. 18
IMPLEMENTATION
THE WEBSITE
http://bit.ly/1Cse7RD
The first few Photoshop mockups of the website were very text-heavy, but I kept iterating, adding graphics where appropriate and adjusting the layout to make it balanced and sectioned for viewing on screen. Once I was happy with those, I exported all of the image assets from photoshop ready to be used once I started writing code in HTML and CSS to build the site.
http://bit.ly/1xv5lmW
DREAMWEAVER This was my first encounter ever with Dreamweaver. For the little web development I had done, I had used more lightweight apps like Sublime Text. Growing accustomed to the UI was simple enough, and soon found out the dierences between this and what I had been using before - the split code view must have been the biggest time-saver. It was really my coding skills that were going to be tested here. A sketch helped me map out where each block of the page was going to sit, which helped just getting the HTML down. Although I had mild success with CSS in the past, I knew I was shaken in areas, so I took the time to read up on it, experiment and most importantly, not get frustrated when things went wrong. Going back back to learn the ba sics from sites like w3schools.com, lynda. com and Youtube was a smart move, as it better prepared me for what was ahead. I still had trouble, especially with positioning elements exactly where I wanted, and without aecting others.
191
Warning Page
Congratulatory Page
I then created the two linking pages. Clicking “Read Terms & Conditions” redirects the user to the congratulatory page, where they are commended for their online vigilance. Choosing to agree and download the beta redirects to the warning page, where a big large graphic delivers the news the news that they’ve been tricked - using an edited version of Michelangelo’s Sistine Chapel as a funny way to do this. After a project explanation is what the user would have agreed too had this been a real product with legal footing. I chose to exaggerate this section of a fake Terms and Conditions policy to really drive home this message - companies can write whatever they want, and you’ll agree to it.
20
After this, both pages are the same in terms of layout, with a link to the prototype app under the heading “It’s not all lies,” being the honest side of the project.
TWEAKS After getting the bulk of the website work out of the way, I revisited every aspect of it, scrutinising and looking for imperfections - it’s easy to not notice these things when in the thick of creating. I also asked others for their honest opinions to get some outside perspective. These were mostly family and friends, and was informal but nevertheless helpful. I started with the website, replacing the original copy text with the video script as this was much more succinct. The Platform section of the page was changed to show off the mobile app more fully, replacing the Mac image. Using three different degree images of the phone, it demonstrates many differnet views of the app at once.
ICONS In keeping with the motion graphic, the Features section was overhauled to fit better in the browser and be easier to read. Making the icons for each feature the same shape gives them a more harmonious relationship.
Dazzle
Scatter
Isolate
Encrypt
SMART SIGN-UP
APP ICON
Another nice touch is the email sign-up box, which now requires an email address and checking the Terms and Conditions to proceed to the download page. This required a few lines of Javascript which checks that an email address has been entered and the checkbox has been clicked on. Little tweaks like this make the page more authentic.
The app icon was muddy and pixelated as it was simply cut out from the images of Zuckerberg and Schmidt. I decided to do a full redraw of it in Illustrator, taking this as an opportunity to rethink the design. There is now a more definite pupil to represent the joint vision for Facebook and Google – to spy on us. This is in reference to my earlier design, which I was glad to include again.
Stop Spying PLEASE
ON US
211
Please Stop
Please Stop
ZUCK & SCHMIDT The most negative feedback I got from others was the way Mark Zuckerberg and Eric Schmidt were represented. Despite being coloured in their company colours, it still wasn’t clear who they were, especially for those who’d never heard of them. It seemed like a good idea at the start, but on in hindsight it was horrible, pixelated and poorly done. I kept their faces but got rid of the garish colours, and found higher resolution torsos. I then took a lotto time to carefully pair the heads with the bodies, making them look more realistic.
Fig 25. Mark Zuckerberg On Stage, 2014
Fig 23. Eric Schmidt, 2011
Fig 22. Mark Zuckerberg, 2014
The result is a more sinister, punchy and ominous looking pair of CEOs, with a red hue behind them to emphasise this. Name and company position badges make it abundantly clear who they are, making the target obvious on first sight.
22
Fig 26. Man In Suit, 2012
Before
After
Fig 27. Mark Zuckerberg At 37Th G8 Summit, 2011.
231
Fig 28. Eric Schmidt At 37Th G8 Summit, 2011.
SIGN-UP I then smartened up the sign-up section of the home page, making it more attractive to entice people to input their email and agree to join the beta. With a bigger, more crisp icon, it’s obvious that it’s a beta while making the entire bottom section smaller. Footer links to my online portfolio, product blog and video fulfil an expectation of a way to interact further with the product - a convention of other product sites that I overlooked at first.
CONGRATULATORY GRAPHIC There wasn’t a very heavy graphic presence at the top of the Congratulatory page, just a rosette. I wanted it to have the same kind of humorous feel that the Tricked page does, with a hint of sarcasm. I created a basic graphic with Zuckerberg and Schmidt looking annoyed that whoever is using the site is vigilant online, and so isn’t as easily fooled as they’d like. As with the other pages, I made the image work by making it a background image with CSS.
PROTOTYPE I then changed the way the user accesses the app prototype, and my Bechance portfolio. It’s now even easier on get access to it on mobile if the user finds the site on a computer - now they can just
scan the computer screen rather than navigating to the website on their phone. There are then basic instructions on how to install it. The standard link is also more prominent now.
STOPSPYING.TOMARROWSMITH.CO.UK 24
APP PROTOTYPE The purpose of the app prototype was to envision how a user would interact with such a service. The nature of the software in general is quite abstract, as it’s just a filter between the user and the service. This makes it difficult to think of specific features for the app, but the main theme I started with was customisability, with the ability to manage what features are working on each service. After doing an interaction timeline, I rendered the individual screens in Photoshop, making note of common elements like lists, navigation bars and particular buttons. Keeping all of the screens to the resolution of an iPhone 6 screen, they were sure to look great.
Interaction Timeline/ screen sketches
INVISION ECONOMY I found an app prototyping platform called InVision, and is used by developers to quickly get rich interection prototypes with their apps. This seemed like a much more economical method for making this small side project, as opposed to learning Xcode and making a real app, and still have it look and work exactly how I wanted. It’s also possible to share the prototype with a link, so others can install it on their phone. The long-term plan for this was the degree show, and would letting visitors take away from the experience and use it on their own phone. InVision is the only way I could do this, as App Store approvals wouldn’t allow a fake app on their store.
< Xcode
invisionapp.com 251
IOS 8 TEMPLATE For most of the interface elements, I used an iOS 8 PSD reference template by Teehan and Lax. It contains many of the essential views and UI elements to make app mockups that look iOS native. This was to be important to make a realistic and compelling visualisation of the potential app.
TEEHAN+LAX
Site link
LEARNING WHAT IS INVISION? InVision is a web-app platform that allows you to quickly and easily create interactive app and website prototypes from screen images (images of an interface, for example). By uploading your images, realistic prototypes can be made without the need for coding an app - perfect for this side of the project.
Link to next screen
“HOT SPOTS” The basic idea of InVision is to make interactive app prototypes from a cluster of screen images. Placing “hot spots” around buttons links them to other screens, with full transition animation and the ability to have fixed headers and inertial scrolling. If done well, it’s easy to fool anyone into thinking that it’s a real app. I started off with basic tap gestures to make a menu-within-menu system, and quickly had a working prototype on my phone.
Interaction type 26
Transition animation
FIXED HEADERS
Fixed headers, when paired with a PNG version of a screen allows some transparency under things like navigation bars to make them feel even more realistic and mobile-native.
INVISION SYNC
When I really started getting into InVision, I downloaded their Sync app, which enables quick upload and updating of screens as you work on them. I got deeply embedded in the process of prototype app development, and I loved that feeling.
SHARING
As mentioned before, sending links of your prototype is easy, and can be instaled on an iPhone as a webapplication. By tapping the share sheet and “Add to Home Screen,” my prototype was then loaded.
ANIMATED GIFS
GIFs are also supported for prototype apps. I wanted to add some for when switching ona nd off features to make it an even more polished experience. I wasn’t able to do this though, as my GIF was too quick to have transititon animations either side of it. I did, however make a longer GIF for the homescreen of the app, which is explained in the following page.
TEST DRIVE
I was then able to test out how the prototype felt on a phone! This was a really awesome experience, as I’d never made anything fully interactive on a phone. It also helped in the development of the actual screens, as I noticed some buttons were too small to hit reliably with a finger, and the text was too small to read comfortably. I made a short video showing off some of the preliminary features, like the “Learn” screen, and toggling on and off some of the features.
Click image to watch Stop Spying Preview. 271
UI TWEAKS
Larger Buttons
I then tweaked parts of the prototype app to make it look and work better. All major buttons span the width of the screen, and the “Learn” screen now includes updated imagery, and how to use the app.
SAVINGS
A cool new feature allows the user to see in real-time how much data has been kept from facebook and Google, thanks to Stop Spying. It breaks this down by feature, and then by, for example, how many pictures have had facial recognition data removed.
Before/ After
WATCH
There is also now a “watch” button, which incorporates the features section of the motion graphic. This is to give some context to the abstract features. Savings
Watch GIF
28
Learn Screen
INTERACTION TIMELINE This is the full interaction timeline of the prototype app. I kept the number of screens to a minimum, as itâ&#x20AC;&#x2122;s easy to get lost in menu-within-menu systems. Adding animated GIFs, Transparency to navigation bars, and keeping close to the design of iOS 8, I think this is an experience close to a native app.
291
TRY THE PROTOTYPE APP Scan the QR code to install the prototype app on your own iPhone, or follow the link on your desktop to see it in your browser.
HTTP://INVIS.IO/ZX2699YMW 30
MOTION GRAPHIC
Definitely the most labour-intensive part of the project was the motion graphic piece. I had actually done a small part of this when the project was still campaign-oriented, but the script was all new. I had a basic idea in terms of a storyboard, but decided to leave the finer points until the editing phase, as I was keen to learn new After Effects skills and didn’t want to limit myself from the start.
THEME
I was inspired by the interaction to Terms and Conditions May Apply, and the way it used cartoons to communicate the same issue that I’m tackling. It made it funny, engaging and quirky wile telling a serious message - like Dumb Ways to Die does. I wanted this for parts of my piece to do the same thing, although a bit less cartoon orientated.
WHY A MOTION GRAPHIC? The motion graphic’s function is essentially the same as the website - to tell a story and advertise why Stop Spying is important in a professional way to imbued authenticity. To start this off, I made a basic script to be read in a voice over- something I’d never done before. A voiceover could go alongside the animation to tell the story, talking directly to the user rather than some abstract animation.
Fig 29. Terms And Conditions May Apply Intro. 2013.
VOICEOVER & SCRIPT
STORYBOARDING
I quickly learned that a voice-over script can be much different from a written one. Things that I thought would sound right just didn’t, and I had to endlessly tweak it to deliver the right message. This lead to a stark contrast between the language used in the original and final versions of the script. The hardest part was my voice: even after countless attempts, it was still dull and I was having difficulty giving it any elevation. I ended up seeking help, and came across a surprising tip - holding a pen to promote voice fluctuation. Playing with the pen while talking just made my speaking so much more engaging, and I started to enjoy reading aloud. I used a Rode Podcasting mic plugged into Quicktime to record the audio.
http://bit.ly/1HhbgMx
I’d done a range of sketches for each scene to reflect what I’d written in the script. These were kept fairly loose however, as I found myself enjoying developing and iterating upon the scenes in Illustrator after coming up with a basic idea on paper. Following a script made the development of each scene a lot more focussed from the beginning, rather than if I had started with the sketches and written the script afterward.
Fig 30. Rode Podcaster. 2015.
VIDEO SCRIPT Click here to follow link
How To Have An Expressive Voice: Click here to follow link
Preliminary sketches. 311
SCENES Referencing my storyboard throughout, I started creating the scenes for my motion graphic piece. I made these mostly in Illustrator so they would end up being every bit as sharp at any size, thanks to After Effect’s vector rendering settings. Creating everything from scratch felt like a daunting task, but gave me precise control over the visual theming - simple and colourful. I also wanted to visually represent the script so the two work perfectly together, and this lead to some interesting compositions. This visual style was different to anything I’d done before, and on a scale that I’d never tried. Making all the scenes complement one another took a strict approach to frivolously adding elements, and creating start/ end points that merged into the next scene.
SCENE LAYERING EXAMPLE
Layers are seperated thoughtfully to provide the best effect.
32
IMPLEMENTATION
AFTER EFFECTS (AE)
I’d never been able to work well in After Effects, but knew it offered better fine control over animations than Final Cut, which made me willing to try it again. This “dive in” approach got me learning the workflow and interface fairly quickly, and I was soon confidently going in and out of comps, editing, cutting and gradually building in tandem with the voiceover. The most important thing to remember for me, was to keep organised with layers, as thumbnails aren’t always readily available in AE. This made the transition from AI to AE much easier.
To make editing more manageable, I cut the voiceover into separate files and animated each scene individually. I then deleted the separate audio files, lined all the comps up to form the full video and overlaid the full voiceover so the sound was uniform.
Editing mostly consisted of finely controlling scale, rotation, opacity properties for many different elements, with varying difficulty depending on a scenes complexity. In instances where things were overly complex, I went back to illustrator and simplified the scene, which actually made them more concise and therefor much more effective. Despite this, at times I found the key framing interface overwhelming, especially when all the video layers didn’t all fit on the screen. To counteract this, I got familiar with the keyboard shortcuts that only show the properties you want to edit, saving space and time tying to find the right controls.
In a multi-disciplined project like this one, I found the Adobe apps worked very well together. One edit of a scene in Illustrator was mirrored instantly in After Effects. Editing an image slightly in Photoshop updated the Dreamweaver preview in tandem. This really took the pain out of app management, and allowed me to focus on work-related issues more. 331
SPECIAL EFFECTS I’d always used Final Cut for things that required some realistic animations and transitions. Little did I know, AE also has a huge library and some very novel extras. A few favourites include Radio Waves, Scatter and Gaussian Blur. AE allows granular control over
effects, letting me do anything, which I appreciated. In areas where I was communicating abstract ideas, like the Stop Spying features, the effects I experimented with brought about a much wider range of emotion to otherwise lifeless elements.
IN ACTION: SCENES WITH EFFECTS
Radio Waves with Scatter and Gaussian Blur applied
The “Filter” scene was one with a heavy emphasis on special effects, as I wanted a slick way of showing how Stop Spying deletes a lot of extraneous data so that Facebook and Google can’t access it. I used effects like Beam, Radio Waves, Scatter, Gaussian Blur and more to do this in a deceptively simple way. The beam represents the transfer of data from the user
Beam, applied to a null object
to Facebook and Google servers, and is significantly smaller after being filtered to show Stop Spying decreasing the amount of data. This deletion of extra data is represented by Radio Waves, which also has Scatter and Blur to make the waves look like packets of data fizzling away. Combining all of these effects creates a sophisticated animation sequence.
SMALLER EFFECTS Even using just simple effect controls like Outer Glow and changing the opacity can make some nice little touches, like in the “Government Compliancy” scene where the infographic shows how much data is compromised asset’s given to governments.
34
STROKE/ WRITE-ON Stroke was another effect that made a Write-on effect possible in the features scenes for Isolate and encrypt. This is a really nice effect that can subtly communicate simple ideas that make all the difference. Stroke, creating a data transfer animation to represent Isolate
Stroke, emphasising the security of the Encrypt feature
IRIS WIPE Familiar effects like Iris Wipe made possible transitioning from one scene to the next seamlessly. I used this for the first introduction of Stop Spying, with the wipe emanating from the iris of the eye in the app icon. It’s a simple effect that grew complicated when I wanted to use two of them to bring the icon into view while covering what was behind it. This is where AE’s fine adjustment came in handy, although it was very frustrating sometimes.
351
FINE TUNING AUDIO The one downfall of AE is the fact that previewing audio involves rendering the whole video, either with RAM preview of by exporting. I wasnâ&#x20AC;&#x2122;t prepared to do this every time I needed to trim or edit the audio, so I exported the video from AE into Final Cut, where I was able to attach the voiceover file and music. Now, I could easily and precisely edit the sound. Audio editing in Final Cut Pro X
BREATHS
Trimmed where I took long breaths,a nd therefor lost pace with the visuals..
MISTAKES
I lost my place in a couple of areas, and so cut out areas where I wandered oďŹ&#x20AC; script.
36
FADES
Adding a fade to the music at the end, easing out with the video.
AUDIO BOOST In a few areas of the voiceover, I take long breaths or make mistakes. Editing thee out in AE would have been a nightmare, but was simple in Final Cut. The microphone I used to record the voiceover wasn’t as good as I thought it was either - turning out to be just a mono mic. To get a more stereo feel, I enhanced the voiceover with a Bass Boost effect, and tweaked the Volume and Pan properties. The end result was a voiceover that sounded better, was easier to edit and banished some of the horrible mistakes I made while recording. Final Cut Pro X Audio editing UI
THUMBNAIL The final bit, and usually most important to promoting online, is the thumbnail image. If this looks bad quality of uninteresting, people will just scroll past it. Zooming in on the iris of the icon with adding an Iris Blur, flanked by the “Stop Spying” text, this thumbnail hopefully wil lattract views. It will also break up the website nicely, with a bold and colourful impression.
WATCH IT Click on you YouTube “Play” button to the right or follow the link:
HTTP://BIT.LY/1HDLIAK 371
USER TESTING
After getting all of these design artefacts to a fairly finished standard, I decided to pitch all of my work in a User Testing activity. I got four people of varying ages to try out the website and see how they got on with it, while I asked them questions about what they saw. I conducted the tests individually, and asked the participant to speak aloud about what was grabbing their attention, what they didn’t understand and so on, as they navigated the website. As they did this, I also asked them to complete a series of tasks or find specific information to make sure it the site communicated clearly.
USER TESTING QUESTIONS • • • • • • • •
On first glance, what does the header picture say to you? Who are the figures in the header image? Have a quick read - what does the product do? What platform is it available on? What are the main features of the software? Does this look like a reputable product? How do you sign up for the beta? Based on what you think of the product, decide whether you want to sign up and take the appropriate action.
PARTICIPANTS CHLOE
CHARLOTTE
CARRIE
GREG
CONSENT FORMS AVAILABLE IN APPENDIX
USER TESTING NOTES Rather than tackling with the ethical issues of recording sound and video, I decided to take notes on the major events that took place during testing, viewable at the link below. Click here to follow link
Chloe was my first candidate, who found navigation easy and understood most of what Stop Spying is. She read more into the header image than I ever had, saying that the user looks like a target due to the arrangement of colour - Wearing yellow, in a red glow, with a blue phone. A happy accident! One of the biggest pieces of feedback I got is that the product doesn’t cater to enough people. This is because it’s currently iPhone only – which would mean Chloe can’t use it. She does have a laptop, and was puzzled as to why such a product couldn’t exist for that platform as well. Because of this, she didn’t see any point in singning up.
CHLOE: DIDN’T FALL FOR IT “IPHONE ONLY = NOT OPEN ENOUGH” “GOOD IMAGERY” “CLEAR COMMUNICATION” 391
Next was Carrie, who’s feedback was similar to Chloe’s, apart from not mentioning about platform choice. Her major gripe was the header image, which makes the two CEOs look “too prominent,” in her opinion. To make them look more “lurky,” she recommended they be greyed out slightly and set back to imbue the characteristics of shadows.
CARRIE: FELL FOR IT INTERESTING AND MEANINGFUL PRODUCT
She was also confused about the “Spies” heading, as her eyes were immediately drawn to the top sentence “Government demands”. This was something I had overlooked at first.
LITTLE TOUCHES NEEDED
She wanted to sign up for it, saying that “Anyone who gives a monkeys would! It’s obvious that privacy isn’t private.” She did sign up, and didn’t pause at the check box - it seems to work! Because the following page was surprising, she kept reading until after the terms and conditions section, absorbing the entirety of the message. Bingo. Greg interacted with the site in the way I always want everyone to. He understood what the header image was saying, watched the video, and answered all of my questions correctly. He knew what the product was and what problem it solves. He also liked the technical feasibility of it, and the way the features were named to accurately represent their functions. He had no trouble entering his email and agreeing, exclaiming “What have you done!?” when he saw that he’d been tricked. As he read the explanation, he realised what had happened.
GREG: FELL FOR IT TECHNICALLY FEASABLE SEEMS LIKE IT COULD EXPAND TO BE MORE
CHARLOTTE: FELL FOR IT ATTRACTIVE CONVINCING AND SURPRISING JARGON LANGUAGE 40
Charlotte was able to answer all of my questions and understood what the product was. She stopped to watch the video because that’s her preferred medium, and thought it was perhaps a little bit too fast paced, with a lot of information. She also brought to mind that i’ve been a bit too technical in my language, with words like Plug-in and Beta, which mean nothing to her. This, at first, made her think that “trying” the beta sounded like too much work. When I asked her to either try it out or not, she didn’t have much reservation putting in her email address and signing up for the beta. The surprise on her face showed she wasn’t expecting to be tricked. Because of this, she was then reluctant to try the prototype app, which she thought would track her.
CHANGES AFTER USER TESTING OPENING IT UP I appreciated all of this feedback and acted on most of it. The feedback that I didn’t act on was for little things that I knew in my gut were right already. The biggest change I made was to make the product more open and appeal to more users by giving Stop Spying a presence on desktop and laptop machines. Because the product is essentially a network intermediary, why couldn’t it be accessed from any
device? To keep the software as lightweight as the prototype app, I created a concept for a Stop Spying browser plug-in similar to something like Ad Blocker, making access easy through Safari, Chrome and Firefox. I kept the layout and arrangement the same as the mobile app, while appealing to the aesthetic of desktop UI.
SKETCH - A NEW TOOL Since making the initial mobile app screens in Photoshop, I’d found a new app called Sketch that makes this kind of work much more effective. It’s made by Bohemian Coding, and is a lightweight app developing app with some heavyweight features that help create more realistic results. It combines some image processing of Photoshop with the shapemaking tools of Illustrator, leading to some really detailed work. With this, I made all of the screens for the browser plug-in.
PLUG-IN With a simple black and white icon similar to the full colour version, Stop Spying can now live in the toolbar of a web browser. Clicking on it brings up a small control panel similar to the iPhone app, able to control individual features, login information and view data savings. A new “current activity” view shows real time updates on how Stop Spying is protecting your data.
Main view
Toolbar icon
411
Service options
SPACING AND IMAGERY To give the website the same impact on desktop as well as laptop screen, the header section of the site was moved up quite substantially so the message is more compact and viewable all at once. This problem arose because I was developing the site on a 23” display, which made the site too big for a 15”, for example. I then edited the “Spies” image to draw eyes to “Google” instead of “Government,” eliminating any confusion.
NO MORE JARGON Terminology is now less jargon across headings. Charlotte found this to something that made her misunderstand certain things on the site, and recommended changing it to common language and verbs.
REFLECTION
Old:
TRY STOP SPYING BETA
New:
EARLY DOWNLOAD
Watching people using and absorbing something I’ve made was a fantastic experience, especially when it all went to plan. The actual user testing process was very straight forward, and I got quite confident talking about my work, which I think rubbed off on my testers and their interpretation of it.
After my user testing, I have a much better understanding of what people expect from the product, and where it was falling short. Some of these are profound, others minor yet still important. I intend to make a good few changes as a result.
COPYRIGHT WOES I’d been worrying in the back of my mind about the Copyright status of the images I’ve used for the hero image on the website. They were both images from TIME and Financial Times (who commissioned a photographer called Spencer Murphy), are therefor probably Copyright which would prohibit me from editing the images. After looking into the companies’ Copyright policies, I was right, as they don’t allow modification – a dodged bullet. So, I’ve now updated it with images that explicitly allow modification from Flickr and Wikipedia. I actually think the two men look a lot more real than before, although I do miss the harrowing stare.
Fig 31. Mark Zuckerberg At Techcrunch Conference. Fig 32. Eric Schmidt, Looking Left. 2005. 42
CONCLUSION/ REFLECTION Personal Development I’ve always wanted to be the one to design something well-rounded, interesting, provocative and beautiful. Products that imbue these characteristics are the ones I love to use and absorb the extra material surrounding them - their websites, videos and so on. When all of these extras are as polished as the product itself, it creates the best kind of user experience, in my opinion. When Stop Spying was a campaign, it had none of those qualities. It had the potential to be something, but nothing compared to what it is today. Making that decision to change my focus is the best decision I made in the whole project - imagine if I had carried on plodding away at forcing myself to do something I wasn’t fully invested in. I found a new surge of motivation when it turned into a product, and was a chance to have some real fun. Taking the time to design something from the ground up, with a number of other contributing elements has taught me so much about not only how to do this technically, but also about myself - I love it. I knew I was keen on branding, a bit of marketing, and the fantasy of designing UI and apps in a world where this is very much at the forefront. Even though it’s not a real product, it’s very real for me. It’s something I wish I could make because it’s something I’d want to use. This is why I took so much time and poured so much energy into every aspect of it. What really cemented this feeling was the user testing process, where the results really spoke for themselves. All the hard work paid off as my testers answered all of my questions correctly, aside from a few minor discrepancies, and really understood the product: why it exists, the problem it solves, and why it’s important to them. From this project, I’ve found that I’m really quite good at writing about something in a focussed way that brings people into the fold. I wonder whether this is derivative of being exposed to so much marketing language, being an avid enthusiast of the latest technology products. Making something really interactive and watching others use it is an experience I’ve not met as intensely as I did with this project, I suppose because it has so many facets - website, video and app.
Conceptual development My conceptual research was heavily influenced by my dissertation, which looked at surveillance as a whole rather than just online. Having a varied knowledge as a result helped me focus on and pursue this area of the subject. Being forced by the dissertation to focus on the conceptual has shown me how important it is, where before I would have considered it boring if it didn’t fulfil my desire for aesthetics and critical design. This time though, I found the investment made my work much better in a number of ways: I had sources and statistics to back up claims, a solid knowledge of the subject which made talking and writing about it easier, and an overall understanding on how my work is innovative compared to existing solutions. Technical Skills I learned a lot of new technical skills, as was expected. I feel like I’ve progressed in so many different areas, that equate to a being a better all-round designer. I was fairly good at web design concepts and basic HTML/ CSS, but I’d never really pushed myself to make a professional looking site with many different CSS properties - perhaps because I’d never had the a compelling enough of an idea to make it worthwhile? Relearning the basics and furthering my skills further was an incremental but noticeable process, which makes looking back at my old website work painful. The same thing goes for Video, an area that I used to be very flakey in. I would rely on an app like Final Cut or iMovie to make the process easier, and laden scenes with effects and transitions to make up for my incompetence. I got good at that, and made some nice videos that way. But when I started from scratch with Stop Spying, and was intent of making something professional, I knew I had to try harder. So I took the time to make vector graphic scenes from scratch rather than recording footage, and slowly but surely learned the ways of After Effects to animate those scenes. When I really sat down and thought of the whole storyboard holistically, I was pleasantly surprised to find that I had it in me. I now feel confident that I could take on a project that requires a competent hand in multiple areas, because I have a solid basic knowledge and know that I can always learn more. By tuning in 431
End note The most exciting part of FMP for me was keeping half of the project a surprise. Yes, the surface is attractive and works well, but the real message hidden deep and bound to the interaction of the user. This fresh, critical approach to design was a breath of fresh air for me, as I became bored of complaining through campaigns, photography and propaganda. No one wants a grumbler, but a trickster with a surprise is something entertaining and unexpected.
to professional creative processes helped with this. Even though the InVision app prototype is a relatively small part of the project, I learned a lot more than I have let on. Because InVision relies on many other apps to work, I picked up a lot of new tricks with Photoshop, was introduced to Sketch 3, and developed my workflow in ways that make me and my work more efficient and professional. The experiences I’ve had during this project have really spruced up my technical vocabulary. Aesthetic Development Honestly, I think my aesthetic development hasn’t been advanced as radically as my other qualities. I did take a lot of reference from my research, but feel I already have a strong sense for aesthetics. I progressed a lot in the finer points of image making, taking the time to make higher quality finishes with things like photos. For icons and the like, I opted for Illustrator over Photoshop to get crisper and higherresolution artwork, learning a lot about that software in the process.
In the end, all that’s left is how others experience the work. The fact that my testers fell for the trick is a good indication that others will as well. In the half a year I’ve spent working on this, I didn’t think it would change me both professionally and personally: learning new skills and changing my perception on something that so many deem fair and agreeable. I’ve now set a new personal benchmark for myself and the quality of work I create in the future. Who knows if Stop Spying will ever materialise into anything. Maybe Aral is in need of a final few features before he ships his ind.ie phone...
Challenges The challenges associated with this project were mostly in the technical and aesthetic department, and making every artefact as professional-looking as possible. I’m surprised how I let these details slide so much during the early development of each artefact - especially the website. I kept referencing the websites I dissected as part of my software promotion research, and slowly built the site up bit by bit to give a better overall impression. CSS was the biggest pain point in this section, as I found the number of CSS properties starting to escalate so much they were all interfering with each other. On many occasions I would have to go back into the code and rectify these issues - sometimes deleting the thing I needed in the process. This kind of trial and error process filtered through into the motion graphic piece as well, as I’d tinker with different effects and keyframe combinations. In some complicated scenes where I wanted to do some fancy animation by combining different effects, I came very close to giving up and trying something else. I remedied this by taking breaks and coming back to the problem with optimism and patience, which would be sometimes rewarded by a few happy accidents!
STOPSPYING.TOMARROWSMITH.CO.UK
44