Local Ground Redesign

Overview

Local Ground is an open source tool for creating map visualizations and stories. I am redesigning the UI from beginning to end. This process includes user research, wireframing, visual and UX design, and HTML/CSS/JavaScript prototyping.

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.

Visit Local Ground Prototype

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:

Wireframing

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:

Choosing a Prototyping Tool

Once our team had aligned on the structure of the site, I began to prototype the interaction details. I chose HTML/CSS/Javascript because I knew that prototyping software becomes slow and difficult to use with complex systems, and because the CSS could be used in the implementation phase.

Visit Local Ground Prototype

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:

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.

Below are some pages from the current iteration of the prototype