DataMasher - the IA perspective

In early July, Forum One participated in the Apps for America 2 contest, organized by the Sunlight Foundation.

The Background
The goal of the contest was to show that when government makes data available, it makes itself more accountable and creates more trust and opportunity in its actions. As we put together our Forum One team, we came up with our own set of goals for the website, eventually called DataMasher. DataMasher would:

• Use government data from Data.gov
• Create something with returning value
• Let users interact with the data in ways that they couldn't before

With a team of five people (two developers, one information architect/designer, one project manager, one advisor) and four weeks to create something, we hit the ground running! Since data.gov is full of state-specific data, we decided to create a website that could include any type of data, as long as it was broken down by state. DataMasher allows users to combine any two data sets and display the results in a table and on a map.

What I Learned
With a limited amount of time, there are a couple of things I kept in mind while creating the information architecture and design:

Focus on a small set of solutions and goals. Do them well.
We knew that we would never get the site done in four weeks if we tried to add every bell and whistle. We had to move fast. I chose to focus on a small set of pages that we could build on (home page, detail page, list page).

Be flexible. Constantly brainstorm.
These two go together. I did tons of sketches, with different layout and functionality options, and presented those to the developers. We chose which solution to move forward with based on what required a low level of effort on the development site and still achieved a good user experience. No solution was perfect. We brainstormed and changed as needed to keep things moving. Below are some of my early sketches.

Maximize the easy stuff.
We built DataMasher on Drupal. Throughout the process we thought,

What does Drupal do well (or innately) without customization? Let's do that!

For example, within Drupal it is easy to add commenting and rating systems. So, voila! Stars and commenting were added. I just had to figure out where to place them.

Keep it fresh.
We wanted users to see something new every time they came to the site. The easiest way to do this was to incorporate a running list of the newest items on the home page. In this case, those items are mashups.

Keep the design simple.
We didn't have a lot of time to apply a design (or theme), so I keeping the visual layer simple was an important technical objective. I used standard web-safe fonts throughout, and not a lot of images. As you can see the buttons in the right column are simple blue backgrounds with different colored and sized text. If I had added rounded corners everywhere, we would have needed images for each corner.

Test. And then test again.
There were a couple of items that weren't completely intuitive. The name We originally planned to name the website Indik8r (pronounced indicator). We chose this name because after a user combines sets of data, they get a map that shows how the states rank, and users can identify trends or indicators. After we shared the concept and site (in very early stages) with a couple of coworkers and friends, we heard from all of them that they didn't understand what we meant by Indicator and why it was spelled wrong. Our solution was to rename and open up to forum for suggestions and DataMasher was born. The explanation We wanted users to do a couple of initial things on the site:

1. check out the data sets
2. check out the mashups
3. create a mashup

The original designs showed each action, but again, after running it by a few folks, they didn't get it. They didn't understand what a dataset or a mashup was, or how to create one. So, I went back to the drawing board and tried to address these issues. I first attempted to add more visuals and examples to make it clearer. I started with a mashup. How do you represent a mashup? My idea was based on a Venn diagram, which shows two items and where they overlap.

Before:

After:

Second, I simplified the information even more, attempting to answer the user's question of "So what?". The user needs to know how DataMasher works and why they should participate. What do they get? The result was the final infographic on the home page.

Before:
 

After: