My Role

Product Strategy
Project Management
UX/UI Design
Front End Dev

Project Description

Community individuals should have a voice in deciding the future of their place. This is the founding premise of CoMap: that richer public engagement results in better design, whether it's a downtown revitalization or a university campus plan. However, it's sometimes difficult to convey the intimate place-knowledge that neighborhood residents have in a way that is meaningful to the planning and design process. This is where technology can help.

CoMap is a web-based interactive mapping platform designed for the public to provide geolocated insights about their place.

The tool allows for participants to drop markers, draw routes, and draw shapes in a web-based map interface to respond to prompts from the design team; for example, "where do you most often dine?" or "where do you feel unsafe?" The results are parsed into a web-based visualization that displays aggregate trends, allowing urban designers and planners to pinpoint exactly where an intervention is needed.

Challenge

The tool had been an essential part of the Sasaki design process for nearly ten years, but was in need of a rebuild to bring it up to modern web standards. Our team undertook a complete overhaul of the tool to accomplish several design and technical goals, including:

• Providing a mobile-friendly interface for end users;

• Improving the usability of core end user actions;

• Allowing Sasaki project teams to set up and customize each deployment without our development team’s involvement;

• Creating an interface for Sasaki project teams and clients to monitor responses and check status in real-time

Process

Our team of five began by articulating a product strategy. I co-led our team through an investigation into product strategy, conducting interviews, focus groups, and user observations of the existing tool to better understand needs. I synthesized findings from this user study into personas and combined them with market research of peers, then guided our team through the decision-making process to establish goals for the tool's future. As product manager of this refresh effort, I pivoted the team from goals to action by framing out priorities, a workplan, and a sprint process.

As the UX/UI designer on this project, I created and tested wireframes, mockups, and prototypes. Beginning with hand-drawn wireframe sketches, I worked collaboratively with the team to refine functionality needs and the interface structural layout. I translated these hand sketches into a digital mockup using UXPin to refine interactivity, and then worked with a developer to guide the creation of a coded prototype. I conducted multiple rounds of user testing during the design phase, testing core user tasks through recorded observations using both the clickable mockup and the coded prototype.

Throughout the build process, I assisted with front end development, styling the finer-grain aspects of the interface (built in React) using Sass. I implemented the use of CSS Grid and Flexbox into the interface, as well as Sass variables and mixins to streamline the stylesheet structure and ensure consistency of the design execution.

Solution

The final completed product includes three different, but integrated, interfaces: a public-facing interface for end users to engage with the mapping exercise; an admin dashboard for Sasaki project teams to create and customize deployments; and a results interface for Sasaki project teams, clients, and even the general public (if desired) to view, filter, and analyze the results of the mapping exercise.

The setup dashboard allows project teams to customize their deployment for each client.

The results interface allows project teams to view, filter, analyze, and export results data.