Design layout/placement plans for example resources on C&C Services lowest level article page templates

[jenniferthibault]

Using the Candidates and their authorized committees sections, Registering and possibly Filing reports, design layouts that can be case studies/templates for how and where we integrate example resources.

Some of these examples & resources can include:

• Candidate registration video (On YouTube, https://www.youtube.com/watch?v=xWY7MyUFVSs but will soon be replaced with an updated version that Greg is working on)
• (?) Testing the waters video (On YouTube, https://www.youtube.com/watch?v=UcS60Xyg91s )
• RAD’s FECFile playlist for authorized committees (On YouTube https://www.youtube.com/playlist?list=PLJr_nRe8SzD3ZnN8o-af5idxz2F9Ohk53 )
• Reporting examples from the Guide
• Examples from RAD’s FAQ pages (http://www.fec.gov/rad/candidates/FEC-ReportsAnalysisDivision-CandidateCommittees.shtml )
• Reporting deadlines
• Relevant forms that need to be filled out (Form 1: Statement or organization; Form 2: Statement of candidacy)
  • Examples of correctly completed forms
  • 
  • 

[jenniferthibault]

@emileighoutlaw I think one initial step is to assess which examples are right to show in the context of which page.

For example specifically, making a first pass at which examples we should pull from the Guides and RAD’s FAQ pages?

[emileighoutlaw]

I think that's a great first step. Completely agree

[jenniferthibault]

@emileighoutlaw: I forgot there was an open thread for us on this issue about putting these in context of real pages. Do you think that's feasible at this point?

Separately, I did some pattern gathering to show what we have at our disposal now for referencing resources and examples. The following could likely cover sidebar area placement for:

• Video examples
• Reporting deadline links
• Forms

But there was more opportunity for clearly establishing a pattern to call out examples in the body of the content. I think we could do that simply through an offset and font family change. These could cover the remaining categories:

• Reporting examples from the Guide
• Examples from RAD’s FAQ pages
• Examples of correctly completed forms (excerpts & full documents)

Would love to hear your thoughts on how to continue from here!

[emileighoutlaw]

Thanks for waiting so patiently for my feedback, Jen!

I have been brainstorming around the question of which examples are right to show in the context of which page.

Since we're going to be making that call on a page-by-page basis, I tried to get us started with one single page that — if fully built out — might have a little bit of everything (a buffet of resources, a tapas restaurant, something else food related (I'm in a silly mood tonight) ).

I landed on our candidate registration page, which currently looks like this:

Very minimal!

But ideally would also include a bevy of other information— media, Commission publications, sample forms, a search, an example, and legal citations:

Media
This Candidate registration video hosted on Youtube. (I like our pattern of linking to Youtube, as opposed to embedding on the page)

Publications
We have an FEC Record article on preparing for the next election,

And a brochure on candidate registration.

A quick aside on this: In this section of the website, we hadn't previously distinguished between "related pages" (i.e., another page in the Registration and reporting section) and what I'll call an "additional resource" (i.e., brochures and other publications). We've been showing both in a single sidebar called Related topics. But I think a visual distinction might help with scanning and comprehension.

Sample forms
Here's a completely filled out Form 2:

Which is pretty lengthy, but I think the reporting examples often are.

Search
On this page, I'd like to give folks a pathway into the data. Maybe something like:

An example
This might actually be better served on a "Testing the waters" page, but for the sake of imagining what a page with everything on it might look like, I included it here:

Legal citations
We don't have any listed on this page, but there should at least be several regulations. The more stuff we start to put on pages, the more I like the feel of citations at the bottom (like footnotes), the way we have them on the AO process page. They're not something we'd expect every reader to want to dive into, although they would be important to a few.

And that's all! But that's a lot of stuff. Phew. Does this give us stuff to work from? Shall we sit down and discuss? 💟

[jenniferthibault]

Dropping this here with thoughts ahead of possibly chatting with @emileighoutlaw next week:

I think we now have ways of accommodating each type of thing in the cornucopia of resources and examples we've listed, but may want to think about if, when, and how we're labeling/categorizing these resources.

[emileighoutlaw]

So excited to talk about this awesome update. Definitely agree that we need more thinking about if/when/how to label things!

[jenniferthibault]

@emileighoutlaw and I paired to work through the logic of how to group examples, label them when relevant, and position them relative to each other.

We removed the legal resources because it's unlikely to come up in this content (and if found necessary at a later date, wouldn't disrupt the layout).

Otherwise, here is an annotated mockup of where resources and examples should be positioned when they're present, and how they're styled.

@noahmanger I could use your help from here to figure out how what we'd need to know or consider as limitations if we wanted to incorporate these as fields in the CMS.

[noahmanger]

There's no limitations as far as I can see. This all looks really straightforward.

[emileighoutlaw]

Crap — I fear I did a bad job reviewing/communicating which legal thing to cut from the design. We do want to have the legal citations on the bottom of every page, but we don't need the Legal resources component in the right sidebar. @jenniferthibault

[jenniferthibault]

Oh—that's a bit surprising to me. There's never a time where registration and compliance activities need bridges to site offerings in the legal resources section?

[emileighoutlaw]

Most of what committees are looking for (in terms of legal info) is original-texts laws, litigation, and AOs. They read the page and then want to cross-reference it with the actual law/rules.

But because no statement is good without a couple of exceptions, the exceptions to this are:

• Administrative fines are part of the legal process. But they happen as a result of late filing. Because we have a "Filing reports" landing page, we added a pathway to Administrative fines info there:

• The complaint process and the audit process might be of interest to committees. But:
  1. They don't map neatly to any of the topics covered in the candidate and committee services section
  2. Our original IA testing showed that people expected to find this information in the legal resources section.
     Those two things noted, I'd still like to go back and test navigation to complaint and audit pages again when we have a more complete site. But those two topics are a small exception to a larger rule that the legal info committee folks want are nearly always the citations.

[jenniferthibault]

Ok no biggie, it looks like we'll just rely on body copy links for those types of exceptions?

I think that just brings the legal citations module back, and drops the legal resources section from the sidebar. Can you confirm @emileighoutlaw?

@noahmanger could you help bring this into implementation issues for the CMS?

[emileighoutlaw]

Confirmed that this is exactly as I imagined. Apologies again for the communication fail, @jenniferthibault

[jenniferthibault]

No apologies necessary @emileighoutlaw ! Communication goes two ways so it was equally on me, but it was really a quick fix!

[noahmanger]

A few questions before I make implementation stories:

1. Is this the style you want to use for all document thumbnails (with the gray border on the left) or is it just for examples?:
   

2. Is that quote style something we should just make a universal style for block quotes? Or could you see having a separate style for non-example blockquotes?

3. For the "continue learning about this topic" section, what about using this pattern? Just an idea.

[jenniferthibault]

1. Just for examples! The field should include a label/header

2. I styled this specifically for long paragraphs of text. If we had a separate style for block quotes, which are usually (or should be, if they're used right) shorter, 1-2 lines. In which case I'd make a larger sized font. So I'd see these as separate. (This field should also include a label/header) Would you like me to make a block quote style now?

3. Yyyyyyyyes, sort of? I see exactly why that should work, but we'd need to not use the slab background, since that would cut off the page from the content below it (the legal citations). We also might need to make a slight tweak to the way brochure covers are built in to the cards, since the background color is the same. I've added a slim border line here that should work for others as well. Does that work?

[emileighoutlaw]

Tagging in our intrepid content managers to take a look at the designs @jenniferthibault and I have been working on.

@FECHoosier, @gsmaragdis, @llienfec, @dorothyyeager, @amypike @AmyKort:

This image shows a design that incorporates each type of additional resource into our existing content page design. In the image you'll see what a page would look like if it had every type of additional resource. We could add in or omit any of these, depending on what each page needs. Pink text is explanatory notes. (click the image to make it bigger).

We're ready to know what you think of this. Do you see any potential issues for users? Any resources that we might want to add that we've missed?

[llienfec]

This looks really good @emileighoutlaw & @jenniferthibault

I like the legal citations moved to the bottom. It lets us offer help with the concepts before they encounter the very formal legal cites.

In the notes, it looks like RAD FAQs & reporting content go into the example paragraphs, which makes sense to me. We also have reporting examples that are specific to certain situations & asked often enough that they need a home on the page. Would you envision that examples would be for standard reporting examples and putting more specific stuff in another place? The Example section could get pretty long if we include all of the reporting content - wanted to get your thoughts.

Also, should we change the RAD FAQs & reporting content from a question/answer format? They contain links right now, and we'd love to add form pics and clearer examples in. We can change them into whatever you think will work best.

[emileighoutlaw]

That's a great question, @llienfec! You're definitely right that examples can get long really fast. And really long pages can be overwhelming.

The way we handled this exact concern for Administrative Fine content was by creating one page about the administrative fine process and another page about how to calculate a fine.

So all that's a longwinded way of saying we'll probably have to think about how to break up content page-by-page. But I think your head is definitely in the right place. Do you have any idea which pages you anticipate would have a lot of examples on them?

[llienfec]

@emileighoutlaw I looked through and anticipate that "personal loans" will be long because a single reporting example is very long. Same for "brokerage loans." A slightly different challenge for something like "day-to-day operating expenditures" where we have to show the itemization rule and how it works for each of the topics on the page. I think we'll have a similar challenge on a couple of the receipts pages as well - I'm slightly less familiar with the architecture of those pages.

[AmyKort]

Thank you @lleinfec !

[AmyKort]

Seriously, not my day. Thank you @llienfec !

[dorothyyeager]

I'm liking this set up a lot. The legal citations make total sense at the bottom. One thought - do you want to move the "continue learning" section to the sidebar? On the one hand, it makes sense where it is - you read something, now continue learning if you want. On the other hand, it might get lost on a long page.

Noticed this comment above:
A quick aside on this: In this section of the website, we hadn't previously distinguished between "related pages" (i.e., another page in the Registration and reporting section) and what I'll call an "additional resource" (i.e., brochures and other publications). We've been showing both in a single sidebar called Related topics . But I think a visual distinction might help with scanning and comprehension.

I've actually been similarly confused, so the visual distinction sounds like a good idea.

In general, I think we are going to have a lot of separate pages. As I was going through the receipts and disbursement pages, I feel like there are a lot of topics that really could be on their own page, especially if examples are going to be added.

[noahmanger]

Made a new issue for implementing, so closing this https://github.com/18F/fec-cms/issues/852