IMPKT Increasing youth engagement in politics
CJ2 Sanjan Sabherwal w10003260
Utterly Captivating Adrian Stokes
1 QUESTION 2 SIDES 12 HOURS EVERYDAY
Making IMPKT
THE JOURNEY In 2015 Britain will hold its first ‘social media election’, which signifies a great change in the way political parties communicate with the electorate. Today, people control the media they consume, meaning political parties and activists can no longer rely on broadcast media to get their message heard. Instead they have to develop new ways of engaging with the public, and social media platforms have become their battleground.
YOUNG PEOPLE
Y U NO POLITICALLY ENGAGED?
Impkt
Poll reveals 59% of 17 to 21 year-olds say they will not vote in 2015 6th May, 2014, Matt Chorley, MailOnline POLITICAL EDITOR
CONTEXT
Today, disengaged young people are less likely to develop the habit of voting later in life. Young people feel excluded from the current democratic process. A lack of feedback has caused apathy towards local and national Government. They no longer believe they can have an impact. Popular online news and social media sources provide a feed of disparate, and often biased, content to consumers, which are easy to overlook and hard to critically assess. Complex political language is a large barrier to entry for young people and current youth orientated news sources can be patronising. People feel that they don’t have the time to explore political issues in depth, and it can be hard to identify a starting point. IMPKT aims to aid political understanding by making civic issues more accessible, appealing and youthorientated in order to spark discussion and debate among young people, encouraging them to engage in the democratic process.
25
Impkt
THE SERVICE
Prepare Suggest topic @theIMPKT #initiateIMPKT
Connecting Young People To Civic Issues Via Daily Social Media Polling
Youth engagement in politics
25
IMPAKT is a not for profit organisation aiming to increase youth engagement in civic issues by introducing them to political parties, charities and activists using a perpetual social media polling campaign. ORGANISATIONS
Everyday, IMPKT gathers suggestions for forthcoming debates using the #initiateIMPKT hashtag on Twitter, gaining online audience through ‘trending topics’. Questions are selected based on the frequency of requests and their relevance to the target audience. Asking one question per day means IMPKT give its users a deeper understanding of issues without being time consuming. The service has two levels of engagement; The first combines real-time content sharing on Twitter with digital advertising in public spaces. An iconic polling visualiser, nicknamed ‘The MVMT’, displays the data to broad audiences - raising awareness of the campaign and encouraging people to join the online conversation. Once people have become aware of IMPKT, they can engage with the rich content within the application. This feeds users debates, encouraging them to make IMPKT a part of daily life.
buy prom (within th service) IMPKT u
Tweet Suggested topics to @theIMPKT #initiateIMPKT or retweet your favourite
IMPKT USERS
POLITICALLY INTERESTED BUT APATHETIC
NEWLY ENGAGED USERS
OUR TOOLS
SELECTING THE DEB INITIATE Request
Assess
Approach
Polling questions from service users
Compare questions to content manifesto and Twitter popularitymost retweets/ favourites/ responses
contact organisati linked to suggested debate questions
e responses
moted tweets he Twitter - keeping unbiased
BATE
h
Increased website traffic
#IMPKTyes or #IMPKTno
because they are using the IMPKT platform
and larger campaign backing
Organisations using IMPKT can send notifications through the service to update users on campaigns they have voted on.
Positive impact Willing to use IMPKT as a way to engage new audiences
Continue to learn, debate, and become more involved with organisations Notification
Build a relationship with the IMPKT service
Review
Users are informed of the latest question
Manage and learn more about debates you’ve voted on
Immediate Feedback
Vote
Share Capturing the digital advert and spreading the message on image based social networks
people want to see their votes impact the MVMT so pull out their phones to tweet in. #IMPKTyes #IMPKTno
08:00
Join IMPKT by following us on Twitter.
Capture your individual IMPKT & Share on Twitter, Facebook, Instagram
DAILY AWARENESS CAMPAIGNS
Balanced debate follow relevant organisations and sign up to petitions/ IMPKT UPDATES
EXTENDING ENGAGEMENT THE APP
THE MVMT Confirm topic
Young people can instantly see the effect they have had and compare their views with the general will.
Image Share
Download app
Privately ions Contact stakeholding organisations d
s
Begin campaigning
Media buzz
Experience Encountered something new, exciting, and memorable!
20:00
REPEAT UPDATES
Real-Time
GO VIRAL!
Discussion
Full-Time
Support
Digital advertising boards display the daily question, real-time comments and voting statistics in public places.
Campaign awareness increased by the news media who report on the striking digital advertising. Content shared by organisations involved, friends on social networks, print adverts and other cultural collaborations all promote IMPKT and its mission.
Provide a platform for organisations to promote their beliefs and activities.
Final statistics, included number of votes and comments published on Twitter the stats can be used by stakeholding orgs for free (enabling smaller groups to gain momentum).
Enable organisations supported by voters to update users on campaign progress
To ensure a broad exposure, every week, the digital adverts are placed in a different city center.
Present summarise of the for and and against arguments
Using somethin cool as IMPKT t start tweeting u getting feedbac
Natal Presid
ng as quirky and to get students to us is a new way of ck
lie Dawn-Hodgeson dent of Northumbria Students Union
Impkt
LIVE
IMPKT went live on May 8th, asking ‘Do you feel part of Northumbria Students Union?’ We registered over 30 votes and comments from passers-by. Several checked up on the latest scores and were surprised by the ever changing results. At FullTime, the feedback was positive for the SU who are constantly trying to get closer to their student community. The student movement can be incredibly powerful and I think any opportunity to get people talking about politics and engaging in politics and realising it does have an impact on their day - to - day life in incredibly important and it’s definitely something, as a student union, we’d be looking to do in the run up to 2015. We’d definitely want to use IMPKT again, raise its profile and ask a question that really gets the political views of students
25
Utterly Captivating Adrian Stokes
Impkt
THE MVMT
The MVMT (Movement) is a data visualiser which searches Twitter for two specified hashtags #IMPKTYES and #IMPKTNO - and converts them into pink and blue coloured rings. These rings represent users’ votes on the daily question. As it is fed information, the MVMT grows. It breathes deeply to ensure the discussion continues. It brings life back to open public debate of civic issues. The four latest comments on either side of the debate are presented below the visualiser. This gives passers-by a snapshot of people engaging in intriguing, real-time action, encouraging them to join in as well. The MVMT switches between showing a chaotic battle of opinions and a calm, scientific infographic that provides the percentage votes on both sides. Statistics make the polling function of IMPKT clear and create a talking point for people watching the screen. Cycling between two modes holds the observer’s attention and increases the time they are exposed to the IMPKT app advert. This hybrid of infographic and art installation disrupts people’s daily routine, giving them something to share on social media. The design considerations are presented in the video below. Technically assisted by James Thomas
25
Impkt
THE APP
asdasd
The IMPKT App acts as a pocket companion to young people. It filters out Twitter’s noise and allows users to focus on the entire discussion surrounding IMPKT’s daily question. The app enables users to gain an in-depth and balanced understanding of the topics they have voted on, connects them with organisations actively campaigning for relevant issues and always presents the latest swing in the poll. The MVMT is at the core of IMPKT. It’s functional beauty powers our real-time digital advertising in city centers and is at the heart of the App. Its presence on every screen brings a sense of excitement and immediacy to the user experience. They can enjoy the MVMT after they have voted and by hiding the discussion. Inspired by Snapchat, users can share images of their vote’s impact on social media, spreading the brands identity, and attracting others to join in. To ensure the service would appeal to a young audience, its interaction design draws from some of the most popular apps today. The simple, yes/no voting is inspired by matchmaking service, Tinder. The simplified aesthetic integrates IMPKT into the iPhone’s UI - keeping the focus on the MVMT. The dark background image relates to the debate question and gives depth to the interface.
25
LOGIN
Comments are added the social media buzz if you login using Twitter. Anonymous login gives people a chance to express their views without fear of being judged by their peers.
HELLO
Introduce users to the in app voting interactions while ask them whether to receive notifications.
WHO WE ARE
During the initial setup, an overview of the service ensures transparency between IMPKT and it’s users
08:00
It’s begun - Now’s the time to vote on todays big issue
VOTE
SHARE
The questions are unbiased, short and simple. They includes the name(s) of the individual or organisation who initiated the debate. This transparency is designed to reassure users to trust the service and acknowledge engaged users!
Users can share a time and vote stamped image on social media to spread the IMPKT brand to their friends and family.
Comment bubbles below the question add an element of humour and character to IMPKT. The content is nostalgic, touching users emotionally and teaches users to swipe left and right to see both sides of the discussion.
Why #NO? Comment field
Agree, disagree or remove comments
LEARN, DISCUSS, ENGAGE The discussion feed allows voters to share the reasons for their decision and add to the online debate. Users can only comment on the side they support. If enabled, these are published to Twitter to increase the debate’s audience.
This discourages ‘trolling’ by users who choose to engage anonymously in the app. Comments ‘removed’ by users are checked by IMPKT to ensure they are not abusive. This data is used to generate a sections of the FullTime report.
IMPKT enables people to change their vote - encouraging critical reflection.
Swiping left and right in the discussion page presents users with official arguments from organisations tweeting during the debate. Organisations provide ways users can get involved and make an impact.
Users can agree, disagree, and remove comments from the feed, adding a layer of feedback for other users to assess.
SETTINGS
PROFILE
Users can select when they want to engage with IMPKT - so they won’t be put off by over prescribed updates and notifications.
Here, users view discussions they’ve engaged with and manage the issues they wish to receive updates on.
The countdown reminds users of the time limit, a subtle nudge to get them to share their views before its too late.
Users can suggest questions directly from the app.
20:00
FullTime! The results are in. Were you on the winning side? Read the report.
FULLTIME
UPDATE
FT shows the final results and summarises the two sides of the debate. It takes quotes from the strongest user comments, reiterating (showcasing) IMPKTs democratic values. Through FT users can revisit the day’s debate and the report acts as a record of users activity.
Campaign updates, sent by Organisations, are highlighted on the profile page.
Users only receive FT reports if they have interacted with the question.
Impkt
FEEDBACK
Throughout the design process, I worked with collaborators who have ensured the proposal will be attractive to the intended stakeholders. The next section combines their final responses with my design development jouney. Laura Warwick - Peer group tutor and service designer James Thomas - The design school coding expert Natalie Dawn - President Student Union Mark Law - App Designer and developer Adrian Stokes - Designer and Poltical activist Alex Lloyd - Labour Party Digital Communications Sue Wilson - Design Strategist Paul Railton - Graphic designer and magazine publisher
25
I think in principle IMPKT is something that would be interesting to political parties, and possibly groups like 38 Degrees too. Less as a tool for getting polling insight (parties can get more fine grained/ unbiased data already) but more as a way of connecting organisations with potential supporters. Alex Lloyd Labour Party’s Digital Communication team
CREATING IMPKT
THE MVMT THE APP THE SRVCE THE AD FINAL BOARD Designing app and MVMT together to ensure coherence
Giving the MVMT priority to ensure it was finished on time Reflected on the interim feedback and went back to the core idea of polling and creating a data visualiser instead of a sculptural form to be used in an app
March 10
Design app to match MVMT aesthetic
Realised the data visualiser could be used in digital advertising/ projected, making it a practical and engaging way of attracting a new audience offline
March 17
March 24
March 31
April 7
Making IMPKT
THE JOURNEY Test video made me take a step back and evaluate the design of the service
Live at the SU
Northumbria SU agree to using MVMT as part of a campaign
Discuss app format with Laura - needing to ground content creation
share proposed 38 degrees tie in with Adrian Stokes Decide questions should be asked by users and orgs, making it unbiased
April 14
April 21
April 28
May 5
Check content Print Board/ start video with Laura editing
May 12
May 15
Increasing political engagement amongst young people throu an offline and online campaign. Content and Data Data from online and offline student civic engagement activities such as elections and society movements.
The Daily Rubbish was a disruptive design experiment which prompted people to make a political decision during an everyday activity. The polling results were then measured (in grams of rubbish) and then published the following day on the bin and on a twitter feed. Check it out at https://twitter.com/TheDailyRubbish
Beautifully visualised
An interactive digital artwork is used as a feedback mechanism which acts as a barometer of local engagement. It aims to put civic engagement at the centre of student life and increase awareness of hyperlocal political activity.
ugh
Making IMPKT
Made Accessible An application allows interested individuals to look closer at the real time data. An app could also be used to control which data set is displayed by the interactive art work.
THE JOURNEY
I struggled to find an appropriate context for my social media polling visualiser. My initial idea to create an art installation/ sculpture for city centres received tutor criticism for being overambitious and too conceptual. It aimed to display an infographic of local political opinions which adapted over time by gathering information using twitter. The ambition was that people could interact and search through a tree-diagram of data to learn more about political issues but the possible complexity of the information was extremely intimidating. Also, installing a permanent digital sculpture in a public space for young people to interact with frequently was naive. Lethargic, long-term opinion changes would have made the visualiser static. It wasn’t an appropriate way of creating an engaging campaign.
I Aim to measurably increase students civic engagement at Northumbria University and then take those findings and see how they could be implemented in a regional or national form to reduce young peoples apathy towards government come the 2015 general election.
Therefore I decided to focus on making polling data more accessible by designing an app, which integrated balanced news stories, polling data, and profile information enabling young people to assess their own political standpoint and increase their civic engagement.
25
A profile page shows how your avatar changes over time Opinions are logged and stories can be followed they being with a summery of the story. Creating memetic images which succinctly explain a point of view and spark a reaction Showing how many others have engaged will make people engaged. Simple Yes/ No voting The i button will pull up more on the story and show both sides of the debate.
The inspiration
CIVIC TINDER How can voting and content become an addiction? Tinder, the dating app allows users to swipe left and right in seconds, casting their vote on who they find attractive... Or not. Get notified when something you’ve voted on is actioned.
Follow issues in your profile to keep elongate engagement.
25
Making IMPKT
BRANDING
Gauging young peoples opinions of my initial brand CIVIC. While I got 30 responses, few commented on the authoritarian nature of the branding. I personally felt it was too dull so drew inspiration from popular media culture.
25
Making IMPKT
BRANDING
Concerned that developing an app in isolation would cause the project to become extremely content focused and stray away from a design brief, I reintroduced the offline data visualiser. By projecting the infographic or displaying it on digital advertising hoardings, it became more realistic.
25
Making IMPKT
PROJECTING
Concerned that developing an app in isolation would cause the project to become extremely content focused and stray away from a design brief, I reintroduced the offline data visualiser. By projecting the infographic or displaying it on digital advertising hoardings, it became more realistic.
25
FINAL BRIEF Visualising debates online and offline about topics for people to get involved and follow the updates. The question and data are projected, promoted on social media and in an app.
CONSIDERING CONTENT
Do you trust the media?
Content Considerations 25
MEDIA LENS A media alert is our analysis of a news story, sent out via email and published on our website. The alert compares the corporate media’s view of the world with fact-based, referenced and credible alternatives. We then invite readers to make their views known both to us and to mainstream journalists through the “Suggested Action� section at the end of each alert where we provide contact details for editors and journalists. The website, set up in 2001, by two political thinkers, aims to provide impartial analysis on the presentation and syntax of corporate news media to help citizens become more aware/ critical of the information they consume and are surrounded with. This website throws up an interesting question. If the service is meant to catalyse young people to be more engaged in politics, I must ensure the information they receive is from an appropriate source.
Key Insight Taking issues directly from news outlets may be as biased as taking them from organisations directly.
Content Considerations
THE NEWS Contemporary philosopher Alain De Botton’s latest book examines the media landscape we are surrounded by and how today, people are failing to be critical about the news stories they consume. “The ambition of living a good adult life in a modern democracy requires that we take on board all kinds of knowledge to help us remain moral, self aware and safe and to assist us in discharging our public and private responsibilities effectively. Yet some of this knowledge may not seem especially appealing at first sight. Left in charge of programming our own news, we risk cutting ourselves off from information that might be deeply important to our evolution. Far from helping us to develop a rich and complex individuality, ‘personalised news’ might end up aggravating our pathologies and condemning us to mediocrity.”
Key Insight Personalised news content can cause narrow mindedness and therefore this installation should deliver information on a broad range of social issues and not promote tailored content.
45
At first I wanted the questions received by users to be location specific to get people to volunteer and take an interest in their local area. The idea was to gradually introduce the audience to more complex and less ‘interesting’ news stories and debates - from out of this world to local questions.
While the idea was “smart” according to Laura Warwick, in practice it was convoluted to navigate and the issue of who asked the questions remained. IMPKT could set the questions based on trending topics but I felt that was undemocratic. At this point IMPKT didn’t really enable young people to make a difference, it just gathered polling data - something widely available to political parties already.
Laura suggested tying the service to petition websites like 38 Degrees. After exploring the site I realised the polls could double up as petition signatures or suggest future petitions. This way, young people could make a difference. Still mid-way through developing the visualiser and app I settled on 38 Degrees and left it.
Making IMPKT
THE QUESTIONS Whilst designing the app I continued to explore the source of the questions. Although inefficient, the process was eventually successful because it forced rigorous iterations to ensure the interface and user journey were engaging and as streamlined as possible.
After producing the first test video I felt the tone was too anarchic, too one-sided, leading me to reflect on the questions again. Being set by 38 Degrees meant only people who agreed with the organisations agenda could ‘make an impact’. Making the app biased and undemocratic.
25
I think you’ve accomplished something really cool here. The overall interactive element you’ve created with the Yes/No slider is great. Its simple, extremely clear and makes use the screens real estate perfectly. The comments under the users selection is nice, and encourages discussion. The sign up process is really nice, and I love how you introduce the slider to the user straight away, asking them to use it to gain familiarity. Overall I think the app design is a great mix between conventional native design elements and new design elements and interactions which allow you to establish the IMPKT brand. Mark Law
The interface looks smart and easy to use, at whatever level is required, depending on time and inclination. That users will be able to follow the arguments and change their views, so the final outcome is a true reflection of opinion at that time, is clever. I’m glad the user can opt in/ out at whatever level of anonymity they require. When enough voices have done so, then, like petition sites, the power that brings with it could genuinely influence policymakers and policy.
Adrian Stokes
DESIGNING THE APP
Paper wire-framing
Making IMPKT
ITERATIONS
Having never thoroughly designed an app before I discussed the process with Mark Law - an app designer based in Singapore and ex DFIer. He advised me to use paper to quickly iterate through interfaces before working digitally. I used the sketches to draw up more polished iterations in illustrator where I focused on UI detailing like colour, background and designing icons. Copying and tweaking art boards allowed me to test ideas fast and the document became a content bank prior to producing the final app template in Photoshop.
25
Photoshop template of the final app design
Making IMPKT
THE TEMPLATE
Using photoshop allowed the work to be rearranged quickly without loosing layout alignment which became invaluable when I chose to radically redesign the UI after testing a working prototype with users.
Using layers to manage elements efficiently
25
Texting updates to my phone to check each iterations functionality
Adding interactive elements to link app screens
Comparing two versions of IMPKT
Making IMPKT
PROTOTYPING
Invision, an online app wire framing tool allowed me to create a working prototype of IMPKT and send versions to mobile phones. This enabled me to create a test video of IMPKT v1 to see how users interacted with the interface.
I observed that the app was a jumble of different UI aesthetics and the length of time users spent on answering 4 questions was excessive. I had designed a linear process which risked disengaging users. (At this point my service had yet to be refined).
interaction screengrabs
25
Making IMPKT
TEST VIDEO
dfhaeilfhdlfaeh
The video had a lot of energy, but it failed to explain the idea. However, the app and visualiser looked real on screen so for a first attempt, visually the video was strong. Seeing the app and MVMT together I realised the MVMT’s beauty had been in its simplicity and the colours I had used initially to test the visual were more vibrant and engaging than red and green. This, combined with the realisation that the app had become over designed, over complex, meant it was back to the drawing board for the app and service aspects of the project. I remembered the simple yet striking Daily Rubbish I had designed for the exploration project. By only having one question and publishing results it introduced daily issues into peoples lives in a bite sized and accessible way. At this point the colours I was using were red and green for yes and no. With the use of four questions, each with two sub categorisations (also in colour) of theme and location relevance, it was necessary to keep a graphical coherence for the yes and no. My concern was that the red and green too directly represented good and bad when opinions should be unjudged.
25
Making IMPKT
APP v2
skfljneslkasdnfa;kfbelkfb The cards that had previously allowed users to swipe through multiple questions became irrelevant if there was just one issue. Feedback from peers confirmed my doubts about using ‘memetic’ questions to users as the humorous aspect undermined the value IMPKT would develop. In previous iterations I had wanted to show other peoples votes when users interacted with the question card. Now that the visualiser was finalised I thought to put that, blurred out behind the question to give a sense that the debate was constantly in-flux and needed to be fed. This lead me to including the visualiser as the background across the entire interface.
25
thread(“refreshTweets”);
currentTweet = 0;
int margin=20;
if(millis()/1000%80 < 55) mode =2; else if(millis()/1000%80 < 79) mode = 1; else mode =3; background(0); world.step(); ArrayList bodies = world.getBodies(); for(int i=0;i<bodies.size();i++) { FBody body = (FBody)bodies.get(i); float gravForce = sin(millis()/1000.0)+0.5; if(mode==1) { gravForce+=0.5; String name = body.getName(); if(name==null){} else if(name.equals(“Yes”)) { body.addForce(gravForce*(questionX-body.getX()+width/4),(questionY-body.getY())); body.setFill(0); body.setStroke(70,199,242); body.setStrokeWeight(2); } else { body.addForce(gravForce*(questionX-body.getX()-width/4),(questionY-body.getY())); body.setFill(0); body.setStroke(236,0,140); body.setStrokeWeight(2); } } else if(mode==2) { body.addForce(gravForce*(questionX-body.getX()),gravForce*(questionY-body.getY())); } else { body.addForce(-2*(questionX-body.getX()),-2*(questionY-body.getY())); if(bodies.size()>1000) { if(random(100)>99) { world.remove(body); println(“Culled body”); } } } } world.draw();
void draw() {
}
void mouseClicked() {
void addBall(boolean type) { for(int i = 0;i<8;i++) { float angle = random(0,360); float distance = 1000; //FBlob b = new FBlob(); float s = random(5, 15); //float s = 15; FCircle b = new FCircle(s); //b.setAsCircle(mouseX, mouseY, s, 20); //b.setPosition(width/2+random(-5,5), height/2+random(-5,5)); b.setPosition(questionX+distance*sin(angle),questionY+distance*cos(angle)); b.setRestitution(0.2); b.setStroke(0); b.setStrokeWeight(0); if(type) { b.setFill(0); b.setStroke(70,199,242); b.setStrokeWeight(2); b.setName(“Yes”); yesCount++; } else { b.setFill(0); b.setStroke(236,0,140); b.setStrokeWeight(2); b.setName(“No”); noCount++; } b.setFriction(0); world.add(b); } }
}
getNewTweets();
twitter = tf.getInstance();
TwitterFactory tf = new TwitterFactory(cb.build());
ConfigurationBuilder cb = new ConfigurationBuilder(); cb.setOAuthConsumerKey(“slQf3f9fEoSSaP07tulGWGDdi”); cb.setOAuthConsumerSecret(“HdlCRwICClNyojtXuTY89QVOCPfwM2u9zOuSANhV8ubicY1FDn”); cb.setOAuthAccessToken(“28826355-VT9ULNa8ayMVhaVthp55YUiYpq73hmJMFS6tLdpsT”); cb.setOAuthAccessTokenSecret(“zuMf4xSsdSrzNK4Rv7hMZOzSvNFYGAk9wa3cjvNm5v0NH”);
yesTweets = new LinkedList<Status>(); noTweets = new LinkedList<Status>();
FCircle b = new FCircle(100); b.setFill(15,15,15); b.setStatic(true); b.setPosition(questionX,questionY); world.add(b);
world = new FWorld(); world.setGravity(0, 0);
Fisica.init(this); Fisica.setScale(10);
questionX=width/2; questionY=height/4;
size(1440, 900); smooth();
font = loadFont(“HelveticaNeue-Light-13.vlw”); bigFont = loadFont(“HelveticaNeue-Light-48.vlw”); question = loadFont (“Impact-48.vlw”); sides = loadFont (“Impact-48.vlw”);
void setup() {
int currentTweet;
int questionX; int questionY;
List<Status> yesTweets; List<Status> noTweets;
float scale = 10; Twitter twitter; String searchYesString = “#IMPKTNO”; String searchNoString = “#IMPKTYES”; String s = “Do you feel part of Northumbria Student Union?”; String y = “#IMPKTYES”; String n = “#IMPKTNO”;
int mode = 0; //yesTweet count int yesCount = 0; int noCount = 0;
PFont font; PFont bigFont; PFont question; PFont sides;
FWorld world;
import fisica.*; import twitter4j.conf.*; import twitter4j.*; import twitter4j.auth.*; import twitter4j.api.*; import java.util.*;
I love the animated image; a shape shifting, story teller. It’s compelling and shows a form of active/ interactive democracy happening live.
Adrian Stokes
currentTweet = 0; while(currentTweet<noTweets.size()) { Status status = noTweets.get(currentTweet); fill(200); textAlign(RIGHT); text(status.getText(), 400, height/2+currentTweet*100+margin, width/2-400-margin, 100); if(currentTweet<noTweets.size()&& currentTweet!= 0){ stroke(255); line(400-margin, height/2+currentTweet*100, width/2-margin, height/2+currentTweet*100); } currentTweet++; }
currentTweet = 0; while(currentTweet<yesTweets.size()) { Status status = yesTweets.get(currentTweet); fill(200); textAlign(LEFT); text(status.getText(), width/2+margin, height/2+currentTweet*100+margin, width/2-400, 100); if(currentTweet<yesTweets.size()&& currentTweet!= 0){ stroke(255); line(width/2+margin, height/2+currentTweet*100, width-400+margin,height/2+currentTweet*100); } currentTweet++; }
textFont(font, 13); noStroke(); fill(0,0,0,128); rect(0,height/2,width,height/2);
}
}
delay(10000);
void refreshTweets() { while (true) { if (mode == 2) { getNewTweets(); currentTweet = 0; println(“Updated Tweets”); }
}
} catch (TwitterException te) { System.out.println(“Failed to search tweets: “ + te.getMessage()); System.exit(-1); }
while(noTweets.size() > 4) { noTweets.remove(0); } while(yesTweets.size() > 4) { yesTweets.remove(0); }
for(int i=0;i<allTweets.size();i++) { Status status = allTweets.get(i); String statusText = status.getText(); //if(statusText.toLowerCase().contains(noWord)) //{ // noTweets.add(status); // addBall(false); //} //else //{ noTweets.add(status); addBall(false); //} }
allTweets = result.getTweets();
//tweets.addAll(result.getTweets());
lastNoId = result.getMaxId();
result = twitter.search(query);
query = new Query(searchNoString); if(lastNoId != -1) { query.setSinceId(lastNoId); }
for(int i=0;i<allTweets.size();i++) { Status status = allTweets.get(i); String statusText = status.getText(); //if(statusText.toLowerCase().contains(noWord)) //{ // noTweets.add(status); // addBall(false); //} //else //{ yesTweets.add(status); addBall(true); //} }
List<Status> allTweets = result.getTweets();
//tweets.addAll(result.getTweets());
lastYesId = result.getMaxId();
QueryResult result = twitter.search(query);
long lastYesId = -1; long lastNoId = -1; void getNewTweets() { try { Query query = new Query(searchYesString); if(lastYesId != -1) { query.setSinceId(lastYesId); }
void keyPressed() { try { saveFrame(“screenshot.png”); } catch (Exception e) { } }
}
//textFont(question, 48); //textAlign(CENTER); //fill(50); //text(s, 10, 10, 70, 80);
else if (mode == 1) {textFont(bigFont, 48); textAlign(LEFT); text(((int)(((float)yesCount)/(yesCount+noCount)*100))+”%”, width/2+margin, height/2+3*margin); textAlign(RIGHT); text(((int)(((float)noCount)/(yesCount+noCount)*100))+”%”, width/2-margin, height/2+3*margin); }
}
{
if(mode == 2)// is mode equal to two //String s = “The quick brown fox jumped over the lazy dog.”;
fill(255);
fill(70,199,242); textFont(sides, 48); textAlign(CENTER); text(n, width/2+6*margin, height/2-margin);
fill(236,0,140); textFont(sides, 48); textAlign(CENTER); text(y, width/2-6*margin-10, height/2-margin);
fill(255,255,255); textFont(question, 48); textAlign(CENTER); text(s, width/2, 50);
MAKING THE MVMT
Making the MVMT
THE CODE
As I had never coded before, designing and developing a working visualiser was a complex task and required some technical mentoring by James Thomas. I began by working through Processingâ&#x20AC;&#x2122;s online tutorials and modifying existing examples to learn the basics of Java coding. Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology.
25
Making the MVMT
THE CODE
I began iterating design ideas and consulting James to understand how practical different designs of the visualiser would be to programme. Simultaneously I discussed the designs with my peer group to decide on a visual way of expressing the poll in an engaging and relevant way. Learning how to code and working with a tutor produced a steep learning curve. We organised meetings to go over work I had been doing, iterate ideas, fix â&#x20AC;&#x2DC;bugsâ&#x20AC;&#x2122; to ensure the programme ran smoothly and over a 6 week period slowly perfected the MVMT. My major concern with the visualisers development was time-frame. So I began modelling in mid March hoping to get the majority of work done prior to the Easter break. The structured sessions and time limit meant I had to make quick decisions and manage my time very effectively. The negative aspect was I began developing a visualiser without a clear vision for the service and app. With James becoming increasingly busy assisting other students I became more independent. The building blocks of the code were finished on April the 8th giving me more time to focus on the appâ&#x20AC;&#x2122;s design and explore the implementation of IMPKT.
25
Making the MVMT
THE CODE
25
Making the MVMT
THE CODE
25
Making the MVMT
THE CODE
We observed that the coding created stratified results so made the visualiser pulse to produce more randomised patterns. This made it feel more alive
25
Twitter limit the amount of times third parties can search their website to no more than once every 5 seconds. as we needed to search twitter for 2 search terms - a #YES and a #NO we faced not being able to show new tweets for 10 seconds. While this doesnâ&#x20AC;&#x2122;t sound long, a lack of instant feedback - the visualisation of the persons impact - especially in a public space risks people walking away from the campaign thinking it is broken/ fake etc. We managed to solve the problem by searching for a single term and then filtering these further within the coding.
The size of balls was a randomised between two constant values. eg. 5 and 15px - as the MVMT pulsed, smalled balls filtered towards the centre, creating an illusion of depth. Different sized balls travel at different velocities, adding to the chaos.
Making the MVMT
THE CODE
Once the visualiser reached the limits of graphical memory, it could no longer programme additional rings and miss-colours some. To counter this, rings were â&#x20AC;&#x2DC;culledâ&#x20AC;&#x2122; once the number breached a threshold. But this did not effect the final statistics.
25
Iterating colour combinations THAT’S THE COOLEST THING I’VE SEEN TODAY
CHRIS DUDMAN - TRANSPORT DESIGN STUDENT
Making the MVMT
THE CODE
25
This is a pivotal time in so many ways and IMPKT is exactly the kind of service that’s needed if there’s to be any chance of “redressing the balance of power”. If it could become a reality, then I for one will roll back the years and use it! What’s Twitter!? Great work. Adrian Stokes
THE FUTURE
For me, as the editor of a magazine, I am always looking for ways to interact with my audience and try and get a feel for what my readers are interested and their likes and dislikes. I would like to utilise IMPKT for the launch of our next issue as a way of engaging with our audience and hopefully it can help me move the magazine to a larger audience Paul Railton
The Future
FLEXIBILITY
By its very nature coding allows for adjustments. This enables the MVMT to adapt to different contexts whilst remaining appropriate and engaging. Looking ahead, there are many ways the IMPKT service could become more commercial. It could be augmented as an app into TV shows like the X-Factor final. You can have people tweeting who they want to win and have the visual in real-time on screen. During election times, the rings could be coloured to represent more than two political parties. It could be an addition to David Dimbleby’s studio and might keep him awake all night… The question and hashtags can be adjusted to spark discussion and debate at events. It could be used at new designers to engage visitors at Northumbria’s Stand adding to the social media buzz surrounding DFI. Adjusting the number of rings that represent one vote, and their size means a smaller audience doesn’t mean a small MVMT. It could be used by smaller business looking to increase their audience. A local example being Paul Railton, a photographer, designer and publisher looking to launch SoContent next month, a magazine supporting the arts in the North East.
25
The movie communicating the service is pure Paul Arden; powerful, pared back, informative, exciting and memorable. Nice sound track too. Adrian Stokes The video is excellent. I like how you set the context, and tell the narrative of the arena you are designing for, by highlighting the power of social media, before going on to show your product. Very emotive! Mark Law
MAKING THE ADVERT
MVMT on the wall
Making IMPKT
THE JOURNEY For the final advert I needed to give IMPKT more context. To really show the relationship between the rings and peoples votes and to demonstrate the empowering nature of IMPKT. I drew inspiration from the Arab spring. A socio-political upheaval made possible with social media. The Egyptians broke the record for the most people protesting - 33 million. A second consideration for the advert was the gender of the main character. While politics is no longer a mans game, I felt it important to show a girl using the service, encourage them to become more civically involved. Adding bold captions throughout the video made the function of the product explicit and reiterated the punchy branding of IMPKT. However, when showing the video to friends, they didnâ&#x20AC;&#x2122;t understand the context of the protest so I overlaid a news report covering the story. The same technique expressed the emotional reaction to the FullTime report using football commentary which, told of its powerful simplicity and added a masculine touch. Finally, shooting the video required a lot of weather report checking. Especially because I was borrowing projecting equipment and could not risk damaging all the electronics! reflection Shoot at test video allowed me to get to grips with using a portable projector (from file formats to where the visual looked strongest) and got the actress used to the app interface. Due to projector availability the shoot was largely unplanned which reflected in the final output. It also meant there was a lot of wasted time and thinking on the spot. This was corrected in the second video which I storyboarded to ensure I captured all the right app functions and created a stronger narrative.
25