How We Elegantly Visualized Complex Measures for the Urban Institute’s Upward Mobility Metrics
In October 2024, the Urban Institute launched the Upward Mobility Data Dashboard, a tool for local leaders to explore 24 conditions affecting upward mobility from poverty and racial equity in their communities. The dashboard includes metrics such as financial security, preschool access, transportation access, and housing affordability in every county and more than 480 cities.
These Upward Mobility Metrics are by no means standardized: some are in dollars, others in percentages, and more still are ratios. Although every metric includes data over time, the years of available data vary. And many metrics can be disaggregated by race, gender, and income.
To tackle this significant design challenge, the Urban Institute spent more than a year engaged in research, iteration, user testing, selection, and execution phases with partners Greater Good Studio for user-centered design and Graphicacy for web design and development. Ultimately, we built a flexible, scalable charting system to meet our users’ needs as well as the larger goals of the Upward Mobility Initiative. Here, we outline the broad arc of this process, including how we came to rely on a chart type we nearly overlooked.
Research and ideation phases
As members of the data visualization team, we were brought onto the project in summer 2023, joining our web development team and the Upward Mobility Initiative research team. To devise a system to visualize these metrics, we needed to first understand the complex dataset and why it was created.
Our research phase began with understanding the Upward Mobility Framework and its pillars, predictors, and metrics. We pored over a landscape scan of existing dashboards and data tools from both inside and outside of Urban. Armed with best practices, we then reflected on how to incorporate recommendations from a design advisory committee representing a range of geographies, experiences, and sectors, including organizing, advocacy, and local government. Those recommendations yielded a set of “must haves” for the dashboard that were key to guiding its development, such as the ability to see how a city or county compares with a handful of specific peer cities and counties on one metric, and for each metric, the ability to view disaggregations by race and other available demographics.
Our ideation phase included weeks of exploratory data visualization, where our team generated many possible visual approaches to communicate the metrics. We looked at simple and effective visual forms, like bar charts and dot plots, to communicate the metrics at discrete points in time. We generated distributions like histograms, beeswarm plots, barcode plots, and maps to show the extent and shape of each metric across the country. To add context to the numbers that may not immediately be meaningful for users, we worked with the research team to generate a national median for every metric, where possible.
Our toolset was diverse: we used R Studio to bring in the data, generate slices for exploration, and create prototype visualizations. We also used Datawrapper and Figma to lay out more-refined concepts and add annotations.
User-centered design and selection phases
Working with the user-centered design firm Greater Good Studio, we were able to put these data visualization prototypes in front of users and begin conceptualizing the layout and functionality we’d need in the dashboard. Users indeed found a national median helpful for contextualizing their community’s number, and many shared a desire to compare similar jurisdictions, which highlighted the importance of high data density. In other words, we would have to keep our plots slim so users could easily compare several selected counties or cities.
With feedback in hand, we needed to narrow down the vast range of chart and map possibilities. There were two main criteria for the selection process: chart flexibility and user priorities. We knew we needed a way to visualize the varying data types and their disaggregations while still including the user preference to compare data from several geographies.
Our partners at the web development and data visualization firm Graphicacy, who we’d engaged to build the dashboard, helped us begin reframing the question, “How can we best visualize each metric?” to the more valuable question: “How can we best visualize all metrics?”
At this point, dot plots, previously buried deep in the ideation phase, emerged as the star of the show. Dot plots allowed us all our desired functionality. We could visualize multiple data points for some metrics and a single data point for others. We could compare individual data points to national medians quickly and easily. And we could indicate cases of lower-quality data, giving the user an option to display confidence intervals where available.
The flexibility of dot plots facilitated simple comparisons within a dense dataset that scaled well with subgroups like race or gender. These qualities eloquently mapped to user needs and our early goals. What had initially seemed like an early experiment left on the cutting room floor had suddenly emerged as the exact solution we needed.
Our team communicated the pros and cons of this approach with a large team of stakeholders at Urban. The charts we ultimately selected struck a balance between feasibility and scope: we couldn’t design bespoke solutions for some of the metric edge cases given the cost, but we could meet most of the project’s needs.
Finalizing designs and execution
As the dashboard entered the development phase, we refined the visualizations to adhere to Urban’s voice and data visualization guidelines, adapted the designs to scale well to smaller screen sizes, and fussed over tooltips, axes, and color.
There’s a lot of information packed into every chart on the dashboard: legends, labeling, confidence intervals, national medians, data quality scores, and more. It took many iterations to fit all those elements without overwhelming users.
As we closed in on launch, we underwent further problem-solving, prioritization, and collective decisionmaking to ensure the charting system blended well with the dashboard’s design. The success of this dashboard is thanks to both technical execution and harmonious teamwork.
