Design UX around high-level summary data

[jenniferthibault]

@noahmanger commented on Mon Jul 17 2017

This is a broad open-ended design issue around figuring out the components we're going to design to address the user needs around browsing high-level summary data, as identified in fecgov/openFEC-web-app#2167 .

Some things to consider:

• Figure out how previously designed visualizations and figures fit into the experience: where do they live? Does anything need to change from their old designs?
• Design the experience around election summary information. How do users find the race with the most spending? What is the best way to visualize this information? How do users see how much a given race has raised/spent? How do users view data for all races / candidates in a state?
• What does this all mean for the "discover" experience more broadly?

This issue will be done when we can break out smaller design and/or development tasks.

• document high-level flows and rationale

---

@noahmanger commented on Wed Aug 30 2017

Synced with @jenniferthibault today and we agreed that the concept outlined in these InVision screens is largely answers these questions. The idea is to set up a series of comparison pages:

• US nation-wide
• State-level
• Contest (individual Senate, House or Presidential races, i.e. what we have now)

These pages will incorporate the old visualizations we designed as well as the ones we've implemented and give users a way to compare contests and view state- and contest-level totals, and be the primary way of providing a "discover" experience.

The next step is for Jen to refine these designs a little bit more and answer a few lingering UX questions. The goal is to have well spec'd designs for the next PI planning so that we can break out discreet dev tasks.

Towards that end, my last contribution on this is noting a few areas where I know we need new API endpoints, with the caveat that these designs aren't full complete, but I wanted get this out somewhere.

1. Totals by contest/state/nation-wide

This endpoint should provide total raising, spending and IE totals by cycle per senate, house and presidential contest. Additionally, whether separate endpoints or all part of the same one, I don't know, but we'll need a way to see the total raising across all House races or all Senate races nationwide or in a particular state. This should give totals as well as subtotals by party (D, R and other).

There's currently an implementation issue for this here: https://github.com/18F/openFEC/issues/2534

This will feed these figures:

2. Nation-wide contributions by state

One figure we definitely want to show is the total contributions per state, perhaps filterable by different committee types:

There's an old implementation issue for this here: https://github.com/18F/openFEC/issues/1973

3. Nation-wide contributions by size

Another figure we'll likely want is total contributions by size, perhaps filterable by different committee types:

There's an ungroomed issue for this here: https://github.com/18F/openFEC/issues/2536

There will be more, but that's what we know for now.

---

@jenniferthibault commented on Wed Sep 06 2017

Status remains the same from Noah's comment above:

The next step is for Jen to refine these designs a little bit more and answer a few lingering UX questions. The goal is to have well spec'd designs for the next PI planning so that we can break out discreet dev tasks.

Since I'm OOO the remainder of this sprint, this could get bumped to Sprint 3.6 for completion

---

@jenniferthibault commented on Tue Nov 28 2017

This work will continue into the next sprint, and I've upgraded it from a 3 to a 5 in size.

Here's an idea of the work going on:

• Completing the interaction designs for the data visualizations around Senate & House race pages
  • for each state
  • for nation-wide summaries
• Identifying overlapping compliance information
• Integrating the compliance information in design and navigation flows
• Creating an IA prototype for demonstrating the logic
• Creating an InVision prototype for demonstrating the designs

[AmyKort]

Thanks @jenniferthibault ! Do you want to partner with any content folks for identifying the overlapping compliance information?

[jenniferthibault]

I definitely will! Though I'm not quite at the point where I'm ready for that yet, I'm trying to block out a basic level of navigation first, but then definitely yes!

[rhoughfec]

@jenniferthibault happy to help with some of the content stuff when you're ready for it!

[JonellaCulmer]

Long comment alert!

Elections flow

To understand the scope of pages, templates, and views, we diagrammed the page model we’ve been working on.

This flow contains the content accessible through the election search interface, which is both the module embedded on the Campaign finance data landing page, and the Elections search results page.

What the elections model is made of

The model is composed of three primary views of an election, going from broadest view (nation-wide comparison) to medium-sized view (state-by-state race comparisons) to most distilled view (a single race).

The following diagram outlines initial blueprints for known broad content interests, and the planned pathways between them. Dotted lines represent pathways that are currently more drafty and less understood than the rest.

Sorry, these images may be a bit small. For a better view, click the image (opens in a new tab).

Starting on individual Race pages

Pages for an individual race, like a Senate contest, a Congressional district election, or a Presidential election represent the smallest unit of an election. They are also the pages within this model that exist in an MVP state on the live site.

Examples:
2016 Presidential election
2015–2016 Alabama Senate election
2015–2016 Alabama House District 1 election

Since the state-level and nation-wide election pages would total/aggregate much of what’s needed on the race pages, we felt it made the most sense to continue fleshing out the race pages as a first step. After identifying a sufficient amount of clarity, we’ll make issues to follow a similar process in fleshing out the state-level and nation-wide election pages.

User flow to race pages

The following demonstrates the possible navigational pathways a user could take to get to a race summary page.

The elections flow supports our data users interested in making comparisons and discoveries about specific races, rather than drilling down from the nation-wide level to the race level. With that goal in mind, below is how a user might move through the system to get to this content.

Users need to be able to enter this flow from the election search module at any of those three views, and navigate between them to go up or down a view size where appropriate. The next most common pathway into this content is from the Candidate profile pages into a single race summary page.

Content / outline for race pages

Individual race pages currently include candidate financial comparisons, including receipts, disbursements, and cash on hand, with links to candidate profile pages and source reports.

To flesh this content out further, we’d like to incorporate additional information on these pages to tell a more complete story of these races. We intend to incorporate the following information:

1. Raising and spending summary

• Total raised by candidate committees
  -- Party breakdown (Rep, Dem, Other)
• Total spent by candidate committee
  -- Party breakdown (Rep, Dem, Other)
• IEs by other committees
  -- Support totals
  -- Oppose Totals

2. Top election contributors

• Individual contributors (Citizens and Committees)

3. Candidate financial totals (currently live)

• Cash on hand, Receipts, Disbursements, Source reports

4. Upcoming/specific report dates and deadlines

• Regular quarterly or monthly reports
• Pre-primary/post-general
• IE/EC reporting periods

Next steps

• Review progress and proposed plan in design pairing with greater team (front end, PM) @PaulClark2 @johnnyporkchops @xtine
• Wireframe race page content more fully (create a new issue for this)
• Document relevant/applicable changes that need to occur throughout the system - how the addition of this new content impacts other areas of the site (break into new issues) Documentation here: https://docs.google.com/document/d/1GPRvcNtJk6UJ3RDxz-QvNRip_6Yye4oyrJZhZ7vjqyo/edit#heading=h.jn7ye7j4rids

cc: @jenniferthibault @patphongs

[JonellaCulmer]

Had a great discussion today during design sync where we walked through the user flow for high-level summary data and navigation to race pages, as well as a review of preliminary wireframes. Here are some takeaways and considerations as we move forward:

Short term goals

Top contributors

• Talk to @fecjjeng about the data services logic for matching individual contributors for "Top contributors" feature and aggregation of individual contributor contributions.

Report dates and deadlines

• Break out "candidate filing deadlines" from "committee filing deadlines". So that all who have activity with a given election will be able to answer the question "what are my upcoming deadlines?"
• Determine how date and deadline information can be maintained in wagtail to minimize the burden for those who upload this information.

Long term goals

User flow

• Identify how data users will move through the high-level data summaries from the race-level to the nation-wide level.

[JonellaCulmer]

Here are the preliminary designs discussed at today's design sync. These will also be included in a wireframe specific issue (#1674).

This design was created with the idea that all race-relevant data and information would be found on page, instead of broken out onto several pages. It features information already available on fec.gov as well as new content to address the "one-stop shop" goal.

The one caveat to including all this information on one page is that it would require additional scrolling on the user's part.

This second design was created exclusively to find a location for state election and contact information for state election offices. (This information has been previously included on the classic.fec.gov site.)

That said, there is an opportunity to outline additional content and provide additional information data users may need as part of their election research, such as candidate and committee names. However, with the inclusion of a page meant only for "About this election" information, would no longer retain the one page "one-stop shop" concept.

[JonellaCulmer]

Closing in favor of #1674.