Refine design of "Press kit" or "Media room" page

[noahmanger]

This is a placeholder issue. We need to discuss what needs to happen here.

• [x] UX design of "Press kit" page(s)

[emileighoutlaw]

Background

This issue is for the content that used to be known as Resources for Reporters on FEC.gov. It's ~20 pages of evergreen content (doesn't change with election cycles or breaking news). It's all culled from the Press team's experiences helping journalists answer questions.

We do have good data from the Press Office that the information in Resources for Reporters is the most important, most frequent information journalists are looking for.

We don't have our own research to reinforce that a Media room is the most effective way of surfacing this important information.

That said, with the organizational pressure to migrate content before the end of the fiscal year, devoting more time to research or exploring design solutions is off the table for now. (I'm happy to talk about this, and I think we can consider revisiting at a later date).

Pros and cons

Naturally, building a section of content out without much on-the-ground research has pros and cons

Pros	Cons
Builds goodwill with Press office and FEC	There's so much content in the resources for reporters that this feels a little like a "mini site" for FEC
Allows us to migrate more content faster (maximizing content moved before the end of the fiscal year is an important metric for FEC)	The static content in this section is going to overlap with and repeat content we're building out in other sections of the website, which starts to feel like a violation of our "one content / one place" principle.

The Press kit or Media room

I'm still working on a few content refinements, but we have a Google Doc draft of the new Media room.

cc @nickykrause @jenniferthibault

[nickykrause]

@emileighoutlaw

Thank you for this explanation!

I first want to make sure I understand what I am looking at in the Google Doc, as I have yet to collaborate with an 18F content designer :smile:

So, I have a few questions (the answers to which may blend into each other):

• Did this content come directly from the existing Resources for Reporters page, or did it come from there + edits from you? (It looks like this isn't a direct lift, but I'm not sure).
• I am trying to understand the page structure of this press kit section. Your explanation above explains that this is ~20 pages of content. Do you mean that there were 20 pages on fec.gov, or that we envision this breaking out to 20 pages on beta, or that it takes up about 20 pages in a Google Doc?
• I assume we are trying to move away from dumping all this information into a mega FAQ (per the existing site), given that such a feature isn't very usable, and given the advice put forth in 18F's content guide (here), yes?

[emileighoutlaw]

Hi, @nickykrause! Those are all awesome questions!

~20 pages means it takes up 20 pages in a Google Doc; I haven't started thinking of how it might be designed on beta.

Yes! We absolutely want to move away from a mega FAQ (for precisely the reasons you listed). That said, we aren't — at this point — empowered to make major changes to the content. So far I have:

• Edited the headers (so they aren't questions)
• Tinkered with the organization a little bit

So what you're seeing is a 20-page Google Doc that has headers I've messed with (that we can keep messing with), and paragraph text that's almost exactly word-for-word what's on FEC.gov.

Sweeping changes to the paragraph text s pretty much off the table right now. We might be able to revisit this when we have more content on beta (content that's better than what exists on FEC.gov). One of the main reasons this section is so comprehensive is because content on FEC.gov is very hard to find and use. When there's information on beta that is easy to find and use, we might be able to reconsider having such comprehensive reporter resources.

Last note: I am planning on making minor changes to what's currently in the paragraph text. For example, the Press Office said I can remove all the "[here]()"links, for accessibility reasons. And anything that references registration and reporting requirements can be pared down and linked out to our Registration and reporting section of betaFEC.

[nickykrause]

cc: @emileighoutlaw @jenniferthibault

Thanks, Emilieigh! All of that is very helpful.

Is it accurate to say that this Media Room / Press Kit section is most similar, in terms of the amount of content, to the Registration and Reporting section of betaFEC? I ask because I am trying to understand what conventions we have already established for navigating hierarchical pages of content.

[nickykrause]

@jenniferthibault: I didn't actually mean to tag you yet!

[nickykrause]

FYI: @jenniferthibault

@emileighoutlaw: I decided to move the discussion here instead of DM.

You sent an image in Slack of the "Press" section, which I am translating to a list here:

• Press (a page, containing a feed from latest updates + info/link to Media Room)
  • Latest Updates (a page, containing a feed of Press Releases, Weekly Digests, and FEC Record articles)
  • Media Room (TBD)

First: I hope that translation is accurate! Feel free to let me know :smile:

Second: I am asking about this because I'm attempting to more clearly pin down what needs to be designed (UX-wise). I am going through your Google Doc and trying to picture how that content would translate into pages + navigation. My main question is how many tiers deep the content would need to go.

It started looking like this in my head, where each item in bold is its own page:

• Press
  • Contact Press Office
  • Latest Updates
  • Media Room
  • Agency Overview
    • Commission (??)
    • Campaign Finance Law
    • FEC Enforcement Programs
    • Fundraising and Contributions
  • About Candidates and Committees
    • Registration Requirements (includes Reporting + Role of Treasurers??)
    • Presidential Public Funding
    • Convention Committees & Host Committees
    • Inaugural Committees
    • Presidential, Senate, and House Candidates
    • Political Action Committees (PACs)
    • Political Parties
  • Public and Coordinated Communications

In this scenario, there are three tiers, with "Agency Overview" (& equivalent items) acting solely as groupings of some kind for pages, not as pages themselves. If we did something like that, we could perhaps follow the navigation convention that exists in the Registration & Reporting section, where this Tax ID page is an example of a tertiary-level item, whose path would look like this:

• Registration and Reporting
  • Essentials for House and Senate Committees
  • Registration
    • Getting a Tax ID

I am not sure if this is making sense...perhaps we should discuss this synchronously?

Let me know what you think!

[nickykrause]

@emileighoutlaw: I know we may not be at this point yet, and we have lots to talk through, but I am adding a Sketch PDF that visually demonstrates what I was trying to describe in my previous post. Please know that I am not married to this idea or anything; I just thought it would help to see it.

Looking forward to syncing tomorrow AM!

Media-Room.pdf

[emileighoutlaw]

Yes! I am stoked to talk this through tomorrow, but I think you're on a great path!

[jenniferthibault]

I'm so bummed I'm going to be without wifi when this discussion happens! If I can find non-sketchy wifi at the airport, I may try to jump on. Assuming that's not the case, I wanted to submit an idea for a possible tweak inspired by @nickykrause 's work.

(Side note, Nicky you're killing it with getting up to speed on existing patterns so fast! 💪 🇺🇸 )

The structure of the Reg/Reporting side makes a ton of sense to me to replicate here, but with one possible difference. Many of the registration and reporting checklist page items are applicable to many types of registrants/reporters, so having each article live on its own page lets us cross-populate.

Here, using the individual article pages felt to me like the content was sprawling too much. I just had this very strong reaction & desire to constrain it a bit more—to keep it from spreading out across so many unique pages. I think this comes from the idea of this being a "media room" being a single "contained place" for this info. So I started looking at the accordion pattern again, in hopes of keeping the content more reigned in.

It makes for a long page experience, but I think keepings everything organized to one place will help us while we answer @emileighoutlaw 's original unknown question (We don't have our own research to reinforce that a Media room is the most effective way of surfacing this important information.)

If we go this route, I'd want to look more closely at how we structure each accordion element, and see if it makes sense to break them down to smaller accordion. blocks (especially in the Campaign finance law section, which has many sub-sections)

Anyways, this is just an idea that I wanted to get out before you chatted. To note: it's based entirely off of Nicky's first idea, so any structural idea that needs adjustments there would also need adjustments here!

[jenniferthibault]

Last, lingering thought that I don't really know where to put:

Is this still an ok time to think about a different name for Media room ? If "no", disregard what follows 😄

I'm not sure I have any brilliant suggestions, but it pinpoint what doesn't feel quite right about it, it's the "Room" part specifically, because that refers to a very physical, building-oriented space, and this is a digital product. Media can also sometimes mean "media type," like videos, audio, or other things, so a "media room" might be confused for "multimedia collection". (The FEC has talked before about finding a place on the site for YouTube videos & things like that so, it's not a far leap)

Looking at the structure for context:

• Press
  • Contact Press Office
  • Latest Updates
  • (this thing possibly known as Media Room)

Some ideas for consideration, or as a launching off point, or to toss in the gutter and stomp on

• Fact sheet (dangerously close to FAQ's, but really, that's what this page still is)
• Media kit (this feels closer!)
• Resources for media professionals (I don't know who used it first, but I saw "Media professionals" in Nicky's page mockup side resources bar and really ❤️ it)
• Tools for media professionals

[nickykrause]

@jenniferthibault -

Yay! I ❤️ the accordion approach. There are some sections that are rather long and may not fit very well in the open accordion panes, but I agree that we can/should discuss each instance in more detail. Overall, it just seems that it would be nice not to have all of this content balloon onto many different pages, if possible, so I am in favor of the accordion (or similar).

Also, it is worth noting that the current breakdown of page elements/accordion sections may not even be an accurate reflection of what @emileighoutlaw had envisioned for the content structure, since I haven't discussed with her yet. Perhaps some of the accordion panes won't be as long as they seem, once Emileigh has more input. (Looking forward to chatting with you @emileighoutlaw, and I wish you could be there @jenniferthibault.)

I do agree that "Media Room" doesn't feel quite right, mostly because, as Jen said, "media" can mean many things. On the initial "press" section landing page, the phrase "media room" might not be a clear enough indicator of what the section contains (when it is listed alongside "Latest Updates" and "Contact the Press Office.") But, we can discuss!

Finally, I also like the term "media professionals," as well as something akin to "resources for media professionals." (It could be just me, but I think of "tools" as very physical/functional, like tangible objects or software applications that a person controls in order to accomplish something...whereas "resources" feels more inclusive, suggesting not just tools but also information sources, or even people).

[nickykrause]

quick update: just had a great chat with @emileighoutlaw about all this, and we surfaced some good points how to approach the layout - accordion v. pages, or other options. She'll be posting some notes when she has a chance. (Thanks in advance for doing that!)

[emileighoutlaw]

Hi @jenniferthibault — attempting to capture here what Nicky and I discussed on our call!

Media room

The door is not closed on the name Media room! I only had it titled that because Nielsen Norman told me to! But I see why this could be confusing.

I'm leaning toward Resources for media professionals.

Accordion versus individual, checklist pages

Sprawling content is definitely an issue here. But after discussing, I think we're still leaning toward the existing Registration and reporting pattern, for these reasons:

1. Because the pattern already exists, it'll be the lowest effort to build as an MVP and test with real users. (This is Noah's smart idea from yesterday — if we're flying relatively blind here, maybe it's best not to invest a lot of energy designing something new.)
2. The research we're drawing from (conducted by others, sadly) indicates that journalists are looking for specific answers, quickly, which they want to print (this one's important to FEC and well supported by research), share, or bookmark. For these use cases, it feels like individual pages meet that need better.
3. When we were testing the accordion pattern for Registration and reporting we repeatedly encountered the issue of folks not expanding accordions if they weren't sure the accordion contained what they were looking for. My hunch is that journalists, who will be in more of a hurry than folks doing usability testing, will be even more likely to have this same problem. Also, the content is quite lengthy in some places, and accordions + scrolling is often a problematic user experience.

@nickykrause can fill in if I'm missing anything there.

All that said, I do agree that 20 checklist-type pages feels like too much sprawl. I do think some of these pages can likely be combined. I'm going to take a look at that now, as I continue moving through the Google Doc to make accessibility improvement.

Excited to hear thoughts on all this 💟

[nickykrause]

Well said, @emileighoutlaw!

[noahmanger]

Y'all are so smart. Love how @nickykrause found a way for the existing patterns to work. I really dig the accordion, but I think for the reasons @emileighoutlaw outlined above the separate pages makes more sense.

[nickykrause]

@noahmanger agreed. once we started talking it through, there seemed to be a lot of unknowns about the media professionals' needs and behaviors when reviewing the information in the "media room." (Are they browsing? Looking for something specific? Do they need unique/stable URLs for specific content items? Who are they - journalists? research assistants? Do they need to print the information, or share it? etc. etc.)

The accordion presented some challenges for some of these possible use cases we imagined, so, for that and some of the other reasons that Emileigh mentioned, the non-accordion option seemed like a good first step

[noahmanger]

Sounds great! Since this is using existing patterns I don't think we really need a dedicated visual design stage, though maybe do just for showing how the feed appears on the landing page?

[emileighoutlaw]

Good question. As always, I defer to @jenniferthibault, but it seems to me that the Resources checklist page and sub-pages can be implemented with existing templates and styles.

[nickykrause]

@emileighoutlaw cc: @noahmanger @jenniferthibault

Emileigh, do you have thoughts as to what content goes into the feed? I am realizing that I don't have a clear sense of what the "updates" are about (newly-released reports? the missives?) and where they should link, in order to make suggestions as to design of the feed.

[jenniferthibault]

The landing page needs a bit more clarity on the feed interaction, and the contact page needs clarity on the "submit an inquiry" functionality , but those are two that I'd prefer to explicitly do a visual design stage with after.

The rest seem ok w/ existing templates, but I'm glad to give things a once-over as they are implemented or if any weird formatting pops up.

[jenniferthibault]

ha, jinx @nickykrause !

[nickykrause]

@noahmanger @emileighoutlaw @onezerojeremy @jenniferthibault

Here is a new file: Press-Office-Revised-090216.pdf

You'll see that I updated the press wires to include (a) the latest updates feed on the press landing page, and (b) more details about the "Submit an Inquiry" form. This PDF contains some notes in pink, where I have included some questions/opportunities for feedback, but I will repeat them here:

the feed This is adapted from a portion of Jeremy’s wires for issue 443. I changed some things...

• First, I moved the date tag to the top because the timing of the update seems like one of its most important attributes (for people seeking the “latest” info).
• Second, I removed the dotted underline from the date tag because, unless I am mistaken, the date is not clickable…? (If it is, what does it do?)
• Third, I moved the “from” line to the top, to appear alongside the date, because it seems there will consistently be real estate for it there, and it reads (to me) almost like a byline. So, when this display wraps on mobile, there is date, then “source,” then headline, then details. I am not sure if this makes sense to everyone the way it makes sense to me.
• I left the tags for “the Record” and “in: compliance,” but I don’t know that they are sufficiently informative (mostly because it is still not even clear to me what they mean, but it might very well make sense to the press users who are more familiar with what the “record” is…so, i’m not sure.) I also don’t know what happens when these links are clicked, so I am wondering, Jeremy, what you originally intended?

submit an inquiry

• First question: Are there existing "submission"-style forms on the beta site? I didn't see any, but I could be wrong. I'd like to stay consistent with existing conventions for form validation and error states, if they exist.
• Attempting to submit the form with insufficient data should produce an error state. I have noted a possible solution, but I don't know much about accessibility and am concerned about being compliant. Thoughts re: accessibility, or otherwise?
• Question: Do we want real-time form validation? (for example, should green check marks appear as the user fills out the form correctly? (similar to the advanced data filter confirmations)
• I am suggesting that successful submission of the form should clear the form fields and replace them with a confirmation message indicating (a) that the submission was successful and (b) what the user can expect next, in terms of a response. There would also be an option to “Submit another inquiry,” which would reset the form to its original state. Thoughts, concerns, questions about this?

I am welcoming all input and am happy to chat synchronously sometime on Tues, if anyone wants/needs to.

[nickykrause]

@noahmanger @emileighoutlaw @onezerojeremy @jenniferthibault

Quick update: I realize we already have our design / front-end meeting today, so perhaps that'd be a good time to connect on this, rather than scheduling something else.

[emileighoutlaw]

I love that idea!

[nickykrause]

cc: @noahmanger @jenniferthibault @onezerojeremy @emileighoutlaw

Discussed these wires during the design sync today: Press-Office-Revised-090216.pdf

Topics & decisions:

Where does the Press page live, in terms of IA/navigation?

• @emileighoutlaw mentioned a Nielsen study which suggested that journalists know to seek out press pages in utility menus and footer navs.
• We considered using footer navigation for the press section and realized that it may be difficult for users to understand that the footer nav is indeed a navigational element, if it only contains one item. We discussed other items that can comfortably live in footer navigation and opted to move contact us, press, and social media elements into the footer. @jenniferthibault will explore this in visual design, with IxD feedback, rather than updating the wires.

Press Feed

• The "feed" on the Press landing page should act as a small "preview" of press-related updates, which will lead the user to the larger "Latest Updates" page.
• The "feed" should contain only press-related items, which include Press Releases and Weekly Digests. So, we need to remove items referencing "The Record."
• The "press releases" items will sometimes have categories associated with them (e.g., in: compliance), but the weekly digests will not.
• The category tags (e.g., in: compliance) will link to a filtered version of the "Latest Updates" page. It will be filtered to show only those items from the compliance category and only those items relevant to the press
• The "Latest Updates" section header could be misleading, because we are linking users to a filtered version of latest updates (for press only), rather than to the complete list. Suggested updating the section to be called "Latest Updates: For Media Professionals," and to change the "all updates" link to a "more updates" button. (With "more" suggesting "more of the same," rather than "all" the things.)

Submit an Inquiry

• Started with open discussion of whether or not the "Contact the Press Office" (containing the submit form) needs to be its own page. @jenniferthibault presented the option of including the Contact and Submit info as individual sections of the Press landing page. Team agreed.
• Continued with open discussion of whether or not the Submit an Inquiry form is necessary, given the following:
  • We are already providing users with both synchronous (phone) and asynchronous (email) communication options.
  • Users have reason to believe that the form submission will go to the same email destinations that are already listed (press@fec.gov, or to specific SMEs such as Judy), so the form creates a layer of obscurity that may be unnecessary
  • The form feedback mechanisms and communication plan need to be clearly understood before we will feel comfortable including the form
  • We can test this page with users to assess whether or not a form is desired

All of the feedback noted above will be incorporated by @jenniferthibault into the visual design solution. We are comfortable moving from UX to visual, so this is passing on to issue #479!

🎉 😃

[noahmanger]

Excellent! Sounds like great stuff. Closing this issue in favor of #479

[jenniferthibault]

New issue bonanza to carry this forward: For the footer nav designs: https://github.com/18F/fec-style/issues/498 For the Resources for Media Professionals page styling: https://github.com/18F/fec-cms/issues/480 and, already mentioned, but for the Press index page styling: https://github.com/18F/fec-cms/issues/479