<div id="post"> <h1>Change Nation - the tech behind the scenes</h1> <iframe src="http://player.vimeo.com/video/39511237?title=0&amp;byline=0&amp;portrait=0" width="600" height="337" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/39511237">Change Nation - Finale Film</a> from <a href="http://vimeo.com/ashokaireland">Ashoka Ireland</a> on <a href="http://vimeo.com">Vimeo</a>.</p> <p><a href="http://changenation.org">Change Nation</a> is a project that <a href="http://ireland.ashoka.org/">Ashoka Ireland</a> have been developing for the last year.</p> <p>It, quite ambitiously, is about kicking off a series of interventions, projects, social enterprise ideas that address some of Ireland's problems, particularly as the country goes through a challenging period.</p> <p>I've been doing some event-based work with <a href="http://www.holymountain.co.uk/">Boz Temple-Morris</a> recently - I'm playing the role of a live-coder / data-wrangler / visualiser. As the creative director of the event he brought me in to think about what we could do from a digital point of view to support the idea. After a few open-ended discussions we settled on the idea of addressing the "it's not just a talking shop" issue that many events, summits and conferences suffer from. Too often I go to well-meaning events and there's never any follow-up to the offers of support that are made and conversations that happen.</p> <p>Here's how Change Nation came together (my role in all this was about one week of work in a year-long project).</p> <p><img src="https://s3-eu-west-1.amazonaws.com/stefio/images/change_nation_500.jpg" alt="Change Nation - the tech behind the scenes" /></p> <p><strong>50 Proven Solutions</strong></p> <p>Whenever I start a project, after working out what we're trying to achieve (in this case, addressing social issues in Ireland) it's important to focus on the simple elements that make up the project. What are the "units" that people can hold onto and understand. Luckily much of that thinking had been done before I joined in. The Ashoka team had researched 50 "Proven Solutions" from around the World, and invited the entrepreneurs behind them to come to the summit for four days to see if they could get their ideas off the ground in Ireland. These 50 are the focus of the whole project.</p> <p>&nbsp;</p> <p><iframe src="http://player.vimeo.com/video/39112096?title=0&amp;byline=0&amp;portrait=0" frameborder="0" height="300" width="400"></iframe></p> <p><strong>One-on-one Conversations</strong></p> <p>At many conferences there's a focus on panels and talks, break-out groups and so on. This was different - the focus was on one-on-one conversations. I'm really interested in how powerful this can be. Essentially the organisation acted as a match-maker to really make the most of the entrepreneurs' time in the country, and set up a series of conversations throughout the summit to give crucial access to decision-makers and power-brokers. Think heads of government departments, investors and high-profile business-people.</p> <p><img src="https://s3-eu-west-1.amazonaws.com/stefio/images/1W1K3652.jpg" alt="Change Nation - the tech behind the scenes" style="width: 100%" /></p> <p><strong>Change executives</strong></p> <p>Each of the 50 entrepreneurs was assigned a "change executive". Whilst the name is a little opaque, the concept is quite simple - these are very smart under-30s volunteers who had come through a rigourous recruitment process, and their job was to play a concierge / PA / curator / reporter role throughout their entrepreneur's stay. They ensured everything ran to time, that any blockers were removed and that actions were recorded and could be followed up on after the event.</p> <p><strong>The "Action" as a unit</strong></p> <p><img src="https://s3-eu-west-1.amazonaws.com/stefio/images/changenation_actions.png" alt="Change Nation - the tech behind the scenes" style="width: 100%" />So we realised that the outcomes of these important, high-level conversations were what really mattered here. So we made an "Action" into one of the major "units" we would hang other work from. The idea was that after each conversation the "change executive" would sit with the two people who were talking, and record any concrete actions that would happen as a result.</p> <p>We wanted these to be public. So we wrote them out large on pieces of corriboard (sturdy, plasticated cardboard) and physically displayed them during the event. Then we transcribed them into text, recording names and organisations, and they went straight out onto the web on the web-app we built for the event.</p> <p>Then, to really reinforce this process we brought in <a href="http://tobyz.net">Toby Harris</a> (my old VJ crew partner) and he visualised the actions as they came in on a large screen at each of the four venues that we held the events in.</p> <p>All in all, we managed to collect <a href="http://changenation.org/actions">around 300 actions</a>, and there's huge variety - "I'll introduce you to the minister", "I'll offer mentoring", "I'd like to run this project in my school"... Some are more concrete than others, but the crucial thing is that they are now publicly available online, all with unique URLs that we can refer back to and build upon.</p> <p>It's quite gutsy doing this in public, but it added such weight to the conversations, and the event actually felt like something significant was happening and that there would be follow-up.</p> <p><img src="https://s3-eu-west-1.amazonaws.com/stefio/images/1W1K3766.jpg" alt="Change Nation - the tech behind the scenes" style="width: 100%" /><img src="https://s3-eu-west-1.amazonaws.com/stefio/images/1W1K3754.jpg" alt="Change Nation - the tech behind the scenes" style="width: 100%" /></p> <p><strong>The tech</strong></p> <p>I was brought in quite late in all of this, and without being too harsh to the people who had volunteered to do their web production, the project had a pretty but very basic, static site as its digital front end. You know the kind of thing - there was an "about" page, a "news" section, and an "events" page. For the fifty solutions it was a single page with a list, and each item took you off to another site. And when Bono tweeted about the project it promptly took the site offline just from a handful of concurrent users.</p> <p>It really needed something very different to support such a radical idea, so I took over on the Tuesday preceding the event and started rebuilding it. Not the kind of thing I'd normally advocate to be honest! This first four days of work on the tech were about getting the app into a workable state so that I could add the features that I thought it needed - a live element, landing pages for each solution, the ability to get user input from anyone, comments, social integration, and so on.&nbsp;</p> <p>The stack I went for is my most familiar, and I seem to be using it on everything at the moment - <a href="http://www.mongodb.org">MongoDB</a> for the database, Ruby as the language of choice, with <a href="http://padrinorb.com">Padrino</a> as the web / data-model / business logic layer, <a href="http://mongoid.org">Mongoid</a> as a simple ORM, S3 for image storage, <a href="http://heroku.com">Heroku</a> (the Cedar beta in this case) for hosting, <a href="http://haml-lang.com/">HAML</a> for layout, <a href="http://pusher.com">Pusher</a> for live interactivity, <a href="http://jquery.com">JQuery</a> for UI and interaction, <a href="http://compass-style.org">Compass</a> for style.</p> <p>Once the site was rebuilt (the day before the event!) I started coding up the actual features we needed to support the event. We drew out a "social" map to make it clear what we were doing and where the conversation would happen. Essentially - the <a href="http://twitter.com/search?q=#changenation">#changenation</a> hashtag was by far our most active way of interacting with people who weren't at the event, but also Facebook latterly seems to have become a place for conversation. In fact, we gained about 700 likes during this short period.</p> <p>Because it was a custom-build I could code up and deploy features as they were required - essentially I live-coded the site/app during the event as things became necessary. This was really interesting, if a little pressured, but that kind of time-pressure does focus the mind.</p> <p>One nice example is the "<a href="http://changenation.org/live">Live</a>" (now "As it happened") page. We wanted to be able to grab things from the web as we found them and present them in a feed - videos, photos, tweets, links. I found that embed.ly had an API where you can give it a URL and it will give you back a full embed of the content at that URL (assuming it is in their provider list). So quite quickly (in about 2hrs) I made a simple admin area, we grabbed things from twitter, copied and pasted URLs into it, and then using Pusher the Live page would automatically update with a new embed appearing at the top of the page. Just that is something that could be useful for any event.</p> <p>Mobile support was a big deal too. 20% of our users were on mobile, and most of the work that the change executives did was mobile-based. Grabbing content, stuffing it into a shared Posterous group (by gosh these guys need to fix their user-on-boarding process. Horrible! But it worked a bit in the end). The original site had no mobile support at all, so I went responsive right from the beginning. I'm a little tired of the bootstrap thing, even though it's great, so I used my favourite <a href="http://getskeleton.com">Skeleton</a> for CSS. It's not perfect, because you're forced into using some old school non-semantic classes for layout, but because the design of the site was so unusual (45 degree angles on everything means lots of hidden divs) it seemed fair, especially given the time constraint.&nbsp;</p> <p>Admittedly the page load is a bit much for mobile, but the site did function, and I managed to drop the bounce rate for mobile devices from 65% to about 40% - not perfect, but an improvement for people who wanted to read about the event.</p> <p>One nasty gotcha we had was that the entire ident for the project was based around the Akzidenz Grotesk typeface. But there's not <a href="http://www.font-face.com/">@font-face</a> license available for it. If you're doing an event, make sure that the ident has this kind of licence (try things on <a href="http://fontkit.com">Fontkit</a>), otherwise you'll end up in a world of font-pain. I probably lost about two days in all of this to font tweaking at the expense of other, more impactful features.</p> <p>I also spent some time getting Facebook graph in on every page - I've not seen whether this has been useful yet.</p> <p>Toby's <a href="http://tobyz.net/tobyzstuff/tags/project/titler">Spark Titler</a> visuals app was a custom piece of software he has made, using Quartz Comoposer and XCode, and we used a simple <a href="http://changenation.org/actions/feed.atom">atom feed / xml feed</a> (probably not valid) to pull live data into it using a polling strategy (We're looking at Pusher for next time). Very very loosely coupled, and it meant the visuals would work even if there wasn't any internet because of local caching.</p> <p>&nbsp;</p> <p><iframe src="http://player.vimeo.com/video/39047603?title=0&amp;byline=0&amp;portrait=0" frameborder="0" height="300" width="400"></iframe></p> <p><strong>Photo / Video</strong></p> <p>We had a small team of videographers and photographers. These guys did a stunning job of documenting the event and at the end of each day <a href="http://tobyz.net">Toby</a> edited together and performed (!) a short 3-minute piece that really showed the progression of the ideas. Sadly, because getting good internet was a problem throughout the four days (on the last day we were on a shared iphone 3G personal hotspot!) we couldn't get the content up fast enough. In the end, we found that photos taken on an iphone and put on Twitpic were a much neater way of getting that "live" feel out. I think there's a role here for asking the photographer to do "proper" shots with their 5D/1D and then pull out an iphone just to get some shots online during the day.&nbsp;</p> <p><strong>Data-wrangling</strong></p> <p>We quite quickly hit the issue of just having too much data flowing around - tweets, facebook comments, comments on the site, posterous contributions, new actions on cardboard, RTE live content bein broadcast, and one of the most crucial jobs was handled by <a href="http://twitter.com/thewidget">Carolyn Jones</a>. She was our "data-wrangler" and just made sure that the right bits of information ended up in the right place in time. Quite a task! We were all frazzled by the end - it was like DJing with ten record decks.</p> <p><strong>Narrative</strong></p> <p>One element I wish we'd had more of would have been a reporter, someone to write it up as it happened in a text-based live-blog. One for next time(!).</p> <p><strong>What next?</strong></p> <p>I've written this up just as a way of explaining some of the components that came together for this ambitious event. We played a small but crucial part in the process - documenting, making transparent, communicating, archiving and supporting the future success of these "solutions" and making sure the "actions" actually occur.</p> <p>We're operating in some unknown territory here, so I'm chatting to the guys at Ashoka about where this could go next. I've got an idea for an "Activism CRM" that helps people collaborate and keep track of these actions, and support them digitally and transparently. Whether or not that sees the light of day, the crucial thing is that the event happened, it was well received, people "got it", and we've started a few ripples that could result in some ambitious social projects in Ireland.</p> <p>&nbsp;</p> </div> <div id="related"> <h2>Related Posts</h2> <ul class="posts"> <li><span>31 Jan 2013</span> &raquo; <a href="/2013/01/31/sketching-with-code/">Sketching with Code</a></li> <li><span>07 Sep 2012</span> &raquo; <a href="/2012/09/07/finance-apps-for-a-small-business/">Finance apps for a small business - what I'm using to make my life easier</a></li> <li><span>01 Sep 2012</span> &raquo; <a href="/2012/09/01/skit/">Skit</a></li> </ul> </div>
blog comments powered by Disqus