new UI design for the OSM data export tool from HOT.
new UI design for viewing an existing OSM export from HOT.
This past weekend I attended State of the Map U.S. (SOTM) in Washington D.C., the annual conference for OpenStreetMap (OSM) users in the United States. Following the conference a sprint day was held at the American Red Cross where conference participants volunteered their time and skills to improve various projects relating to OSM and well as contributing to OSM itself. The project I ended up working on was for the Humanitarian OpenStreetMap Team (HOT), a non-profit organization that assists NGO’s and other groups doing disaster relief, vulnerability analysis and other related humanitarian aid work in developing countries. HOT will typically either have OSM users add data to an un-mapped area in OSM or have locals map the area themselves using GPS and Field Papers.
A recent example of a HOT task was mapping the town of Macenta in Guinea to help doctors and aid workers there stop an outbreak of Ebola. I’ve captured some screen shots of Macenta on both Google Maps and OSM to demonstrate the amount of data contributed by OSM users, Google Maps is on the left and OSM is on the right.
It’s a bit hard to tell from the zoom level but if you look carefully you’ll see hundreds of buildings, minor roads and some land use areas that have been mapped on OSM which are missing from Google Maps. This was accomplished in a vary short amount of time after HOT made an announcement to the OSM community. Additionally MapBox helped spread the word and has made this process easier with their recently designed user-friendly OSM editor, iD. This data is very important for the doctors and aid workers on the ground to find out where dense population centers are located and to determine how the outbreak is spreading. Nice work OSM contributors and HOT!
One crucial aspect about OSM is that all of it’s data (for the entire world) is available for download for free. The problem is that most services that offer “extracts” of the OSM Planet file (about 400 GB in size so you don’t want to download it all at once!) filter out custom tags that HOT organizations use which are crucial to their work. HOT therefore offers it’s own OSM data extract tool, but the problem with it is that it was sort of thrown together by a developer without much thought to usability. So during the sprint day at SOTM I partnered up with Jue Yang, a talented front-end designer at Development Seed, to redesign the export tool’s interface. The wireframes at the top of this post are what we came up with. We submitted our work as an issue in the HOT Export Tool repository on GitHub. I’m including screenshots of the old version below for comparison.
The original / existing homepage of HOT’s export tool.
What the UI currently looks like when creating a new export.
entering text for fields and selecting an area to export.
The following page where the user selects parameters for their data extract. We simplified this process by combining it with the first step in the new UI design.
What an existing job / export looks like currently. Jue redesigned this part which is the second image at the top of this post.