Local Ground Redesign
Existing map making platforms either support qualitative (photos, writing, audio, drawings), or quantitative (numerical) data. With Local Ground, users can combine these data types, resulting in more powerful storytelling and a deeper understanding of the problem space. Our user groups include community organizations and grade school classrooms.
Heuristic Evaluation + Research
Since Local Ground already exists, I started the redesign by researching the existing use cases, speaking with team members, and conducting a heuristic evaluation. I also conducted competitive research in order to better define Local Ground as a product and to understand common UI patterns. My findings include the following:
- Increase Accessibility: The existing Local Ground UI was modeled after the database representation of data. While this can be useful pedagogically, it presents a high barrier to entry and excludes some users.
- Market Opportunity: Map making tools fall under one of the following categories: quantitative and story/visuals oriented. We have the unique opportunity and challenge to straddle these two spaces. The former systems tend towards technical power users, while the latter are easy to learn and use. None of these tools feature decentralized data collection.
When I felt comfortable with the existing product and landscape, I began to create wireframes in Sketch to communicate my suggestions, which included the following large structural changes:
- Support media and browsing better: Move the description/media display to panel on the right instead of a popover. The popover supports short descriptions well, but long descriptions obscured the map. The right panel also achieves our goal of foregrounding media and content.
- Clean up map: Initially, media were plotted on the map as their media type. This meant that multiple photos for a single location might be stacked on top of each other as individual instances. Since the photo thumbnails were used for the map pins, this created additional visual confusion. I proposed requiring each photo to be contained in a site in order to be plotted on the map.
- Use "Projects" to organize: In the existing version, users switch between projects by turning on and off datasets, and the map preferences (such as map skin and center) are saved as cookies. I recommended making a separate page for each project to better facilitate work on a single project and fit common mental models.
Choosing a Prototyping Tool
Initial User Testing
I recruited 5 users for our first round of testing. Research sessions included an interview on previous exposure to map making software and Local Ground, and then a series of tasks. Our main findings included the following:
- Improved workflow: Overall, users who had experience with the old design found that the new design better foregrounded the tasks they needed to complete.
- Fix Terminology: We confirmed that some of our labeling terminology was confusing. While this design improved on the previous version, where icons were unlabeled, I began to conduct additional research on mapping and GIS terminology for inspiration.
Iterations and Visual Desgin
Once we had validated the overall structure of the site, I started to prototype interaction details and iterate on the visual design. My team went out into the city of Berkeley and photographed public artwork. Using real data helps me design for the worst case scenarios, and resulted in an interesting mini project to present at the Local Ground workshop.
I used material design guidelines to guide the visual design. This is appropriate for Local Ground's origins as a tool that overlays hand drawn maps onto digital maps. In to foreground user content and avoid pandering to younger users, I used a simple, light, and modern color palette.
User Testing and Design Critique
I completed a second round of usability testing with 5 participants who had a range of experience with Local Ground. I also showed Local Ground to an experienced design mentor. These informed the final stage of the prototype that I am now focusing on implementing.
Visible feedback: Initially, the dialogue for creating a visualization happened in a modal window; a pattern used in other GIS software. However, users weren't sure what they were actually doing when trying to complete tasks. So I moved the modal to a panel, and subsequent users did not experience the same problems.
- Visible Modes: Local Ground must support creating different visual interpretations of one crowd-sourced datset. Previously, the option for switching between visualization modes was nested under a tab. After talking to a design mentor, I realized that it had to be visible at the top level, and to achieve this I would have to restructure the site. This also worked well some new information that one of our users liked being able to create a map using raw photos. By keeping media and sites in different tabs, the problem of photos cluttering a map could be avoided. While users did not catch on to the structure as quickly, during testing, we believe the segmentation of tasks will make it usable in the long term. For more detail, please see the site map below.
Below are some pages from the current iteration of the prototype