Data Dashboard

GOAL -
Build an interactive dashboard to assist with active monitoring of transit conditions, with quick access to undercover trends related to equity and accessibility.

We opted to design for two different stakeholders in mind, represented by “Elliot”, a 32-year old policy analyst for the City of Pittsburgh, and “Paula”, a 35-year old member of Pittsburghers for Public Transit and avid supporter of accessible transit.

With these two stakeholders in mind, we mapped out what information each may need to support their own goals (e.g., an ability to track history states to view trends, an ability to overlay different data sets in a single frame) with the intention of producing an interactive data dashboard that would assist these stakeholders with a variety of their daily tasks and longer-term goals.

SOLUTION -
We centered our design around real-time maps and embraced this as a visual tool to analyze transit patterns and uncover relationships between different stakeholders.

Inspired by the history of John Snow’s map of the cholera epidemic (1854) - which was critical in understanding and ultimately mitigating the source of disease (contaminated water) - we embraced the use of mapping as a method of visual analysis. Through real-time data reflected in interactive maps, we created a dashboard to uncover relationships between different modes of transport, understand possible causes and effects (of accidents, scooter usage, etc.), and monitor the impact of city policies.

RESEARCH

DATA ANALYSIS
We were initially given a raw dataset consisting of scooter distribution throughout the city of Pittsburgh. Our data spanned approximately one week, and listed the average number of scooters that were (1) available, (2) in use, and (3) non-operational per day. In order to better digest and analyze this data, I created sequential bar graphs (which were further animated it, as shown below) to visualize this information and uncover potential trends. It became clear that the majority of the scooters remained clustered around areas of high-traffic/tourism (Downtown, Northside, Oakland) and areas with slightly higher income brackets (Squirrel Hill, Lawrenceville).

The ability to quickly spot trends through data visualization was further emphasized as a need for a successful dashboard, and we began to imagine what other information/metrics might be important to have quick access to for different stakeholders.

AFFINITY DIAGRAMMING
We were given four representative personas who may be expected to use our dashboard: a data analyst at Spin, a policy analyst for the City of Pittsburgh, an accessibility and transit advocate, and a scooter redistribution gig worker. Each persona had their own goals, questions, and perspectives with regards to what information they may need; as such, we used affinity mapping to uncover four primary questions that served as 'clusters':
‍
1. Where are the scooters located?
2. How does Spin monitor their business?
3. Why are these scooters needed/desired?
4. What are untapped opportunities or improvement areas?

Affinity mapping of all four representative personas.

Questions and goals of Paula and Elliot (chosen personas) hightlighted.

In order to focus our design efforts on making tangible impact for our users, we chose two personas to focus on. As we felt that the goals and Paula and Elliot were complementary, we decided to center our attention on designing for their needs.

Before beginning to sketch and wireframe, we diagrammed their current + future states, allowing us to pin-point what features of the dashboard might be most meaningful to them.

PROTOTYPING

HAND SKETCHING
Through hand-sketching, we brainstormed what types of information our stakeholders might find valuable to monitor. As a policy analyst for the city, Elliot would find information regarding accidents, emergencies, and distribution per neighborhood useful. As an accessibility and transit advocate, Paula would similarly value safety- and equity- related information, while also having access to a social platform where she could engage with peers, business leaders, and city representatives.

Low-Fi / Wireframing
Through initial wireframes, we were quick to gain an understanding of the composition of the dashboard, determining which elements would be static versus dynamic. We opted to ensure that the map and widget features occupied the central visual field, allowing for increased customization both in terms of content (adding relevant data/information via widgets) as well as display (allowing the width of the widget panel to be adjusted as needed).

DESIGN ITERATIONS

MID-FIDELITY
‍Much of our work refining the mid-fidelity prototype focused on navigation and customizability. As we were designing for two stakeholders with different tasks and contexts of use, we tried to give each user as much control as possible. Major design decisions centered around:
‍
1. Interactive map elements - we opted to move the calendar and data types (e.g., scooter tracking, bus movement) to the lower-half of the screen to ensure that those dynamic elements were in the normal line of sight
‍
2. Adaptable User Interface - allowing the map to become - almost - full screen in order to better analyze particular city-planning considerations
‍
3. Saving & sharing - should an important trend or statistic be displayed, user(s) have the option to either save that graph for later use or share it with other stakeholders

HIGH-FIDELITY
‍After fleshing out the screen composition and interactivity, we further refined the visual elements. We felt strongly that opting for a positive contrast polarity (‘dark mode’) would draw attention to exigent matters that were indicated by brighter color-coded data types (transit tracking, changes in scooter uses, increases/decreases in scooter accidents, etc.). Much of the visual style was inspired by the analogous fields of medicine and finance - both representing domains that are safety-critical and/or time-dependent.

INFORMATION SELECTION
An interactive key allows the user to add or subtract pertinent information (scooter locations, active bus routes, traffic congestion, and alerts), while the left-hand side of the dashboard shows a holistic view of metrics that the user has indicated are of interest (scooter usage, accidents, illegal parking, etc.).

HISTORY ON DEMAND
While in 'real-time' by default, quick access to history states allows Elliot to measure the impact of different events or policy changes, and zoom-in to inspect areas of the city that may be more prone to experiencing accidents.

WIDGET SELECTION
Information foraging theory suggests that the value of information is context-dependent. As such, we felt strongly that the data displayed on screen - especially adjacent to the central map - should be adaptable to each user's needs.