International emergency aid charity Médecins Sans Frontiers are one of the biggest purchasers of medicine worldwide, and naturally it’s important that the drugs they buy are cost-effective. Where possible, they choose generics—white label medicines that contain the same ingredients even if they don’t carry the well-known brand names: think ‘ibuprofen’ or ‘aspirin’ rather than ‘Nurofen’ or ‘Anadin’.
But when a specific medicine is only available as a patented product from a big drugs company and with an equally big price tag attached, MSF, like everyone else, has little choice but to pay.
Curiously, this turned out to be a problem that can be solved, in part, through good web design. Here’s the story.
Obviously, drugs companies have an interest in keeping their medicines under patent. As MSF explained, patents, and in particular the practice of ‘evergreening’ them (extending their life indefinitely by making slight modifications to the medicine’s make-up), give pharmaceutical companies a monopoly on pricing, and can impede access to patients who would benefit from them.
MSF’s online project, the Patent Oppositions Database (PODB) is a resource for helping people challenge medicine patents. PODB helps groups around the world to find each other and work on cases together, and to share previous examples of art and arguments used in lawsuits which may help others in future oppositions.
The site was already up, running and functional, and the concept was sound. But it wasn’t attracting much take-up. On analysis, it became clear that this was because there was no focused experience on the site, encouraging users towards the core interactions which would power the whole concept of collaborating and sharing knowledge.
Where design came in
MSF asked us to suggest improvements that would enable groups to communicate about specific cases, and to improve the sense of community. Our solutions will add intuitive user paths that lead people to existing opposition cases and the information they need, then encourage them to join in by placing discussions and information about contributors on the page.
It’s crucial for MSF that the project reaches its full potential, and with the in-depth design changes we’ve suggested, and have now been asked to implement, we know it will.
You can read more about how we approached this project in our latest case study, over at the mySociety Services website.
Our FOI site WhatDoTheyKnow has a fancy new frontage.
Coming hot on the heels of TheyWorkforYou’s new homepage, the fresh look is part of our rolling process of design improvements. Out goes the rather sober grey and burgundy colour scheme, and in comes a fetching cobalt blue paired with banana yellow.
As you might have guessed, though, there’s more to this than a new palette. Yes, in the fast-changing world of web design, fashions change and dated sites can run the risk of looking irrelevant—but we are also keen to ensure that any new design works for its keep.
Not just a pretty face
It’s important, when we invest time and resources into a redesign, that there are tangible improvements. So, like almost everything we do these days, the changes will be subjected to scrutiny from our Research team.
They’ll be checking that we’ve:
- Improved the site’s usability, making it more obvious how to browse or file FOI requests;
- Encouraged users to take the step of making an FOI request, even if the concept is a new one for them;
- Enabled people to understand what the FOI Act is, and what rights it confers.
That’s a lot to expect from a simple redesign, so let’s take a look at how we hope to achieve it.
Of course, the first thing visitors see is the title text. It may seem pretty simple, but, as anyone who writes will know, the shorter the sentence, the harder it is to get right.
Take it from us, this deceptively simple piece of copy represents quite a bit of anguished brainstorming:
It tries to distill a complex idea into something that absolutely everyone can understand, even if they’ve never heard of FOI before. Meanwhile, the subtitle highlights your legal right to information.
Alaveteli, the software this and many other FOI sites around the world are built on, has always included two figures on its sites’ homepages: the number of requests that have been made through the site, and how many public authorities it has contact details for. The image below displays WhatDoTheyKnow’s stats at the time of writing:
It’s a nice way of showing that the site is both useful and used, but there’s something else, too: when users see that other people have taken an action online, they’re more likely to take the plunge themselves. It’s the same thinking that informed our byline on WriteToThem: “Over 200,000 messages sent last year.”
How it works
The homepage now includes a simple graphic to show the path you can expect to take if you go ahead and file an FOI request on the site:
Breaking the process down into just three steps makes it look manageable, and there’s a link deeper into our help pages for people who want to understand the FOI Act better.
For those who prefer to browse
Some content remains the same. We’ve still included links to the latest successful requests—albeit lower down the page, so as not to distract from the page’s main message, that you can make a request. These show, more graphically than any piece of copy could, that you can get results:
They’re also a great way into the site for people who just want to browse: they are a random assortment of requests that have recently been marked as successful, and can often throw up some surprising and interesting subject matter.
Sharing the benefits
Provided that we discover that the design has been effective in the areas mentioned above, we hope to roll it out as an option on the wider Alaveteli codebase, so it can be implemented by anyone running an Alaveteli site.
Meanwhile, the open source code can be accessed on Github by anyone who would like to use it.
Visit TheyWorkForYou’s homepage today, and you’ll see big changes.
These pages being the most visited, it made sense – but it did leave us with a shop window that did no justice to the goods within.
High time for a new front page
TheyWorkForYou’s homepage had not changed all that much since the site began in 2004: as new content such as committees or the devolved parliaments were added in, they simply got squeezed in wherever they would fit.
This is the first time in a good few years that we’ve taken a step back, started again with a blank canvas and prioritised what’s important.
Simpler, leaner, better-looking
It tells you what the site is for
Consistently, a good 60% of our users are first-time visitors to the site, so we need to make it very clear exactly what we do, and why they should care.
It helps you find your MP’s information
78% of the UK population don’t know the name of their MP (presumably that’ll be even higher for a while, post-election!). That’s why a postcode box, which matches you to your MP—and not a search box—is the most prominent input on the page.
It highlights current affairs
We know from experience that a large proportion of our users’ searches are based around issues that have just hit the headlines, whether that’s the latest budget, a ding-dong at Prime Minister’s questions, or a big news story.
It’s not always obvious to a casual observer where to find the relevant debates: for example, in Hansard (the official record of Parliament, which is where our content comes from) the budget is called the ‘Autumn Statement’, while Prime Minister’s Questions is labelled ‘Engagements’.
So now we have space to signpost the content that most visitors are likely to be looking for.
It encourages you to subscribe to activity
In a secondary but still prominent position, we signal that you can sign up for email alerts whenever your chosen MP speaks or your chosen keyword is mentioned. We hope that this will encourage still more people to engage on the things that matter to them.
It offers other paths in to content
If you’re just browsing, there’s still plenty of chance to see what’s new. Recent activity from Parliament is showcased on the lower half of the page, or you can riffle through all the different parliaments and types of debate in the top menu.
A fitting gateway
TheyWorkForYou still has all the same content, but now it has a homepage to be proud of, too.
That homepage is still a gateway into rich data: an archive of searchable, shareable, readable debates going back to the 1930s, profiles and voting records for MPs and Lords both current and historic, and the calendar of upcoming events.
With this new design, though, it should all be much easier to find. We hope you like it.
Users of Lothian Buses are more satisfied with the value for money of their bus journeys than anyone else in the country.
Passengers on the Oxford Park and Ride service find the seats the most comfortable. And the drivers of Trent Barton in Nottinghamshire give a friendly enough greeting, according to 95% of passengers.
It’s an extension of the work we did last year to help the transport watchdog display their train satisfaction data. We’ve introduced a new design which, we hope, makes it much easier to explore the results of Passenger Focus’ annual passenger satisfaction survey.
We’ve used a new visual approach that is appropriate for the bus data: it makes it really easy to browse through 32 different survey categories, from cleanliness to safe driving.
When you have that many categories, drop-downs aren’t really an option, and we’re pleased with what we came up with to make it easy to make the most important categories prominent, while still allowing easy and intuitive access to the others.
We’ve also used responsive design, which means it performs beautifully whether viewed on mobile or at the desktop. Check it out for yourself here – be sure to resize your browser to see the mobile version kick in!
Simply Secure is a new organisation, dedicated to finding ways to improve online security – in ways so accessible and useful that there will be no barrier to their use.
It will bring together developers, UX experts, researchers, designers and, crucially, end users. The plan is to ensure the availability of security and privacy tools that aren’t just robust – they’ll be actively pleasing to use.
Now, you may be thinking that online privacy and security aren’t the most fascinating subject – but this month, the chances are that you’ve actually been discussing it down the pub or with your Facebook friends.
Remember the iCloud story, where celebrities’ personal photographs were taken from supposedly secure cloud storage and put online? Yes, that. If you uttered an opinion about how those celebrities could have kept their images more safely, you’ve been nattering about online security.
Simply Secure is founded on the belief that we’d all like privacy and security online, but that up until now, solutions have been too cumbersome and not user-centred enough. When implementing them becomes a hassle, even technically-literate people will choose usability over security.
How we helped
Simply Secure knew what their proposition was: now we needed to package this up into a brand for them. Crucially, it needed to transmit a playful yet serious message to launch the organisation to the world – within just four weeks.
Our designer Martin developed all the necessary branding and illustration. He created a look and feel that would be carried across not just Simply Secure’s website, but into the real world, on stickers and decoration for the launch event.
Meanwhile, mySociety Senior Consultant Mike helped with content, page layout and structure, all optimised to speak directly to key audience groups.
Down at the coding end of things, our developer Liz ensured that we handed over a project that could be maintained with little to no cost or effort, and extended as the organisation’s purpose evolves.
“mySociety are brilliant to work with. They did in a month what I’ve seen others do in six, and they did it better” – Sara “Scout” Sinclair Brody, Simply Secure
What did the client think? In their own words: “We approached [mySociety] with a rush job to build a site for a complex and new effort.
“They were able to distill meaning from our shaky and stippled examples, and create something that demonstrated skill not only as designers and web architects, but as people able to grasp nuanced and complicated concepts and turn those into workable, representative interfaces”.
Always good to hear!
People who know mySociety’s work might have noticed that we don’t typically work on purely content-driven sites. Generally we opt to focus on making interactions simple, and data engaging, so why did we go ahead with the Simply Secure project?
Well, there were a couple of factors. Firstly, we genuinely think that this will become an invaluable service for every user of the internet, and as an organisation which puts usability above all else, we wanted to be involved.
Second, we believe in the people behind the project. Some of them are friends of mySociety’s, going back some time, and we feel pretty confident that any project they’re involved in will do good things, resulting in a more secure internet for everyone.
Take a look
Simply Secure launches today. We’ll be checking back in a couple of months to report on how it’s going.
So we wanted to build an app for FixMyStreet. Easy: we just had to make a cut-down version of the website, right?
Hmm, not quite.
Now he explains a little more about what informed the decisions he made during the apps’ development.
Moving the map, not the pin
When you use the desktop version of FixMyStreet, the first thing it asks for is your location, and there’s a good reason for that. It’s such a good reason that it needed to apply to the app as well.
On the desktop site we ask you to input your postcode or street name. With a mobile app, it’s much more likely that you’ll be reporting a problem that’s right in front of you, so we can usually skip that step and show you a map of your current location.
However, while the accuracy of geolocation technology is pretty good, it’s not perfect, so we wanted to let users fine-tune the location.
On the website you click on the map to drop a pin where the problem is, but we’ve found this isn’t the best solution on a small screen. Fingers are big and the end of a pin is small so it can take several clicks to correctly position the pin.
We quickly realised that having a central static crosshair, and moving the map to the location was a much easier and more accurate way to set a location.
Sending reports made offline
As we explained in the previous post, one of the benefits of the apps over the mobile site is that you can make reports even if you have no phone coverage. The app stores all the details until you get back within range and you’re ready to send it off.
One decision we made, which might seem initially puzzling, is that these offline reports don’t automatically get sent off to the council once you’re back within range of a phone or wifi signal.
There are two linked reasons for this, and they’re both related to the fact that FixMyStreet lets you report a problem even if you don’t know who to send it to.
Simply, before we can work out who to send the report to, we need to know exactly where you are – and that you are within FixMyStreet’s area of coverage (ie, within the UK).
Your location also dictates the categories that we show you. Each council has its own categories, and in areas covered by two tiers of government, each council will deal with different types of report. So for example, your county council might deal with potholes, while your district council handles dog fouling.
Once you’re back online we can check that the location is one we can accept a report about, and then fetch the list of categories for you to pick from.
In effect, this delay is also a second chance for you to check your report before you send it off, although that was never the reason for the decision!
The constant map
We initially designed it with the map only appearing when you needed it, but having the map underlying the reporting process provides a nice bit of continuity with the website, and seemed to make the app cohere better too. So, while there’s no particular reason for it to be there, we made the decision to keep things uniform.
If anything else about the app has got you wondering, do feel free to leave a comment below!
Last week we asked what improvements you’d like to see on TheyWorkForYou. Thanks so much for all the comments on that post (do keep them coming). They’ve all been carefully documented on our development list.
Our standard way of working on a project like this is in ‘sprints’ – short periods of activity after which we can spend some time reflecting on what went well, and what could have gone better.
This system is great for ensuring that we don’t get involved in a large piece of work, only to realise that it doesn’t do what was intended, or hasn’t had the desired effect. So, for example, if we’ve added a new feature, we might be asking ourselves, ‘Is anyone using it?’, ‘Have there been any bug reports?’, and ‘Has it fulfilled our original aim?’. We’re striving to be as analytical and methodical as possible about these assessments, so part of the process has also been figuring out which types of metrics to collect, and how.
That said, what have we already done?
It’s easier to find a specific representative
Where previously our pages listing all MPs, all MSPs and all MLAs just contained one very long list of names that you had to search or scroll through, there’s now an A-Z navigation at the top. We also added the ability to find your own MP from this page.
Why? This is an example of a small usability tweak which should make a difference to a large number of people – not everyone knows how to search a web page with Ctrl+F. It’s also a fix that’s been on our to-do list for two years!
The addition of the ‘find your MP’ box helps to serve one of our core aims: to make democracy easy to understand for the uninitiated.
We’ve added ‘like’ and ‘follow’ buttons
We thought you might not notice these discreet additions to our page footers – but we’ve certainly seen an upturn on the rate at which people are ‘liking’ our Facebook page. Whereas Twitter – not so much. Maybe TheyWorkForYou users are just more Facebook-inclined?
Why? In part, this addition is for our own benefit – we welcome the opportunity that social media gives our users to spread the word. As a small organisation with no advertising budget, this kind of grass roots promotion is invaluable. Then, we are hoping that it will help us to understand our users. Clicking that ‘like’ button can be seen as a form of positive affirmation and enagement that it’s very hard to quantify by other means.
We are still considering the addition of buttons which would allow you to share specific debates with your social circles.
We have noted the comments on our last post which made it clear that some of our users do not welcome integration with social media. That’s fine – we’ll never do anything that excludes you from the core activities of the site, whether you use Facebook and Twitter or not – our intention is simply to provide the functionality for those who want it.
Those comments have been a useful reminder to us that we should continue to consult our users, because we can’t always predict what you might object to!
You can change your email address
If you have an account, now you can change your email address yourself.
Why? This was identified as a common request that often puzzled users, and took up support time on our side.
MPs’ pages will look better
You can’t see these yet, because they’re still in progress. Due to some quirks of the code in which the site was originally built, the new design for the MPs’ pages has taken longer to implement than we’d anticipated. But we’re getting there.
Why? MPs’ pages contain an awful lot of information, from voting history to recent appearances, and more. The redesign will help us present all this information more clearly, making the page just as easy to read on a mobile device as it is on a desktop, and simply bringing the (frankly, dated) pages a more current look.
Bullets are bullets
This is almost ridiculous, but we think it was worth attending to. In recent user tests, we noticed some confusion, caused by the fact that our bullet points were in the form of small squares – they were frequently mistaken for check boxes.
Why? Just to rid the world of that one small piece of frustration that occurs when you try to tick a box that is not, in fact, a checkbox.
As I say, we are still actively collecting and working on your feedback, so please do keep it coming. Comment below this post, or drop us a line on firstname.lastname@example.org. I’ll be reporting back after our next sprint.
Photo by William Warby (CC)
The Open Democracy Advice Centre (ODAC) in South Africa will be using mySociety’s Alaveteli software in their latest project – and, with a bit of match-making from mySociety, the preparation period has been rigorous.
Alaveteli is our open source Freedom of Information platform. It underlies our own UK-based WhatDoTheyKnow, and right-to-know sites around the world. Alaveteli sites make it easy for citizens to ask questions of those bodies who operate under Freedom of Information law and, significantly, they automatically publish all responses.
Before any coding or implementation began, we got ODAC together with the “Governance Collaboratory”, an initiative from the d.school in Stanford University that seeks to apply the “design thinking” approach to projects that intend to make government more open, more effective, and more accountable. We’ve observed quite a few Alaveteli installs, but while we’re always on hand to offer support and answer development queries, we’ve never prepared the ground quite like this.
Gabriella Razzano of ODAC welcomed Jeremy Weinstein and Jenny Stefanotti, both from the d.school, to Cape Town for an intensive few days of assessing how the design thinking approach could shape the project. Two staff from mySociety also went along — Paul (our Head of International Projects) and Dave (one of our developers) — because we’re keen to understand how the d.school’s approach might improve the way we go about building our new projects.
Now, at mySociety we already know a thing or two about building civic systems that engage with the public, because we have considerable experience in the field. We are expert at combining user experience and current tech to create simple, usable interfaces. We conduct usability tests, we apply A/B testing, and we think hard about what our analytics tell us. But actually much of this is reactive, iterative design: it’s being applied after the core product has already been built.
Design thinking challenges this approach by suggesting that the user on which initial designs are often based is purely imaginary. As a result, the site inevitably includes the assumptions and prejudices of its creators. This won’t necessarily lead to a bad design — especially if the creators are benign and experienced — but it must fail, by definition, to account for the unexpected things that may motivate or concern actual users. The design thinking process attempts to change this by approaching the initial problem in a prescribed way and following a process that isolates genuine, existing requirements. This includes, in design thinking terms, processing the initial interviews into empathy maps from which requirements emerge, and which themselves become features that are rapidly prototyped in isolation from other parts of the system.
This is uncomfortable for those of us used to building loose iterations from the bottom up and refining them later. It means introducing empathy and rapid, offline prototyping much earlier in the process than we’d normally expect. Certainly in the commercial world it’s common for a company to prototype against their target consumers early on. But for civic projects such as mySociety’s, it’s often much harder to identify who the users will be, for the impressive yet overwhelming reason that often we are building our platforms for everybody. This can lead to generalisations which may miss specific issues that could make a huge difference to some users.
The d.school advocates a “learning by doing” way of teaching, so the days we spent in Cape Town were a busy mix of practice as well as theory. We interviewed people who had a variety of reasons to want to make Freedom of Information requests, including an activist who’s already used South Africa’s Freedom of Information legislation to make requests regarding housing projects, the head of a rape crisis centre, and law students who may well become a nation’s most empowered activists. From these interviews we isolated specific needs, which at this stage were nearly all unconnected to any digital or web requirement. Jeremy and Jenny then led us through the process of rapid, analogue prototyping intended to address those needs.
Inevitably we could only scratch the surface in the few days we had available, but we hope ODAC will be able to apply the process to the development of their project, just as we aim to use it to benefit the work on ours.
Image credit: Procavia capensis (Rock-dwelling Hyrax or Dassie) by Arthur Chapman, released under CC BY-NC-SA on Flickr.
They tell visitors that dassies such as these live atop Table Mountain. We went up there and saw none. Similarly, Freedom of Information requests exist in South Africa under the Promotion of Access to Information Act 2000 (PAIA), but most people have never seen one — fewer than 200 PAIA requests were made nationally in 2012. This tenuous comparison allows us to illustrate the blog post with a cute picture of fuzzy mammals.
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
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.
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.
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.
If you have any technical questions about the design, please do ask in the comments and I’ll do my best to answer.