Make candidate and committee page designs visually distinct at first glance

[jenniferthibault]

Based on @onezerojeremy 's user research that showed that users had difficulty telling the difference between candidate pages and committee pages.

[jenniferthibault]

@onezerojeremy / @noahmanger for review

New color arrangements:

Styled pages:

[onezerojeremy]

Fantastic, fantastic! I think this should draw the distinction much stronger. Can't wait to test it.

Some small thoughts: --Candidate Page

• the horizontal rule (HR) right below "financial summary" in the first committee information feels like it's being used in the same way that the HRs are to separate committee types. This probably won't feel as problematic on the actual web, as folks won't often be looking at the whole page at once, but it might be worth a tweak.
• Curious about the receipts/disbursements/cash on hand/debt numbers: they feel a bit prominent, which I'm betting you have rationale for that I could guess at but I'd rather just hear. Also on those, it might be good to think about linking the actual numbers (for receipts and disbursement) if we're not providing some other way to hop directly to those tabs on the committee page.
• I'm still not totally sure the button to "view all data for this committee" at the top will be a strong enough call to action to the candidate page. I think the value in having it at the bottom of the committee card is that it gains prominence by sitting alone, and falls in a flow, which to me feels pretty natural : "I read the committee title, i may not be totally sure what i'm looking at, i see the numbers and i get interested, i click the button to dig deeper"; this feels like it makes sense to have one underneath. An inordinate number of testers clicked on the "source" looking for more data and only getting a pdf.
• which raises a related question: should we label/differentiate pdf links?
• just an ixd note: if there are no other authorized committees, that section should disappear. (I think it does this now)

--Committee Page

• looks great!
• my main question: what is the visual treatment for expanded state on the items (clicking plus on a total receipts line)?
• not sure we need the show/hide charts button anymore. They live at the bottom of the page, and there won't be anything below them (which is different than on the candidate page).

[noahmanger]

Ok, got to go over some things on the hangout but going to write it out here for posterity:

In general, this is 100% moving in the right direction, and is helping bring some added clarity to the way I'm thinking about this page.

The big thought I've got is that I think we can this even one step further and use this big beautiful table of numbers to show the aggregate total of all authorized committees' financials. If you go to a page like John McCain you can see the way we currently do this (though not styled).

But what I think would make sense is to simply have a single table that looks like the table you have here. If there are multiple committees it aggregates their totals, or if there's just one it just shows from the one. And then either way we have big bright calls to action to the respective committee pages (maybe with some way of calling out the primary committee).

This way, the candidate page gives a wholistic look at financials and no more. For single committee details you have to go to their committee page.

It also brings symmetry to the election page, where candidate numbers are the aggregates of their authorized committees.

Other thoughts:

• I love the idea of separate color coding for candidates and committees, but not crazy about the ivory color here.
• Either way, the call-out to committee pages should be the same color as the committee header
• On the committee page, we actually don't need the first table for "most recent report". That now simply lives on the filings tab (still in development). So this first tab is just for totals.
• In the header, the rule that separates the label from their content (so "Political Party" from "Democratic Party") feels like too much, and I'm losing the connection between the two parts. I think we can either do away with it or make it more subtle.

Other than that, this is really coming together.

[jenniferthibault]

Closing this: We'e accomplished the goal of making them visually distinct in implementation, and are now fiddling with stylistic details in the browser.