The concepts of open data and open government are interesting to me because they make such perfect bedfellows with information design and UI/UX.
Open data is the idea that certain data should be freely available for people to use and republish as they wish. Fans of the movement say that unshackling this information encourages innovation and economic growth by allowing citizens to understand what’s going on in their city or region and to engage more actively in civic life. I happen to agree.
If a city or region adopts an open data and/or open gov policy, the data are usually made accessible through interactive public-facing portals or interfaces.
James McKinney and Bernard Rudny wrote a really good article a few months back about making government information more accessible:
“Consider a common example: you request a spreadsheet from a federal department. Its contents are neither confidential nor controversial. Under the present system, that spreadsheet will be printed, reviewed, scanned, then mailed to you as a PDF file on a CD-ROM. The whole process takes weeks, months or even years. By the time it’s complete, any functionality the spreadsheet had as a digital document — like being able to search for text, or add up the numbers in a column — is gone. Instead, you’re dealing with a low-grade image of something that was once useful data that could be searched and sorted.”
Kind of problematic, right?
For me, design is the key to making these data truly accessible; not just making the information available but making it easy to dig into and gain understanding from. The trick is in the interface and your UX choices. There are some examples of tools and portals that truly open the datain this sense, and then there are some that are less successful.
I’d like to dissect one example and talk about its functionality; to see what works and what doesn’t so we can take a step closer to what these tools should be (in an ideal world). To set the stage before we dive in: creating tools/portals such as this is still an emerging discipline and I believe we need to have more meaty discussions around what makes them tick if we are going to move forward collectively and make better ones. It’s in this spirit that I want to explore the city of Montreal’s open contracting tool.
Last year, the city of Montreal created a tool called Vue sur les contratsthat visualizes the contracts and grants awarded by the city. It covers everything from transport, administration, sports, culture, roading, construction, to social development—in short, every contract awarded across service categories. It represents millions of tax dollars and intersects every aspect of daily life here in Montreal.
Montreal, as you probably know, has been plagued by corruption for decades. As a result of the corruption becoming common knowledge, the city fired two mayors back-to-back and launched a major legal inquiry into cleaning up the contracting processes. You can read a bit more about that whole mess here if you want some background, or just google “Charbonneau commission” or “Montreal corruption” if you’d rather choose your own news sources.
I was really interested in what the city would choose to produce and what the UI would tell us about the city’s contracting practices. Around the time of the launch, we had just brought a new UX specialist onto the FFunction team, and the first thing I asked her to do was an ergonomic audit of the tool as a research task.
You can take a look at the portal for yourself here; it’s all in French but you’ll understand the visual elements even if you don’t parle français.
I’m going to summarize her UX audit findings below, couched in my own thoughts about what these tools should offer in terms of displaying minutiae and zooming out to reveal the big picture.
This tool looks good. The user interface has a contemporary look-I like the the soft tones of the colour palette, and it’s very clear in terms of intent. It would be impossible to feel lost with this data treatment.
There are 40 city departments, which can be grouped in 18 types of activities (see top filter: Domaine d’activite).
Unfortunately, the data visualization in this tool does not show the expenses by department, or even by type of activity. Instead it’s been grouped in five broad categories: Other, Information Management, Infrastructure, Lands & Estates, Organization & Administration.
Consistently, the biggest bar of all is “Other”, which you’ll see in the legend is denoted by the colour yellow. This makes it really hard to draw any conclusions on which departments are spending the most… which was meant to be the whole point of the visualization.
Another crucial question: Where exactly did the money go? For each contract, the data lists the contractor. It should be easy to visualize the contractors who received the most money, but the tool doesn’t allow that. If you want to see the contractors, you have to pore through the contract list and piece it together yourself.
UX lesson 1: The “Other” section should have been subdivided into smaller groups. To help with the legend, which in this case is a little vague, it would have been useful to add a tooltip that lists the departments included in each grouping.
You may also like:
Architecture & visual organization
I wanted to look here at how the content was structured, the menus, and the hierarchy of information.
On the plus side, when we look at the overall information organization and architecture of Vue sur les contrats, it’s clear, easy to navigate, and there is no confusion between the sorting and filtering options. The information presented is always on the same level, so we’re not overloaded with complexity.
But the architecture raises questions for me. Are most of the contract amounts big or small?
UX lesson 2: It would have been great to see the distribution of contracts per amount instead of lumping it all together. A clever trick might have been to integrate it in the amount filter, and turn it into a slider.
The thing that struck me here was that the graph is not truly interactive; it doesn’t allow the user to click on an activity category and see the breakdown. The data has three nested levels, but the visualization doesn’t reflect that.
Vue sur les contrats is only available in French, which cuts out a significant number of Montreal’s population, as well as many users that might want to see this data from other parts of Canada or abroad: journalists, researchers, civic groups, etc. I know, I know, Bill 101! But if the entire point of your tool is openness at every level, accessibility must be a primary concern. I think having a version of the tool in both official languages would have signalled that the city of Montreal truly is open to scrutiny from both outside and within the province.
UX lesson 3: As a project manager, consider your audiences. Not just the most obvious demographic, but all of them. As a designer, learn to work across languages.
All in all…?
The dataviz of Vue sur les contrats could have worked a lot better. To put it more bluntly: it’s lip service. It’s eye candy. It’s a web application that offers the veneer of transparency but doesn’t actually tell you very much at all.
In future, let’s be more robust in looking at the design of “transparency” tools with a critical eye, and to separate a nice sound bite from real action. I’d like to hear your thoughts on this; tweet at me using the hashtag #designingtransparency to continue the conversation.