Prepare first draft wireframes for homepage

[jenniferthibault]

Some initial thinking on how to approach the first sets of wireframes that came from the research summaries and principle list in #517 .

• Prepare wireframes that give different features different levels of priority—show how this can influence experience
• Prepare a few different components that accomplish these principles in different ways. (options of modules?)
• As part of this, prepare to show what different approaches accomplish overall for atmosphere and communication goals (thinking of the top-of-page components I put together earlier)

This is a rough outline now, but jotting it down anyways. We should make completion criteria as this gets closer and sharper.

[jenniferthibault]

@nickykrause I digitized the exercise results from last week's workshop into a Google Drawing, which seems easier to link and more future-proof than Murally or Sketch.

Check it out, the 2016-10-11_Homepage workshop recap

[nickykrause]

oooooo, thanks @jenniferthibault!

[nickykrause]

Moving the homepage wires discussion to GitHub.

(cc: @noahmanger, @jenniferthibault, @emileighoutlaw)

First, here are the two homepage options that have been revised per the FEC team's feedback: homepage_option1_revised.pdf homepage_option2_revised.pdf

Here are some reactions from @noahmanger, which were originally posted in Slack:

Option 1

• What about grouping the “what can we help you do” tasks into the three main buckets? Or in some way identify the bucket they belong to? I think it helps to keep hammering that conceptual framework
• Thinking through what the substance of each of the “what can we help you do” goals are, can we use that space to also surface direct info? Similar to the way option 2 includes live data viz, I could see that working in some form here. Or pulling in recent AOs or whatnot.

Option 2

• Ideas for home page data viz examples:
  • Total raised and spent in the current cycle
    • Compared to previous cycle?
  • Top presidential candidates raising & spending
• It could be really helpful to show how this component change over time. Example of something in the middle of a presidential cycle / at the end of it / on an off year / beginning of a new cycle
• What about including a search bar in the financial data part so users can dive right in?
• I think we can remove the API part as the user base is so small
• What about switching “Candidate and committee services” with “Campaign finance law”? More people + likely lower info users vs fewer, higher info users for legal stuff
• All the options under “Candidate and committee services” feel a little overwhelming. I’m not sure I have a better solution, but could be a good thing to test / keep on eye on with testing

Both

• What about reducing the latest updates feed to just titles instead of showing the blurb to cut down on space?
• What if the weekly digest for a given week was always pinned to the top of the latest update feed?
• Is there a reason to not put in the items that we know will be in the nav?
• Is the idea for the “Happening soon” sections that the events are automatically pulled in or that they’re in some way “pinned” ? I think it will be helpful to have some kind of manual control, whether opt-in or opt-out

Some next steps for me:

• [ ] Think on Noah's feedback
• [x] Think through wireframe content with @emileighoutlaw in preparation for usability testing the wires this week
• [ ] Design usability test for homepage wires

[emileighoutlaw]

First bit of content notes on Option 2. (More to come soon, I hope). I have lots of thoughts about this, so we should discuss, but for the sake clarity, I'm only pasting in the existing and proposed new.

Existing

Proposed new

Headline

Candidate and committee services

Left module

• Candidates and authorized committees - - - - - - -
• Corporations and labor organizations
• Nonconnected committees
• Political party committees
• I’m not sure

Middle module

Candidates and authorized committees

• Registration and reporting checklist
• How to run an authorized committee
• Contribution limits
• Campaign guide (PDF)

Right module

• Upcoming filing deadlines
• Attend a workshop or conference
• Responding to a Request for Additional Information (RFAI)

[emileighoutlaw]

More for discussion at our meeting today (for wire option 2)

Existing

Proposed new

• Find out who’s funding a specific candidate Look up a candidate
• Learn how individual people are spending their money Look up an individual contributor
• Discover which groups are spending money to oppose a candidate Look up independent expenditures
• Monitor a specific committee’s activity Look up a committee

[emileighoutlaw]

Notes for Option 1

Existing

Proposed new

What can we help you do?

• Explore financial data
• Research the law
• Learn about enforcement programs
• Report a violation
• Understand registration and reporting requirements
• Get guidance for state-level campaigns

(This also solves the POV problem we were talking about yesterday with "our" and "my" following the "help you" question :tada: )

[emileighoutlaw]

Notes for Option 2:

Existing

Proposed new

Campaign finance law

browse all legal resources

Left module

Get answers to legal questions

• Search advisory opinions
• Read specific statutes or regulations
• Research court cases

Right module (three cards)

Learn about enforcement programs	Report a violation	Browse audits of political committees

[nickykrause]

@emileighoutlaw: My only concern about any of the items you've mentioned is that, during the original presentation, the partners mentioned (after you had to drop) that we should remove the information about "filing a complaint," which seems similar to "Report a violation."

I can't remember the exact reasoning, unfortunately.

[nickykrause]

one more thing: They suggested replacing the "File a complaint" content with "Review closed enforcement matters"

[nickykrause]

(cc: @noahmanger, @jenniferthibault, @emileighoutlaw)

here is the latest version of the wires for testing, per my exchanges with Emileigh: homepage_option2_revised_102616.pdf homepage_option1_revised_102616.pdf

And here is what I currently have as questions for the usability testing script. There are sort of a lot of questions, so I might pare it down. But it gives you the basic idea....

---

Intro Script

We are currently in the early stages of redesigning the home page for the FEC website, so we won’t be showing you a real, live webpage today. Instead, we’re going to look at some really basic designs that we call “wireframes.”

The wireframes will be black and white, and they won’t contain a lot of detail. They’re also static: There will be nothing to click on, and nothing will be interactive. It might be helpful to think of the wireframes like blueprints for a house: They are like the “skeleton” of a webpage. Essentially, we’re just starting to sketch out the basics of how the homepage could work and what kinds of information it could contain.

We like to talk with people like you at this stage in our process so that we can identify possible problems early on, before we’ve gone to the trouble of stylizing and developing everything.

Is this all making sense so far?

[wait for user confirmation; clarify things if user asks questions]

Prep Questions

Okay, great. Before we take a look at the wireframes, I’d first like to ask a few things:

• What brought you to the FEC website when you visited last?
  • What is your background?
• When you’re coming to a website like the FEC’s, what do you typically expect from the homepage?

Questions for wireframe 1

Let’s look at the first design.

• Staying scrolled to the top, what is your first impression of the page?
• Does the happening soon section contain the kind of information you would expect to see?
• How would you expect the next section to function — the one labeled “What can we help you do”?
  • Does this section of the page seem useful?
• As you may know, the FEC deals with campaign finance for federal elections, and it does not oversee state-level campaigns. However, people often make the mistake of asking the FEC about state-level issues. If you came to the FEC website with a state-level question, what would be your expectations?
  • Would the information on this page be helpful to you?
• What thoughts do you have about using this page to stay informed about what is going on at the FEC?
  • How do you expect the “latest updates” section to work?
  • What do you think about seeing the blurb beneath the headlines? Is that useful?
• Thinking about the page as a whole, does it seem like there is anything missing?
• Is there anything you would change about it?

Questions for wireframe 2

• Staying scrolled to the top, what is your first impression of the page?
• As you continue scrolling, what thoughts do you have about the financial data section?
  • Is the information here useful?
  • Would you change something about it?
• Scrolling down further, how would you expect the “Who do you need information for” section to function?
  • Does this section of the page seem useful?
• Let’s scroll back to the top. Recalling that the FEC does not deal with state-level campaigns, if you came to the website seeking that information, would the information on this page be helpful to you?
• Thinking about this page as a whole, does it seem like there is anything missing?
• Is there anything you would change about it?

Questions for both designs

• Is there one that you prefer?
  • Does one feel more useful than the other?
• Do these homepage designs help you to understand what you can do on the FEC website?
  • Does one design do this better?

[noahmanger]

That all looks good. I'm trying to think how we can measure how well each version does against the principle of "helping users accomplish their goals", and wondering what you think about also including task / navigation based questions.

Like: where would you go to look up who's funding a campaign? Where would you go to find recent developments in the law? etc. Or maybe even using the tasks they said they were looking to complete as examples.

[nickykrause]

@noahmanger I went back and forth so many times about including a task-based question! The user can't actually "do" much, so I had concerns about frustrating them, but I do think there is value in testing against the principle, as you mentioned. I added this question:

• What do you think you would you do if you worked for a candidate's campaign, and you wanted to know more about how to file your required reports with the FEC?

[nickykrause]

Resurfacing something I said to @emileighoutlaw, because I tagged her in multiple posts about different things, so it may have gotten lost:

@emileighoutlaw: My only concern about any of the items you've mentioned is that, during the original presentation, the partners mentioned (after you had to drop) that we should remove the information about "filing a complaint," which seems similar to "Report a violation."

I can't remember the exact reasoning, unfortunately. They suggested replacing the "File a complaint" content with "Review closed enforcement matters"

We don't need this figured out in time for testing, since it doesn't affect the questions/tasks. I just wanted to make a note of it before we present to the FEC again.

[jenniferthibault]

+1 to Noah. I'd find it helpful if we asked an open-ended "What did you come to the site for, and where would you go first?" at the very beginning, before the specific questions. Could we add that in?

Without inventing a scenario for it, to understand what that user would do based on their own needs.

[jenniferthibault]

and @nickykrause the exact reasoning for removing "Report a violation" & the like is that we don't want to encourage people to make uninformed, possibly phony, antagonistic accusations without fully understanding what they're doing. Similar to the fake committees / candidates people are sending in.

[emileighoutlaw]

Very interesting. I wonder if surfacing something like "Guide for filing complaints" rather than "File a complaint" would help folks learn about this important aspect of the FEC without encouraging phony complaints. i.e., maybe we can solve this concern with words.

We can discuss later!

[nickykrause]

@jenniferthibault I like that idea. The question you suggested would help us to get around one of the issues I was struggling with about including a scenario-based question: If the prosposed scenario is widely different from what the user would normally do, then their response is often not very helpful.

[jenniferthibault]

@nickykrause here are the updated wireframes in an InVision that show:

• November 2016, a current general election, pre-winding down and year-end reporting period
• February 2017 (partial data exists, but enough to guess), a post year-end reporting time, when the FEC has just put out the new Statute (yearly in Jan) and contribution limits (in odd-numbered years)

I've used a transparent pink background to highlight the items that would change based on the cycle, but it's possible they're too pronounced. Let me know if you think so.

Otherwise, I'll save the read-through here, and let's chat tomorrow about the demo at our scheduled time.

[nickykrause]

Quick update: The wireframes were presented to the FEC on Tuesday. We are awaiting feedback from the meeting participants. We expect to receive that feedback by Friday.

[nickykrause]

Link to FEC feedback (the comments within have been pulled from InVision): https://docs.google.com/document/d/1FtMhcxULMUlUkp_JT8yc_cLru6EHoFi1zZnhQk3wBvU/edit#

[nickykrause]

(cc: @jenniferthibault, @emileighoutlaw, @noahmanger)

I updated the wireframe to address these comments:

Many of the suggestions deal with surfacing timely content (happening soon/now, latest updates, twitter). The main comments in this area seem to be:

• We should de-emphasize or completely remove the Twitter feed.
• The Latest updates information could/should be combined in some way with the Happening soon information.
• The FEC needs to be able to surface content that not only comments on what is coming up (future), but also on what has recently happened (past).

---

Here's the updated image:

---

Summary of changes: The wireframes now combine the "happening soon" calendar section (forward-looking information) with the "latest updates" section (backward-looking information). The new section is currently called "What's happening," in order to cover the whole span of time.

The "What's happening" section also includes an example of something that currently does not appear in the "latest updates" feed, nor in the calendar, but which does appear on Twitter: An announcement regarding a draft Advisory Opinion.

• My assumption is that the "approval process" for including such content will not be an issue, because the text of the update itself is virtually the same as what is already being published on Twitter. (The same could be said for everything in this "feed": The content is already being published in the Record, or as Press Releases, or in the Calendar, or on Twitter).

There are now two links associated with this section: Instead of just "Full calendar," there is also a link to "browse all updates."

The "latest updates" and "Twitter" sections of the page have been completely removed.

An extra "Miscellaneous Item" was added, partly to distinguish that section from the blocks about voting/elections, and partly because the loss of the Latest Updates/Twitter real estate may put the FEC in a position to need more spaces for featured content. (Although, I am not so sure about that.)

---

Feedback:

I welcome any general feedback you all have about the changes, but here are some things currently on my mind, in case it's of interest:

• If we keep this section as I have suggested, what should we call it? ( thoughts, @emileighoutlaw ?)
• I have no specific plan for the light-gray boxes that appear next to the items in the feed. I had thought about having icons next to the items, which could perhaps distinguish the different content types from each other (press release, record article, event), and which might save vertical space (i.e., we could remove the labels from above each item). However, I couldn't really think of what those icons would be and whether or not they would communicate clearly enough. For now, I left the boxes in. Happy to hear if you have thoughts...
• There is limited space in this section for the many different types of content that the feed will contain. Here are two thoughts which stem from that fact:
  • First thought: I considered including one slot for each type of thing I could think of: One press release, one weekly digest, one record article, one upcoming event, one deadline, one announcement. On the one hand, it seemed like this approach might help the FEC decide how to populate this area with content. One the other hand, that approach could also be limiting for them, and it may not align with users' needs - e.g., users may be far more interested in viewing more events up-front than in getting a link to the weekly digest. As we said last time we met: Although our research tells us that users want timely content, we don't know what that means exactly. We have more usability testing this week in which we could probe about this, but, even then, the answer will likely be very different for different user groups (journalists, candidates' campaigns, everyday citizens, attorneys, etc.), and many of those groups are too busy this particular week for us to reach out to them.
  • Second thought: In the previous version of this feed, where the contents were pushed from the calendar, it had the potential to auto-update. With this new state, I think it would be difficult for this to happen automatically. The items which appear in this feed will need to be selected, but, because of its simplicity and similarity to existing content, there shouldn't be a need to "write" anything specifically for this area. Instead, it will be a matter of deciding which items to include in this limited space, and it will be important for the FEC to focus as much as possible on how this section can help users best when making those decisions, given this section's high-priority placement at the top of the page.
• I poked around for examples of other sites using a module like this. News sites seem to be a good source for modules that could be described as a "near-top-of-page list of important, timely things:" http://www.usatoday.com/, http://www.nbcnews.com/, http://nymag.com/. NY mag had a sort of interesting control that "tabs" between different types of feeds, and I thought about experimenting with something like that, but I worried about several possible problems: (a) the tabbed control would go unnoticed by users, (b) how would we decide what the different feeds should be and which one was visibly by default, and (c) is all the information in the different feeds interesting and important enough that it is worth adding another clickable "menu" (adding more choices, cognitive effort, possible visual distraction). As you can see, I didn't include it.
• Unrelated note: The other main theme in the feedback we received was about removing the Commissioners section, which I have not done. I don't think I made our thinking about that section clear enough in the original presentation, so I have left it in.

[noahmanger]

This is looking great. I'll respond to your questions:

• Gray boxes: I like the idea of using icons there. I think it could help make sense of that list at a glance.
• Re: what goes in the feed: I agree that I think it would overly restrictive to require a fixed number of certain types of things to always be there, especially when we know that the needs change. And I also agree with your second thought, that we really should give some strong guidance about how to use the space. Maybe this would be a good place to draw in the learnings from the cycle map and at least give suggestions about ways you could prioritize things in different phases?

[nickykrause]

Putting this here so I can reference it in usability testing. homepage_revised_110716.pdf

[nickykrause]

Closing this because we have moved to visual styling in https://github.com/18F/fec-style/issues/554.