Mobility Project Viewer
OBJECTIVE
As a Coding It Forward fellow, I lead a short term product design and management project for the Austin Transportation Department (ATD), interviewing users and prototyping three versions of a map viewer that visualize the city’s robust mobility database.
TOOLS & SKILLS
User Research, UX/UI Design, Product Management
Adobe XD, GitHub, ZenDesk, React.js, HTML/CSS, ArcMap Online
TEAM & TIMELINE
Rebecca Brand
June - September 2022
ATD’s internal project management platform, Moped, collects data from disparate sources to improve coordination, analysis, and reporting among transit planning stakeholders.
BACKGROUND
The product team wanted to design a map view to improve Moped’s functionality, which is currently limited to a table view only.
Discovery Phase
RESEARCH QUESTIONS
What data should be visualized, and in what capacity? Will it help or confuse the audience?
What are the specific usability needs for internal and external versions of the platform?
What design and feature planning steps make for flexible implementation down the line?
The first phase of the ten-week project included performing desk research that could inform the design of this new Mobility Project Viewer. I did a full audit of DTS’s platforms and other city platforms that inspire them, reviewed the prior fellow’s design research findings, and highlighted features that consistently appear across these similar dashboard and mapping tools.
User Research & Testing
After sharing the insights from the design discovery stage with the team, I planned for several user interviews in which ATD staff would perform think-aloud studies with existing products (like the Moped mini map feature, ATX Vision Zero platform, NYC Vision Zero platform, and the ATX ArcGIS Online tools). I also asked questions about what a typical user might expect from an interactive mapping tool.
Affinity Mapping & Feature Identification
The notes from these interviews informed my affinity mapping process, in which I grouped similar insights by feature categories for the design process. Key map characteristics include quick loading time, clear symbology, search/query, project layers, and having a legend/tooltip.
Other themes that interviewees highlighted include the importance of clarity and legibility, overall composition, the ability to summarize and extract the data visualized, and more. These themes translated to potential feature ideas and the process of identifying key priorities for this minimum viable product.
High Fidelity Mockups
MOPED PROJECTS MAP
This version is catered to internal ATD users’ needs, allowing them to query projects, filter projects by phase or type, click the project location for more specific information, and ultimately export their query for use elsewhere in their work. This prototype will be the first to be developed as an MVP so that internal users can test its functionality.
These prototypes follow the design system that DTS used for Moped — Material UI — which translates well to the product’s implementation in React.
Mobility Project Viewer
This version is the external facing website product, embedded with small changes that protect city metadata and promote greater usability for the layperson audience. This version of the platform will also include mobile accessibility, given the team’s research that city residents tend to interact with DTS products on their phones.
Development Handoff
At the end of my term, I handed off the mockups with an amended design system to include the new components. I also structured the product roadmap in ZenHub — the meeting of ZenDesk, the project management software and GitHub, the collaborative coding software — with key features to be addressed sequence in order to resolve the technical debt necessary to develop the full MVP. Throughout the summer, I wrote GitHub “issues” that aligned with the team’s agile development process and grew knowledge of the product management and software engineer skills and workflows.
Project Impact
INCREASING DATA TRANSPARENCY
More data filtering options, eventual public platform to broaden connection to transportation policy.
IMPROVE MOBILITY OPTIONS
Streamline process for identifying & collaborating on new projects within and outside Austin’s Transportation Department.
SYNC WITH VISION ZERO GOALS
Translate policy efforts to safer infrastructure strategies that promote efficiency and save money.
