Congressional District Health Dashboard

Data to empower districts.

Project Type

New Website Design

My Role

UX Lead and UI Support

Technology

Next.js + Contentful

Tools

Figma

Team Credits

  • Strategy: Sara Tetreault, Zach Grimshaw

  • Branding and Design: Joey Tackett, Jeff Smith, Kim Locraft, Maggie Yuan

  • User Experience: Maddie Purcell

  • Tech Leadership: Aaron Zinck

  • Development and JS Expertise: Mike Drayer, Steve Clay, Donna Hogan

  • Front-End Development: Sasha Bondarenko

  • Infrastructure: James Bernardi, Ryan Jensen, Greg Wilson, Alex Ford

  • Analytics: Emily Naftlin, Steven Bond

  • QA: Cassandra Beaulaurier, Corinne Serfass, Jenn Purnell

  • Project Management: Adam Hudson, Juwon Jolapamo 

  • Account Management: Jenn Johnson

Date launched: January 2023

The Client

The team at the Department of Population Health at NYU Grossman School of Medicine manages both the City Health Dashboard and Congressional District Health Dashboard. They have expertise in health data and community health.

Target Users

  • Policymakers - Congressional Representatives and their staff, state policymakers.

  • Advocates - Organizations that advocate for health policies, at the national or state level.

  • Community members - individuals who care about their community’s health.

Client’s Goal

The NYU team wanted to create an entirely new dashboard, using the same metrics and data sources as the City Health Dashboard, but with the geographical boundaries being the 118th U.S. Congressional Districts.

Project Goal

Provide trusted, actionable, nonpartisan data for congressional districts to drive positive change at the district, state, and national level.

Challenges

  • Creating an entirely new, interactive experience that is easy-to-use.

  • Balancing content comprehensibility of the data with getting everything done for launch.

  • Constant compromising between the design and development teams, both due to learning new technology and due to budget constraints.

Key Takeaways

During this project, I grew in my understanding of how to interpret health data and how to design data visualizations in a way that is easy to understand. I learned that there are often different ways that users can interpret a chart, and that sometimes, people could interpret something incorrectly. This realization turned me into an advocate for clear labels and written descriptions alongside the data - a skill that UX Writers know all too well.

The Process

  1. Research

  2. Product Strategy & Branding

  3. Wireframes

  4. Visual Design

  5. Development & Quality Assurance

  6. Content Loading & Testing

  7. Launch

Research

When the NYU team first came to us with an idea for this dashboard, it didn’t have a name or a full list of features. My coworkers recommended a research phase and scoped out this project to include focus group research and a branding phase. The following activities were conducted:

  • Focus group at the National League of Cities Congressional Cities Conference (led by the NYU team)

  • Two focus groups with a total of 11 policy advocates (led by Forum One)

  • Landscape analysis of existing data dashboards (led by Forum One)

I mainly listened in the focus groups, but the findings were influential to the next phases of the project.

Focus group takeaways

  • Participants wanted to segment data by demographics, such as gender and race.

  • Seeing data visualized as trends over time would be helpful to see any upward or downward trends within a district.

  • Participants expressed the desire to compare the data of one district to that of the state of or districts with similar characteristics (such as size or demographics).

  • The ability to easily export factsheets and data is important.

  • Participants want a tool that is easy to use, since they don’t have a lot of time to learn how to use a new tool.

  • Participants (who are not analysts) desire unbiased narratives to accompany data findings.

  • Participants had limited knowledge of the City Health Dashboard, indicating that marketing efforts will be crucial to the success of this new tool.

Product Strategy & Branding

After the research phase, our team produced user personas, a brand framework, and naming options for our product. Once the NYU team gave feedback on the name, my coworkers developed a color palette and a logo that both fit with the brand feel of City Health Dashboard and was unique. I provided support to my team members who were leading this work by giving feedback on our recommendations and naming options.

Feature Prioritization

At the end of the strategy phase, we prioritized a list of features for the first launch of our product. We knew that many of the requests that participants in our focus groups talked about would have to wait until post-launch, simply because we needed to get the foundation of the site in place first. I went into the wireframe phase knowing that we wanted to include the following at launch:

  • A view that showed how a district was doing across all the metrics, and compared to the average for that metric.

  • A map for each metric that allowed users to see that metric for all congressional districts in the country, all congressional districts in a state, and for a single congressional district.

  • Charts for metrics that had demographic data.

  • Metric background pages that explained how to interpret that metric, and talked about the source of the data.

  • An About page to introduce the dashboard to new users.

I also had a list of post-launch features, such as downloading map images, that would come later. But to make the most of my time during the wireframe stage, I found a home for them in my wireframes.

Wireframes

When I first started wireframing, I began brainstorming the pages that we would have, and how a user might navigate between them. I knew that the client was used to how the experience of City Health Dashboard is designed, but I also knew that this product was different. On City Health Dashboard, users have to pick a city. That’s the first entry point to get to any data. But with congressional districts, we have data for all districts, and thus, we can have a view of the whole country for a metric. This fact alone meant that the user experience between the two was going to be different.

As I continued on in my process, I focused heavily on each page. I could talk in depth about the different elements on each page, why they were needed, and how I ended up deciding their placement, but instead, I’ll share some of the questions that kept asking myself along the way:

  • What is the purpose of this page?

  • What information is most important? Is the layout supporting that?

  • What inputs are creating this map or this chart? 

  • What inputs can the user change? 

  • What should the UI be for these interactions? Should we have a dropdown, a search box with a type and complete, or a modal?

  • What happens when they change this input?

  • How do they undo that change?

  • Do users have all the context they need to understand what each control does?

  • Is the explanatory text for each data visualization easy to understand? How could it be written in a way that is more straightforward? 

  • Is this even the right visualization? Is it too complicated - can it be misinterpreted by users with low data literacy?

  • How do we lead users to other pages in our application to let them explore further?

I did a lot of iterating on wireframes for this project. This example shows the many different versions I made for the District Snapshots page.

At the end of the wireframe stage, we still had a few outstanding content questions on a couple of pages, but due to the timeline, decided to address them in the visual design phase.

My wireframe prototype, made with Figma:

Visual Design

My coworkers, Kim and Maggie, led the direction of the visual design. Since this dashboard is very functional and interactive, the designs follow the layout of the wireframes. Together, the three of us were able to explore how the visuals such as text hierarchy and color could increase the usability of the dashboard. Kim also brought her accessibility knowledge to the table and we were able to think through what would happen on mobile and how a screen reader would navigate the page.

We also collaborated on data visualizations. I was able to share what the data was intended to be and brainstorm new ways of presenting it. The whole internal team was then able to give feedback on how they would interpret a visualization. 

Examples of visualizations that I introduced:

  • Split color scale for the Income Inequality metric, which had a different meaning for values that were below zero and values that were above zero. 

  • A simplified bar chart for the metrics by demographics that focused on just the demographic values.

  • Using shapes and colors to indicate better than average, around the average, and worse than the average on our District Snapshots.

We did many revisions based on feedback from the NYU team. We did not do usability testing with users, but the NYU team did share our prototype with their advisory stakeholder group and got feedback that way. In the future, I hope we do usability testing to see how users react to many of our design designs that were made.

Our design prototype, made with Figma:

Development & Quality Assurance

Our tech lead and developers reviewed our wireframes and designs as we went through the design phase, and they hit the ground running in the build phase. I was frequently asked to brainstorm around solutions when we ran into a technical challenge or there was more clarity needed about the design intent. 

I also did design QA, reviewing work on my own when JIRA tickets were assigned to me or in grooming meetings where we talked through it as a team.

Content Loading & Testing

Our development team built the site using test data to generate content. After the bulk of the features were built, they pulled in the final text from Contentful and did data syncs with the final data. I also did a final design and content pass of my own to catch a few things that needed updating before go-live.

Launch

We launched the dashboard with great success on January 25, 2023. The client was very happy and has been getting a lot of amazing press and feedback from the community.

Featured articles about the dashboard: