Review/improve styling of "Candidate and committee services" landing page

[emileighoutlaw]

The Candidate and committee services landing page could use a visual eye, now that we have real content on the page!

This page uses Wagtail's Services landing page template.

What's going on with this page:

1. Users have to sort through lots of content and links on this page. To lighten the load, I eliminated one of the introductory paragraphs. Having an extra intro isn't particularly useful, especially for the FEC, which has such a tough time discussing their offerings in broad terms. One intro = more than enough. The real place we can make a difference is on the individual committee-type introductions.

So what we've ended up with is an odd spot at the top of the page:

2. During our sitemapping, we identified some more content (beyond the committee-specific information) that we need to create pathways for on this landing page. (Noah and I can talk more about why we decided this content should be migrated and surfaced in this section.) The content we need to link to is:
   • A page of all dates and deadlines
   • An index of all FEC forms
   • All upcoming education and outreach events

[onezerojeremy]

Here's a first take at how we might incorporate those links:

Then, with apologies to your aesthetic and microcopy sensibilities, the proposal is to reframe the RAD contact form as a more broad "Get Help" (obviously not the title, also pretty sure i didn't apply the layout pattern correctly, but you get the idea)

Questions you might have: Why is this the order? Mainly basing it on the relative popularity of the current site:

so, by far the most popular link is the deadlines, with the forms index coming in second. It makes sense for seasoned filers to have these links right at the top.

I think there might be another place in the architecture for educational outreach, but i think it could be a good thing to have here as well; and it makes sense to have after you've looked over everything: if you're still confused, the ability to get some training could feel pretty darn welcome.

[jenniferthibault]

@onezerojeremy using the card mechanism right below the hero feels good to me for the deadlines & forms, but I'm not sure about putting "Get help" up there with it quite yet. What feels different about that action is that I understand the flow as something we want users to explore before resorting to getting in touch with the FEC staff for help. Putting it up with high-priority items feels out of line with that understanding. (but that understanding could also be off!)

What if we put that card into bottom card area? It'd be ok to only have two at the top, we could use the same format as the data landing. This would be a new pattern in the CMS, but not a new pattern to the site.

I'm less confident in my ability to make judgement on the Contact page, and would really want @emileighoutlaw to weigh in. Up 'til now, we've been purposefully not making a contact page for especially for each division, and this feels similar to that. BUT it doesn't feel wrong? It all makes sense so me, which is why I think I don't have clear guidance here and we need Em.

[AmyKort]

It's me (jumping in when no one asked me). On the get help issue, I've always thought of the breakdown a little differently. Registered committees contact RAD. They don't have the staffing capacity to speak to folks from the general public. Folks from the general public (including people like attorneys or researchers) talk to the Information Division. While those conversations are generally anonymous, that's not really their defining characteristic. Journalists speak to the press office. Members of Congress and representatives from other government agencies speak to Congressional Affairs.

At some point in the near future, each of these offices will have a phone number (like they do now) and a similar portal into our correspondence tracking system. Right now, each of these offices has a phone number (Amy states the obvious) and Info, Press and Cong Affairs have email addresses where they receive and answer questions from their particular segment of the public.

If you look at it this way, is Get Help a little bigger than we're imagining here? I don't think we'd need the Press contact info from this page, but I think we might want to account for the other offices if we frame it this way. Or could we frame it more narrowly? cc @amypike

[onezerojeremy]

This is good feedback!

I'm down with trying "get help" lower, @jenniferthibault your rationale feels reasonable. (this is one of those places where there is a real tension between business goals of reducing the amount of folks who just call first and user goals of trying to find a goshdarn human to talk to from a website)

Also, I wasn't trying to propose a divisional contact page; rather, a contact page that is tailored to a particular set of users might be something they'd find helpful.

And yeah, @AmyKort, you caught me red handed. The "ask an anonymous question" is terribly titled, and is not necessarily the right concept. But the idea was to have a phone number for Public Info, as I thought I remembered that some filers call that number for things they'd rather not run by their analyst, or some that just don't know they have an analyst yet. I could be misremembering, and if so, apologies!

[onezerojeremy]

Also, you're right @AmyKort that the framing of "get help" is too broad. Sorry, sloppy microcopy: probably it would be something closer to "Get help with your filing/reporting/" or something. @emileighoutlaw halp

[emileighoutlaw]

Hi everyone! It's awesome to catch up on all the amazing brainpower that happened in this issue on Friday!

Jen read my mind about putting contact info a little lower on the page (and for exactly the reasons she outlined), so I'll leave it at that. Additionally, the collected deadlines and collected forms much in common in terms of form and function— having the two of them paired together feels faster to scan and understand to me than having the two of them and a third, slightly different contact piece up at the top.

And then there's contact pages. Ugh. They are so hard. In the past, I've avoided multiple contact pages as much as possible, because they are a stress to maintain— if you have to update one email, you have to remember to update it on several of pages. There's also a problem with URL sharing. If a contact page gets shared (and isn't the full contact page), that can be confusing.

Amy also brings up a fascinating point about this content, which is: Although the primary user group for this section is candidates/committees, we hope that it will also be used by researchers, journalists, and folks from the public who want to learn more about candidates/committees. They're secondary groups, but if they have questions, we wouldn't want them to reach out to RAD, and so a tailored contact page for this section would actually include a lot of the existing contact page information. (And that got me thinking. !💡! This need for lots of contact info for lots of user groups is a problem on several sections of our site, not just Candidate and Committee Services.)

So now I'm wondering if what we need here isn't a tailored contact screen, but a secondary task to update our main contact page so that when different types of folks come to the contact page from different sections of the site, they can more quickly figure out who to call. We do some of that now:

But there's certainly room for improvement. What do y'all think?

[jenniferthibault]

Definitely game for making a separate issue for making improvements on the main contact page instead of a unique one here, though it will likely require 2 links from the Candidate & committee services page: 1 for linking to the RAD contact form(?), 1 for linking to the contact page.

I am not completely certain what types of changes should happen to the main content page, but @emileighoutlaw sounds like you do? Want to go ahead and start that issue?

[emileighoutlaw]

After pondering this a bit, I think the most useful place to put the RAD contact form would be on the lowest-level content page. If our intention is that we want users to explore content before resorting to getting in touch with the FEC, that seems like the right level for it to be, the same level as the new content.

Then I had the thought that maybe this form should be in two places— once on the lowest-level page and then again on the to-be-improved main contact page.

I know we just wrapped work on additional resources in: https://github.com/18F/fec-cms/issues/727, so this is an annoying wrinkle. What do y'all think? Am I off base?

[jenniferthibault]

@emileighoutlaw let's talk, I think we're using the same words for different things, or different words for the same things, and it's hard to tell. Looking for calendar time for Jeremy, Emileigh and myself next up.

[jenniferthibault]

After syncing with Jeremy and Emileigh, we've settled into a complete set of recommendations:

Links to reporting dates and collection of forms can be cards at the top of the landing page

---

Links to the RAD form, trainings, and looking up candidates & committees can be smaller cards underneath the main content of the landing page

---

Links to submitting a question to RAD will be under the main content of every lowest-level content page in the section (and may sometimes be joined by other cards, depending on the content)

---

We'd like to make some tweaks to how the phone contact info is presented before the form, to help users self-select or redirect themselved to the line appropriate for them here I'd like to tap @emileighoutlaw for her additional awesome thought about why that makes sense here

---

Emileigh's going to help me out with some extra context that I may have missed, but I wanted to collect all the changes in one place for folks to see together. Thanks!

[emileighoutlaw]

Hi everyone! (And thanks for tagging me in, Jen!)

We've got a couple design/content/UX things floating around in these mock-ups, so I'm going to take a stab at addressing them one-by-one.

Placement of the link to the reporting dates and forms pages

Our understanding is that advanced internal and external users need quick access to summary information about reporting periods as well as the lists of forms. That's why we aren't only including links to forms and dates on the bottom-level article pages.

This being the case, it felt right to link these features above the fold— advanced folks need fast and easy access to this info. With this placement, they're prominent and only one click deep.

Placement of the link to the RAD form

One of our goals with the RAD contact form is to provide a way for users to get help after they've explored our content. We wanted to create prominent pathways to the RAD form, but we didn't want those to be prioritized above the content itself.

That's why you see "Ask the Reports Analysis Division a question" in the footer on these designs.

Also in the footer, you'll see that we removed a second card with a link to the contact page. We did this because there's still a "Contact us" link in the footer, and we didn't want to create a potentially confusing choice for users.

Tweaks to the RAD form itself

We know that RAD doesn't want to get stuck filtering through emails from folks who aren't authorized representatives. We wanted to create an exit strategy for folks who need help but don't qualify to submit the form.

So we added phone information to the top of the RAD form. It provides a clear pathway for authorized committee folks and others to reach out to a human at FEC, if they need help.

Phew! I think those are the main thinking points from this design work. Excited to hear your thoughts on this @AmyKort and @llienfec!

[AmyKort]

I'll defer to @lienfec. I think this works for now, but at some point I'd like to put our heads together in person because I don't think this necessarily works as a long-term solution. Thanks for sticking with this!

[AmyKort]

Oops @llienfec.

[llienfec]

These changes look really great @emileighoutlaw. Placement of forms and filing deadlines makes a lot of sense. We get tons of calls about deadlines. I like that they're not buried on the page.

Changes to the RAD form look good too. I like the alternate contact at the top to direct people away if the form isn't for them.

I think the RAD form placement makes sense, especially with the context that we'll be enriching the content pages with the "extra stuff" that will hopefully answer a lot of basics. I think we'll need to see the content pages all together and pass it around here to know if the solution is one that we can keep long term. I also agree with @amykort that it would be good to chat briefly in person next week too.

Thanks for all of your amazing work on this @emileighloutlaw @jenniferthibault & @onezerojeremy

[llienfec]

Typing fail. Sorry Emileigh.

[emileighoutlaw]

I realize we never put our heads together in person about this at PI planning. @llienfec and @AmyKort: Shall we find a time that you can chat with @jenniferthibault, @onezerojeremy and I?

[AmyKort]

That would be great. Thank you!

[llienfec]

Good catch. That would be great.

[emileighoutlaw]

After our meeting today (Jen, Jeremy, Amy, Lauren, David):

1. These designs are ready for implementation and release
   • Amy and Emileigh may want to change the title of the "Dates and deadlines" page
2. As we (in the future) think more holistically about our contact information, we want to dive deeper into these questions:
   • How do we filter our many different user groups to the appropriate FEC office? (i.e., different folks viewing the same page would want have different contact needs)
   • We've included the RAD contact card on every bottom-level content page. But what are our thoughts about including a RAD contact card on a content page that isn't about something RAD does? (for example, ballot access)
3. We'd like to keep an eye, either through analytics, testing, or both, on how many people are finding and using the RAD form

[noahmanger]

Can someone drop in the most recent designs? I'll make an implementation issue then.

[jenniferthibault]

Plunk! 🖌 InVision

[noahmanger]

Thanks! Closing.