Design new button linking to candidate comparison pages from candidate profile

[noahmanger]

So that users can easily compare candidates running in a race, create a more prominent link to comparison pages from candidate profile.

---

Concept:

Follow-up from https://github.com/18F/openFEC-web-app/issues/2167

Completion criteria:

• [x] Figure out where the button lives on the page
• [x] Figure out what the button text is
• [x] Figure out style of the button
• [x] Design end-to-end interaction for the button: where does it take you, how do you get back?

[jenniferthibault]

Button style & placement

Since this needs more attention than a regular link, but it a little much text for a regular button, it feels like a good case for our small card pattern.

We had initially marked out space for a quick intro line to the Financial summary (and other) sections, so I've pieced that in as part of this since it helps with some of the layouts.

👀 ing three different locations:

1. Fixed below the menu, which keeps it accessible from any tab but competes in visual hierarchy for attention with the menu

---

2. Fixed in the title space. Would need to drop the standard card pattern for a large button instead, since the space is too short, but would keep it available from any tab

---

3. In the right-hand column. This feels like a really good place for a card element, since it's a familiar use of space, but puts it only on the financial summary tab. Since this is usually the first tab, that's ok, but we'd probably want to repeat it at the least on the "About this candidate" tab

---

End to end experience: how do users get back

• Selecting the candidate from the list on the election page
• Using the browser "back" button

I'm inclined not to add in any other "back" design at the moment, until we see if people struggle to go back, or desire to go back after landing on the election page.

---

Visually, I prefer option 2 or 3. I think 1 competes a little too much with the menu and title to me. Being able to access the button from any tab also feels like it can better accommodate people at any stage of exploration. This is all based on some speculation though, so I'd love to hear what other people gravitate toward as a first option to try. @patphongs @noahmanger

[jenniferthibault]

In design pairing today, we discussed that:

• it feels better to be able to access the functionality from any tab
• the card pattern is too large, bold, and attention-grabbing. We prefer the large button style with icon.

So back to this concept:

Which I think is ready to go to implementation!

[noahmanger]

Closing this since the design is done and implementation is happening in #2231.