CityScore — Boston’s City Performance Metrics

Redesigning Boston’s Performance Dashboard for Greater Clarity and Engagement

01 — Overview

CityScore is an initiative created by the City of Boston’s Department of Innovation and Technology. It combines key performance metrics into a single score, giving the mayor, city managers, and residents a snapshot of the city’s overall health.

The existing website contained valuable public data, but constituents struggled to understand, navigate, and engage with it. During a two-week design sprint, our two-person team redesigned the experience to make Boston’s performance information clearer, more accessible, and easier to explore.

Role: UX Designer

Responsibilities: User research, heuristic analysis, stakeholder interviews, information architecture, card sorting, personas, user flows, sketching, wireframing, prototyping, and usability testing

Tools: Sketch, InVision, and Zeplin

02 — The Problem

CityScore was designed to increase transparency by showing how Boston was performing across essential city services. However, the existing experience presented most of the data in a single, dense view.

Users struggled to understand what the numbers meant, locate relevant information, and connect individual metrics to their everyday experiences as Boston residents.

Our initial heuristic analysis also identified problems with:

• Findability and navigation.

• Clarity and communication.

• Organization of the data.

• Accessibility and readability.

• Usefulness for different audiences.

• Emotional context around emergency-related metrics.

The project needed to address these issues within a two-week design sprint and with a team of only two designers.

03 — The Process

3.1 — Understanding the Existing Experience

We began with a heuristic analysis of the existing CityScore website.

Using established usability principles, we reviewed whether the experience was findable, clear, communicative, useful, valuable, and engaging.

The analysis showed that the dashboard lacked a cohesive hierarchy. Users were presented with a large amount of information at once, without enough context to understand how the metrics related to one another or why they mattered.

3.2 — Research and Stakeholder Interviews

During the first 24 hours of the sprint, we conducted an online survey and reviewed comparable city-performance dashboards from across the country.

We also interviewed City of Boston stakeholders to understand how each department’s data was collected, what the individual metrics represented, and what the city wanted residents to understand.

Stakeholders included:

• Co-lead and performance managers.

• Performance analysts.

• Content managers.

• City of Boston web designers.

• Tableau dashboard administrators.

These conversations helped us balance the needs of city employees who managed the data with those of residents trying to understand it.

3.3 — Defining the Users

We synthesized the research into two personas representing the types of Boston residents most likely to use CityScore.

The personas helped us explore differences in:

• Familiarity with city-performance data.

• Reasons for visiting the dashboard.

• Interest in particular services or neighborhoods.

• Comfort interpreting scores and trends.

• Expectations around transparency and accountability.

This gave the team a clearer framework for deciding which information to prioritize.

3.4 — Information Architecture and Card Sorting

The previous dashboard displayed most of its data in one view, making it difficult for users to find relevant information.

We used card sorting and feedback from constituents and stakeholders to develop a clearer navigation structure.

The revised information architecture grouped related metrics and created more natural paths for exploring the data. It also helped us determine what belonged on the landing page and what information should be revealed through deeper exploration.

3.5 — Exploration and Design Decisions

We conducted collaborative design studios to generate and compare possible solutions quickly.

Using the research findings and design goals, my teammate and I created low-fidelity sketches focused on:

• Establishing a clearer visual hierarchy.

• Explaining what CityScore represented.

• Making individual metrics easier to discover.

• Connecting data to recognizable city services.

• Supporting both desktop and mobile use.

We reviewed the sketches together and selected the strongest elements to carry into the wireframes.

3.6 — Wireframing and Iteration

The selected concepts were translated into medium-fidelity wireframes.

We tested different page structures, navigation patterns, and ways of presenting CityScore’s data. Feedback from users and stakeholders informed several rounds of iteration.

The designs gradually progressed from exploratory wireframes into high-fidelity desktop and mobile concepts. Each iteration clarified the relationship between the overall CityScore and the individual metrics contributing to it.

04 — The Solution

The redesigned experience created a clearer introduction to CityScore and a more approachable way to explore Boston’s performance data.

Clearer Landing Experience

The landing page introduced:

• What CityScore is.

• How the score is calculated.

• Why the metrics matter.

• How residents can explore the city’s performance.
  

This provided context before asking users to interpret the data.

Improved Information Hierarchy

The redesigned dashboard organized metrics into more understandable groups and made the most important information easier to scan.

Instead of confronting users with one dense collection of data, the experience supported progressive exploration.

Accessible Data Presentation

The visual design used clearer labels, stronger hierarchy, and more deliberate spacing to improve readability.

Desktop and mobile layouts were designed together to ensure that the information remained understandable across different screen sizes.

More Intuitive Navigation

The revised information architecture allowed residents to move between the overall CityScore, individual metrics, and supporting explanations without losing context.

05 — The Impact

The redesign established a clearer foundation for communicating Boston’s performance data to residents and city stakeholders.

Key outcomes included:

• A more understandable explanation of CityScore and how it works.

• A simplified information architecture informed by research and card sorting.

• Clearer navigation between the overall score and individual metrics.

• Responsive desktop and mobile design concepts.

• Stronger visual hierarchy and improved accessibility.

• Greater alignment among designers, analysts, content managers, and dashboard administrators.

• A more approachable public experience for exploring city-performance information.

Because this work was completed as a rapid design sprint, the primary outcome was a validated design direction rather than long-term quantitative performance data.

06 — Reflection

CityScore demonstrated how thoughtful design can make complex public data more understandable and meaningful.

The short timeline required us to research, synthesize, design, and test quickly. Maintaining a clear connection between each research finding and design decision helped us stay focused on the most important usability problems.

The project also reinforced the value of involving both residents and internal stakeholders. Residents helped us understand where the experience created confusion, while city employees provided the operational context needed to present the data responsibly.

By combining these perspectives, we created a more accessible experience that supported transparency without oversimplifying the information.