1. How flood warnings should look online

    If you live anywhere in Britain, it won’t have escaped your attention that it’s been raining a bit, recently.

    This has been causing quite a bit of flooding. And when flooding happens, people need to know if it is going to affect them.

    Unfortunately, the Environment Agency flood warning website leaves something to be desired. It is, quite frankly, a usability dogs’ breakfast, with problems including:

    • It doesn’t answer the main question: Most users arriving at this page simply want to know if they might be in danger. The page should be all about answering that question.
    • It is trying to serve national and local needs: Information about flooding across the whole country might be useful to journalists or civil servants, but it shouldn’t be the main element.
    • Clutter, clutter: A massive grid of numbers which don’t really mean anything, plus lots of sidebar links.
    • Confusing graphics: The page contains a national map which doesn’t actually make it clear that the colours relate to the seriousness of flooding, or that it provides links to further content.

    There are also some non-design problems with the postcode lookup, but today we want to stick to just the design issues.

    Not just moaning minnies

    View Mockup

    At mySociety we try to be constructive in our criticism, and so whilst the flood waters are still draining from many people’s homes, we thought that we could do something positive. We want to show that a flood warning page could be an exemplar of clear, user-centered information design. So we made a mockup.

    Some of the improvements we’d like to point out are:

    • A big page title that makes it obvious what this page is, and the fact that it is official information.
    • All the main elements on the page are now focussed on the most likely needs of potential flood victims – journalists can follow a link to a different page for their needs.
    • We’ve removed roughly 90% of the links on the page for clarity.
    • We’ve removed all numerical data because it wasn’t adding value. Nobody can know if ‘5 warnings’ is a lot or a little without some context. As a nod to the overall context we’ve put in a simple graph, similar to a sparkline.
    • It presents a clear button to click on if you’re actually endangered by a flood.
    • It gives you a way to find out if other people near you are talking about local flooding via social media.

    We hope you like this. It’s just the product of a couple of hours’ work, so if you have any suggestions on how it could be better, please let us know.

    And, of course, we’re always happy to do similar work for other people.

  2. FixMyStreet’s been redesigned

    FixMyStreet, our site for reporting things like potholes and broken street lights, has had something of a major redesign, kindly supported in part by Kasabi. With the help of Supercool, we have overhauled the look of the site, bringing it up to date and making the most of some lovely maps. And as with any mySociety project, we’d really appreciate your feedback on how we can make it ever more usable.

    The biggest change to the new FixMyStreet is the use of responsive design, where the web site adapts to fit within the environment in which it’s being viewed. The main difference on FixMyStreet, besides the obvious navigation changes, is that in a small screen environment, the reporting process changes to have a full screen map and confirmation step, which we thought would be preferable on small touchscreens and other mobiles. There are some technical details at the end of this post.

    Along with the design, we’ve made a number of other improvements along the way. For example, something that’s been requested for a long time, we now auto-rotate photos on upload, if we can, and we’re storing whatever is provided rather than only a shrunken version. It’s interesting that most photos include correct orientation information, but some clearly do not (e.g. the Blackberry 9800).

    We have many things we’d still like to do, as a couple of items from our github repository show. Firstly, it would be good if the FixMyStreet alert page could have something similar to what we’ve done on Barnet’s planning alerts service, providing a configurable circle for the potential alert area. We also are going to be adding faceted search to the area pages, allowing you to see only reports in a particular category, or within a certain time period.

    Regarding native phone apps – whilst the new design does hopefully work well on mobile phones, we understand that native apps are still useful for a number of reasons (not least, the fact photo upload is still not possible from a mobile web app on an iPhone). We have not had the time to update our apps, but will be doing so in the near future to bring them more in line with the redesign and hopefully improve them generally as well.

    The redesign is not the only news about FixMyStreet today

    As part of our new DIY mySociety project, we are today publishing an easy-to-read guide for people interested in using the FixMyStreet software to run versions of FixMyStreet outside of Britain. We are calling the newly upgraded, more re-usable open source code the FixMyStreet Platform.

    This is the first milestone in a major effort to upgrade the FixMyStreet Platform code to make it easier and more flexible to run in other countries. This effort started last year, and today we are formally encouraging people to join our new mailing list at the new FixMyStreet Platform homepage.

    Coming soon: a major upgrade to FixMyStreet for Councils

    As part of our redesign work, we’ve spoken to a load of different councils about what they might want or need, too. We’re now taking that knowledge, combining it with this redesign, and preparing to relaunch a substantially upgraded FixMyStreet for Councils product. If you’re interested in that, drop us a line.

    Kasabi: Our Data is now in the Datastore

    Finally, we are also now pushing details of reports entered on FixMyStreet to Kasabi’s data store as open linked data; you can find details of this dataset on their site. Let us know if it’s useful to you, or if we can do anything differently to help you.

    Technical details

    For the web developers amongst you – we have a base stylesheet for everyone, and another stylesheet that is only included if your browser width is 48em or above (an em is a unit of measurement dependent on your font size), or if you’re running Internet Explorer 6-8 (as they don’t handle the modern CSS to do this properly, we assume they’ll want the larger styles) using a conditional comment. This second stylesheet has slight differences up to 61em and above 61em. Whilst everything should continue to work without JavaScript, as FixMyStreet has done with its map-based reporting since 2007, where it is enabled this allows us to provide the full screen map you can see at large screen sizes, and the adjusted process you see at smaller resolutions.

    We originally used Modernizr.mq() in our JavaScript, but found that due to the way this works (adding content to the end of the document), this can cause issues with e.g. data() set on other elements, so we switched to detecting which CSS is being applied at the time.

    On a mobile, you can see that the site navigation is at the end of the document, with a skip to navigation link at the top. On a desktop browser, you’ll note that visually the navigation is now at the top. In both cases, the HTML is the same, with the navigation placed after the main content, so that it hopefully loads and appears first. We are using display: table-caption and caption-side: top in the desktop stylesheet in order to rearrange the content visually (as explained by Jeremy Keith), a simple yet powerful technique.

    From a performance point of view, on the front page of the site, we’re e.g. using yepnope (you can get it separately or as part of Modernizr) so that the map JavaScript is downloading in the background whilst you’re there, meaning the subsequent map page is hopefully quicker to load. I’m also adding a second tile server today – not because our current one isn’t coping, it is, but just in case something should happen to our main one – we already have redundancy in our postcode/area server MapIt and our population density service Gaze.

    If you have any technical questions about the design, please do ask in the comments and I’ll do my best to answer.

  3. FixMyTransport launches – mySociety’s biggest project since 2008

    Everyone at mySociety is quite bubbling with excitement at the news that we’re today officially launching FixMyTransport.com , mySociety’s first new core charitable website since WhatDoTheyKnow launched in 2008. We’ve never before launched a site that took so much work to build, or that contained so much data.

    What is it for?

    FixMyTransport has two goals – one in your face, and the other more subtle.

    The first goal, as the site’s name suggests, is to help people get common public transport problems resolved. We’re talking broken ticket machines, gates that should be open and stations without stair-free access. We’ll help by dramatically lowering the barrier to working out who’s responsible, and getting a problem report sent to them – a task that would have been impossible without the help of volunteers who gathered a huge number of operator email addresses for us. Consequently the service works everywhere in Great Britain, our database has over 300,000 stops and routes for train, tube, tram, bus, coach and ferry.

    The second goal – the subtle one – is to see if it is possible to use the internet to coax non-activist, non-political people into their first taste of micro-activism. Whilst the site intentionally doesn’t contain any language about campaigning or democracy, we encourage and provide tools to facilitate the gathering of supporters, the emailing of local media, the posting of photos of problems, and the general application of pressure where it is needed. We also make problem reports and correspondence between operators and users public, which we have frequently seen create positive pressure when used on sister sites FixMyStreet and WhatDoTheyKnow.

    Who made it?

    FixMyTransport was largely built by one remarkable coder – Louise Crow, who started as a volunteer and who is now one of our longest serving core developers. She spent 18 months coding the site almost entirely by herself, wrestling with truly tortuous data problems and collaborating with Birmingham’s fantastic SuperCool design to make it look lovely (you should hire them, they’re great).  She also tolerated my ‘aspirational scattergun’ school of project management with remarkable good humour. She really is the king of transport coding.

    Credit must also go to mySociety core dev Dave Whiteland, who made the Facebook integration work, despite not having an account himself!

    Why is it dedicated to Angie Martin?

    Angie Martin was a mySociety coder for an all-too-brief period before she succumbed to cancer at a devastatingly early age. We’re dedicating this site to her in remembrance of a great, self taught perl monger who should still be here.

    We’ll be posting further blog posts about the development process, the data challenges, and the overall project philosophy. In the mean time, please keep arms and legs inside the carriage – FixMyTransport is just about to depart.

  4. FixMyStreet in Norway

    At mySociety we love our site FixMyStreet – it’s the epitome of a web tool that gives simple tangible benefits whilst generating a little accountability at the same time. Reports through the site were up 40% last year, so it’s clear that users quite like it too.

    FixMyStreet has been copied in many different countries, which makes everyone in mySociety very happy, too, even apparently appearing in a slide deck the White House uses to show innovative services. However, it turns out that the cheerfully minimalist, almost wantonly unfashionable user-interface has an unfortunate down side: most people who copy the site look at it, think “That looks easy!” and then cheerfully start coding their own clone.

    Deceptive simplicity

    Alas – the very simplicity that makes the site good hides the fact that making a site like FixMyStreet really work well is actually way harder than it looks. What will you do when a government email inbox fills up? What about when administrative boundaries change, due to an election or restructuring? How do you know you’re not scaring users away with careless wording? All the hard-won lessons from these questions have been baked into the FixMyStreet codebase, and we’re only too keen to talk to people about them.

    We were therefore particularly pleased when the Nowegian Unix User’s Group (NUUG) came to us to ask if we could help improve FixMyStreet to make it easier for them to install. Over the last month mySociety Senior Developer Matthew Somerville has been working hard with Petter Reinholdtsen and Christer Gundersen of NUUG, and here’s what they’ve managed in just a handful of weeks.

    • The launch of a Norwegian FixMyStreet called Fiksgatami, covering nearly every corner of Norway’s 300,000 square kilometers.
    • Problems reported anywhere within Norway will be correctly directed to any of the 400+ responsible municipalities, thanks to Petter and Christer’s amazing data sourcing skills.
    • As a necessary side-effect of developing this, Norway now has a free, public administrative web service gazeteer – http://mapit.nuug.no. If Norway is anything like the UK this will soon become an indispensable service for many other web sites and mobile tools.
    • The standard mapping is now OpenStreetMap, pulled together by the brilliant Norwegian OpenStreetMap community*. We couldn’t take a technological step backward, and so whilst the site uses OpenLayers if you have JavaScript, the map continues to work just fine without as well.
    • The open source FixMyStreet codebase has been upgraded to make it easier to translate into other languages, easier to use different mapping with, and easier to install. These efforts will continue, as we realise this has been one reason why others have made their own versions.
    • All this has been done without forking, so various major upgrades we have planned for the UK version will be exportable later in the year.

    NUUG’s Fiksgatami is the epitome of what makes civic open source at its best so unmatchably good. It was developed incredibly quickly: just a month to create what is effectively a fully fledged, best-of-breed nationwide e-government service – albeit an unofficial one. Thanks to the hard work of the public servants who fix problem reports, it will make small but meaningful improvements to the lives of a lot of people in Norway.  And it has made the free FixMyStreet codebase better and easier for other people to use to help them do the same thing in other countries.

    I know that at mySociety we are all looking forward to working with NUUG again. And I hope that this story inspires others to look at our code, and to work with mySociety to make FixMyStreet a service that can help everyone who would benefit from it.

    * We’ll be rolling out updated mapping (including OSM) and more in the UK, soon.

  5. Seeking to Contract an Interactive Designer for FixMyTransport

    Do you care for usability as much as you care for elegance? Do you enjoy knocking the rough edges off user journeys, as well as making them playful and attractive? Are you looking for a contract that will make a real difference to the lives of your fellow citizens? If so, we’d like to talk to you about becoming the design lead on mySociety’s next site, FixMyTransport.

    Why we need better design, and why we need it now

    FixMyTransport will be the next major charitable project built by mySociety. It is a project of a registered charity, currently running award-winning civic and democratic websites like TheyWorkForYou.com and FixMyStreet.com. Our sites have strong reputations for being effective and highly usable, but are not known for their shininess or fun-loving nature.

    With FixMyTransport we want to change this reputation, and start to become known for tools that are as lovely as they are effective. This decision reflects mySociety’s view that we have a leadership responsibility within the global community of civic-minded software developers: a responsibility to push the boundaries of what has been achieved previously, and to critically assess our own achievements.

    Why we think collaborating on the design for FixMyTransport would be pretty cool

    FixMyTransport is a particularly interesting challenge because it represents a deliberate attempt to pioneer a new approach to motivating civic action through the web. Our specific goal is to build a platform that can coax people who do not think of themselves as ‘activists’ or ‘campaigners’ over the edge into being micro-activists, by focusing on capturing and magnifying the passion that is created when people have problems with public transport.

    The design challenges that fall our way are therefore complex and fascinating. The service needs to be friendly and reassuring enough to encourage people to make what may be a hugely significant ‘first’ in their lives. But it must also be professional-looking enough to make the targets of campaigns feel that it means business. Furthermore, as a platform, different campaigns will head in different directions, and the design and work-flow will have to cope with many unanticipated uses.

    Organisational Context

    mySociety has ten full time staff, and a wider community of energetic and creative volunteers. We pride ourselves on being pretty good at smooth user journeys and worthwhile incentives for using the services. But we know that we have weaknesses when it comes to making things beautiful and playful, which is why we’re looking for a designer who is willing to do more than just prettify whatever we give them. We’re looking for someone with knowledge of user-experience deep enough to challenge us about the layout of pages and the user journeys through them, whilst being respectful of our own knowledge. We’re looking for a genuine collaborator who will teach us and learn from us as we work together, and someone who will understand when conversion tracking is worth using, and when it isn’t.

    We need someone who has a good understanding of the nature of interactive design, and who knows what web developers need from designers. And perhaps most importantly, we’re looking for someone who will bring a vision for how the whole user experience should fit together into something warm, reassuring and compelling to use.

    This contract and beyond

    We envisage that the contract will last 15-25 working days and we will pay standard commercial rates. We do not have a fixed office space, although for the duration of the contract we may hire co-working space in London for you and the FixMyTransport engineers, if required.

    Once we have established a strong working relationship with a good designer, we wish to continue that to implement redesigns across all our major sites.

    Person Specification

    Must have:

    • A portfolio of at least three web sites where you were the sole or lead designer
    • At least 2 years experience in a role that involved regular use of Photoshop or similar graphics packages for the design or mockup of web pages
    • At least 12 months experience working with software developers to implement designs (or must be a developer yourself)
    • Working knowledge of UX design, as distinct from graphic design
    • Must be resident in the UK

    Desirable qualities:

    • Prior knowledge of our services
    • Experience of iterative design based on conversion tracking

    How to Apply

    Send us an email to hello@mysociety.org briefly explaining why you’re the person for this job, and put the tag msjob8 into the subject line. Please share some of your portfolio, and write us 100 words on what sort of approach you think FixMyTransport needs from a designer. Deadline for applications is 9AM on Wednesday 2nd March.

  6. TheyWorkForYou Redesign

    Richard Pope has been redesigning mySociety’s biggest site TheyWorkForYou.com for a couple of months.

    He’s done a heroic job, as has Matthew with his epic import of Hansard data from 1935 onwards.  TheyWorkForYou is a much better site for their combined work recently. We’ll be writing more on the historic stuff soon.

    There are a few things I’d like from you as a member of the mySociety community:

    1. Please say a big thanks to Richard. This was not an easy or relaxing task at all, and he’s done it brilliantly. Just check a Lords debate to see the attention to detail. We are a very lucky organisation to have him, as he’s always in demand.

    2. Please give some constructive criticism on how it could be even better (please note, focussing on design here, we already have a load of feature priorities to deliver).

    3. Anyone who could help supply a redesigned logo, or some nicely processed parliamentary-themed artwork to sit in the background grey-boxes on the homepage would be doing a very Good Deed for mySociety.

    And lastly, please do pledge to become a TheyWorkForYou Patron, so we can keep doing things like this in the future!

  7. mySociety.org has been redesigned

    Angie Ahl has finally finished her epic migration of the much neglected mySociety.org site to a shiny new WordPress install. Angie’s been pretty ill whilst doing this, and I’m way beyond hugely impressed by her determination and good cheer whilst getting this done.

    Richard Pope has given the site a lick of paint too, and the rest of us have been busily using the CMS to update all the horribly out of date text that littered the old site.

    There are many changes, but perhaps most useful for many of you will be the fact that the blog is now fully categorised – so if you want posts or feeds on just one site, or just on technical topics, or on everything, it’s all there for the taking.

    Angie (by Tommy Martin)

    Angie (by Tommy Martin)

    Factoid of the day – the mySociety logo was designed by Matt Jones now of Dopplr fame, and the old site design was Jason Kitcat, now a Green party councillor. There’s online democracy for you.

  8. Mozilla and Ubuntu have an opportunity (and a duty) to unlock the cognitive surplus

    There’s been a lot written recently about the cognitive surplus, a phrase coined by Clay Shirky to describe the amount of human energy that can be deployed to create things if only barriers are lowered and incentives sharpened.

    mySociety has recently been fortunate enough to see a little of this phenomenon through the explosion of volunteering activity which grew up around our TheyWorkForYou video timestamping ‘game’. For those of you not familiar, we needed video clips of politician’s speaking matched with the text of their speeches, and in just a couple of months a gang of volunteers new and old have done almost all of the video in the archive. Other, much larger examples include reCAPTCHA and the ESP game.

    Reflecting on this, my friend Tom Lynn suggested that there was a gap in the market for a service that would draw together different crowdsourcing games, ensure that their usability standards and social benefit were high, and which then syndicate them out in little widgets, recaptcha style, to anyone who wanted to include one on a web page.

    This is where Mozilla and Ubuntu come in. Anyone who uses Firefox knows what the home page is like, essentially the Google homepage with some Firefox branding. Ubuntu’s default browser homepage, post patch upgrade especially, is similarly minimalist and focused on telling you what’s changed.

    Therein lies the opportunity – using pieces of these default home pages (maintained by organisations that claim to have a social purpose, remember) for more good than simply repeatedly reminding users about the the brand of the product. Traditionally that would mean asking people to donate or become volunteers, but the new universe of ultra-easy crowdsourcing games are challenging that assumption.

    Here’s a scenario. One time in ten when I load Firefox, the homepage contains a widget right under the search box that contains an almost entirely self explanatory task that contributed to the public good in some way. This could be spotting an object on a fragment of satellite photo after a disaster, typing in a word that’s difficult to OCR, timestamping a video clip, or adding tags to an image or a paragraph of text. The widgets would be syndicated from the central repository of Cognitive Surplus Foundation ‘games’, and would help groups like Mozilla and Ubuntu to show themselves to millions of tech-disinterested users to be the true 21st century social enterprises that they want to be.

  9. Bees

    We’re busy as bees, lots of things happening, increasingly many of which are commercial, and we can’t talk about until they’re released.

    Commercial? But you’re a charity! Yes – but just as Oxfam have a trading subsidiary company which runs the second hand clothes shops, we have a trading subsidiary company that sells services relating to the websites that we make (structural details here).

    Everything from other small charities to large media companies are buying our services – which range from customised versions of FixMyStreet, through to strategic consulatancy. If you’ve got something that you think we might be able to help with, email Hello@mysociety.org – easier to talk to than us geeks.

    Meanwhile we’re cracking on with our free services for the public, which are increasingly funded by this commercial work.

    TheyWorkForYou recently launched a Scottish version, thanks to volunteer Mark Longair, and Matthew. More goodies in store as the Free Our Bills campaign unfolds. We’ve started a sprint to get a photo for every MP’s page. If you work for or are an MP or have copyright of a photo of one that we’re missing, then email it to us.

    WhatDoTheyKnow is getting lots of polishing – the new site design that Tommy has been working on is nearly ready. Today I just turned on lots of new email alerts and RSS feeds, so you can get emailed, for example, when a new request is filed to a particular public body, or when a request is successful.

    Our super ace volunteers have been busy adding public authorties to the site, and we now have 1153 in total. We’re getting a steady trickle of good requests (pretty graph) coming in. Blogs such as Blind man’s buff and confirm or deny are sorting the wheat from the chaff. Do blog about and link to any interesting requests that you see!

    Other things in the works are a much needed revamp of www.mysociety.org, some interesting things on GroupsNearYou, and no doubt squillions of other things. I’ll let Matthew post up anything I’ve missed 🙂

  10. Everything launched all at once

    The last few weeks, I’ve been breaking our normal tradition of launching things the minute they are made (Matthew usually does this in 5 minute long release cycles). This hasn’t been deliberate, just the two things were quite hard to actual check properly and get out the door.

    The first was the new UKCOD site (the parent charity that runs mySociety). It took a while to finish after I set up the infrastructure, while the trustees wrote and approved all the content. Thanks very much to Ayesha and Sym for the design brilliance. Also thanks to Mediawiki (the Wikipedia software) which the site is based on – although it isn’t a wiki, it is configured so only UKCOD people can edit it. You can see just how much Mediawiki can be skinned and made to look like a normal site. It is a useful, simple CMS that lots of people already know how to use.

    I’m really pleased the UKCOD site is now there. I (speaking personally) think it is super important that mySociety and UKCOD are transparent organisations, and that we should demonstrate openness by being open ourselves. If there is anything else you’d like to know, please do ask – and we’ll either tell you, or explain why we can’t or won’t do so.

    The second is the WriteToThem 2006 statistics. Shhhh! Don’t tell anyone we’ve put them live yet – we’ll be doing publicity for it later in the week. Meanwhile have a look and send us any comments. This took ages to get out the door because I wanted to make sure the statistics were accurate, and presented in a way that wouldn’t be misleading. Let me know where I’ve failed.

    Right, now off to singing…