Design orientation experience for new home page

[noahmanger]

So that visitors to fec.gov after the site flip can find their bearings, design an orientation / on-boarding experience that explains the change and introduces them to the new site.

---

This is a pretty open-ended story to figure out what all we want to do on this front. It will be done when we have an approach and designs ready for implementation.

[jenniferthibault]

As framed above, this is a pretty open ended area to start, and it's unique in that it overlaps almost everyone's priorities and skill sets.

From @noahmanger , strategy, positioning, and product lifespan guidance
From @nickykrause (and @onezerojeremy if you're still on the project this much?) , UX and interface design guidance + deepest knowledge of two-site strategy
From @emileighoutlaw , product positioning, comms & outreach guidance, and instructional content writing
From @xtine , product flow guidance, feasibility
From me, visual styling guidance

So I go in knowing, prepared for, and welcoming all of your feedback and input to this "visioning" phase, but will likely ask that some decisions be taken back out to smaller specific issues.

---

Let's talk about WHEN

I've broken our timeline into five phases (or time zones):

• Far before transition (T minus ASAP-11 days)
• Near before transition (T minus 10-1 days)
• Flip (T=0)
• Near after flip (T plus 1-90 days)
• Far after transition (T plus 90-?? days)

Let's talk about WHERE

• New site communications (betaFEC > FEC.gov)
• Old site communications (FEC.gov > transition.fec.gov, archive.fec.gov)
• Non-site communications (this is broadly other types of communication touchpoints than the website, like blogs, newsletters, tweets, what have you)
  • This is the least fleshed out, but I see it coming together by deciding on items we intend to execute from Noah's preliminary brainstorm document and bringing them into the Mural

Let's talk about the WHAT

• Legal tools are cross-linked (Issue #840)
• Candidate and committee page "Content in progress" disclaimers are present (Issue #836)
• The newest idea I'm proposing for the overall "new site" transition and orientation is the Walkthrough using tooltips that begins Near Before and continues into Near After. This feels like a promising approach because we can meet several of our [communication goals](users’ tasks is important):
  • Explain the benefit
  • Ease the shock
  • Set expectations

It also gives the user a lot of control of the experience, and most of all, allows them to go at their own pace. I haven't fleshed out many of the specifics yet (in favor of pausing to check in) but you can zoom in on the Mural to see the rough components and direction.

The Mural Workspace

Mural, you say? This FEC website transition & user onboarding Mural that I purposefully put at the bottom in hopes that you would read all that intro 😬

Next steps

This is a lot! I'm not quite sure which piece goes next but I know that I need your feedback and review. Let's start by targeting in on the periods between now and the Flip:

• Do you feel that the pieces and activities are falling roughly in the right timezone?
• Have I missed any activities or components?

Please add things to the Mural directly, but try to keep chatter/discussion here or synchronous?

[nickykrause]

@jenniferthibault I love this Mural. Thank you for organizing this all so well!

UX-wise, the interactions you have indicated for the walkthrough are making sense to me, assuming that I'm reading them right. It looks like the walkthrough is divided into main sections of the site, and I think that the user can jump between them, if desired. (I'm assuming this because of your point that this "gives the user a lot of control," which I support, as a principle.) I also appreciate the small dots on the individual walkthrough notifications (for specific features/buttons), which I assume indicate how many of these alerts the user can expect for this portion of the walkthrough.

One thing that came to my attention over the course of the day yesterday when talking to Pat is that the FEC is interested in keeping the legacy data portal available for some time after the flip. The rationale for this is that there is some concern that in-house users (and perhaps the concern extends to outside users as well) have not had sufficient exposure to the portal, and that there may be some QA that needs to happen.

Pat and I discussed how this would work, given our plan to have the legacy site exist only in an "archive" form (i.e., it is not being updated). The problem, basically, was this: If we continue to offer the data portal, which presumably needs to be updated in order to be useful, then how could we choose not to update the other parts of the site? Wouldn't that be confusing for users?

For a tentative solution to this, we looked to some of the other legacy-site "applications" that will still need to be offered and maintained, such as EQS for enforcement matters searches. The difference with EQS, however, is that EQS already lives on a subdomain, which makes the situation slightly different from the data portal.

Consequently, Pat and I explored the possibility of having the data portal exist as a subdomain as well, stripping all the other legacy-site navigational elements away (as with eqs.fec.gov, which has no nav.) Pat is thinking that these subdomains could live on the new fec.gov (so, "beta"), and that they could even be "ligered" (i.e., they would be "framed" by the new nav).

---

I know this is hard to follow in writing, and we can certainly chat synchronously with Pat, but my main points are:

• We probably need to get on the same page with the FEC about offering the old data portal
• If we do continue to offer it (probably on a subdomain, per Pat), then we will need some way for users to get to it (e.g., a "browse this data in its old form" link somewhere)
• We could consider accounting more explicitly in the Mural for stuff that's going to be on subdomains, like EQS and the data portal (if that would help this to be clearer)

[jenniferthibault]

Yes to all the things you are reading from the walkthrough!

• users could choose which section they tour from the ones we make available
• the dots in the tooltip indicate how many tour points there are in that screen/section

We definitely need to get on the same page with the FEC about continuing to offer a maintained data portal. Given the amount of warning users (especially internal users) will have about the impending change, and availability of the archive, it feels less like a data availability concern and more of a "new way to do things" concern? I'm wondering if this can be overcome with the walkthrough of a data page and filters to learn those new interactions. How should we set up that conversation? @noahmanger

[nickykrause]

@jenniferthibault - I agree; there are definitely some things to talk through.

I also checked in with Pat a few minutes ago, and she explained that Jeff and Paul are thinking of not offering an archive, but rather an up-to-date transition site that will disappear after x number of days (which is more like the "mirror" approach).

So, it sounds like expectations are diverging from what we talked about in our last group meeting (where we agreed to prototype the Liger + Archive plan and then assess, after testing, whether or not to move forward with it).

It seems we're not all on the same page anymore, so we should meet! Proceeding with the prototype / testing scripts / onboarding designs is certainly a challenge (and not very useful) if the plans continue to change.

[patphongs]

@jenniferthibault @nickykrause Yes I think a sync up is in order. The liger pages are still on the table but that would mean having duplicate pages. But only for some of the static content, because the redirect list we have, especially for the latest updates feed, will help to ease the maintenance, as those items would just be updated in wagtail.

[xtine]

My thoughts just on the walkthrough part:

• Is the walkthrough opt-in only? I notice "start the tour" button that I assume activates the tooltips. This I like, because in my own experience I don't like sites that automatically force a tour, it's like the annoying "clippy" interaction.
• Along with the "start the tour" tooltip walkthrough guidance, are there any more areas we could add in "do you need more help?" to help guide the user? Are hover tooltips the best experience for everyone on site re-design/transitions? I ask this in the mindset of asking if there is anything we can do in addition to tooltips, maybe an extra page outlining what's different and maybe a FAQ or common links that users want to access.

[noahmanger]

Finally got to spend time with this. All in all, everything sounds good to me. The one addition I had was exactly what Christine raised, which was about any additional tutorial-type content we'd want to do. I don't know what the right format for this is, but I think worth considering in addition to the walkthrough.

Also, I think the phases you outlined are right, but I'd just say that for the walkthrough at least, I don't think there's a reason to necessarily wait if it's done earlier. (But it should definitely be live at least 10 (or maybe 14) days before the flip).

Sounds like we're all on the same page with the value of a guided walkthrough so maybe the next step is to start planning that out in detail?

[jenniferthibault]

Yep—good clarification point @xtine , the walkthrough would be opt-in only. I've been working on fleshing out the walkthrough in a prototype and hope to have that ready for review today.

The walkthrough definitely relies on there being other strategies for outreach and education, but I have not begun thinking through what those might be. If that's going to be part of this story, I'll definitely need back up, I don't think I could do both in time for the end of the sprint. @noahmanger what's the best way to break that out or find cavalry?

[noahmanger]

Good point. Don't worry about that piece for now with this story, but maybe be aware that there might pop up further opportunities for connecting users with help.

[jenniferthibault]

New draft alert! 👩‍🎨 🚧 👷‍♀️

What it shows

I've chosen the following sections as a first draft of tour points:

Introduction

This is a catch-all for the standalone apps (calendar, glossary) and overall structure

• Calendar
• Glossary ( ❓ can we open the glossary to while we demo this tooltip? )
• New site structure (three categories)
• What's happening (which is a lead-in to the latest updates and calendar again)
• Profile search

Data

• Profile search
• Advanced data
• Elections by location
• Raising/spending overview visualizations

Candidate and committee services

• New structure by entity
• Re-organized content by campaign activity

Legal resources

• Integrated search
• AOs
• Enforcement

I'm especially not tied to what any of these SAY, I just gave it a first stab.

How it works

Desktop

🖌 I made an InVision prototype showing how the walkthrough could work on desktop. There are a few InVision limitations that impact the interaction that I'd like to point out:

• When you click "Start a tour" to launch the walkthrough, or switch into a new section through the top tour nav or the Next section > button, the first tooltip in that section would be open when you land on that page.
• The Next > buttons in the tooltip would take you to the next tip
• Hitting Exit tour from the top tour nav would end the tour and remove the tip overlays from all points of the screen. I'm imagining a slide up motion for the tour nav to be removed.
  • ❓ Question Should we give people a way to restart the tour without resetting their cookies? If so, how would we do that?
• It would be nice if the tour points could be animated so that they could look like they're radiating/pulsing a bit. This will draw a little bit more attention to them
• You could choose to go back to the previous tip through clicking the sequence dots in the tooltip
• It would be really nice if we could line up the tooltip point with the tour dot!
• There would definitely be a hover state for the top tour nav buttons (but this would have taken a lot of extra time and screens to do in InViz, so I omitted)

Mobile

On mobile, I tried adjusting the tooltip so that it would register right below the tour point, and could be a full-width element to keep the layout more clear. I'm not sure how to handle the tour nav here, and would love thoughts 💭 from other folks. Otherwise, we could try removing that element on mobile, and having the tour be guided by the "Next" button, but the user would lose sight of where they are in the tour and how much they have left.

Additional open questions

• Did I call out the right elements for tour points from each section? What would you add/remove/replace? (Let's aim for 5 tour points MAX each section, fewer if possible)
• How might we show the tour phase on mobile? (need interaction or front end advice)
• When someone finishes the tour through the tooltips, where should they be taken? If this is the last tooltip, what happens when you click "Finish tour 🏆 " ?
  

My 👂 s 👀 s 🧠s and ❤️ open to all thoughts and feedback. ❣️

[jenniferthibault]

Had a really helpful review with @onezerojeremy — while I update the mockups, here's a summary of the changes I'm working on that answer a lot of questions above:

❓ Should we give people a way to restart the tour without resetting their cookies? If so, how would we do that?

• Yes. To resolve this, the "start tour" banner should be positioned above the nav, and should be minimizable but not closable, at least for a certain amount of time after the flip. This would re-surface after you exit a tour so that it's possible to restart from any screen

❓ What happens when you click on a link that's not part of the tour?

• The user will stay in the tour until they explicitly choose to exit using the button in the nav. The tour points would still be visible, but you can still use all parts of the site's navigation (this is going to be hard to show with InVision, so is important to understand here)

❓ When someone finishes the tour through the tooltips, where should they be taken? What happens when you click "Finish tour 🏆 " ?

• Create the "finish tour" screen as the last tour point in that section. In the tooltip, congratulate the person for finishing the tour, and give them the option to return home or to close the tour and stay in legal. This lets users know what to expect next and gives them control of where they go from there.
• In the tour nav, make the Exit tour button as prominent as the section buttons

On mobile

• Integrate a more minimal section nav (possible with the links shortened tp "1 of 4" instead of their full text titles.

[jenniferthibault]

🖌 InVision has been updated to show the items above

📱 Updated mobile:

Open questions

• Are calling attention to the right elements in each section? I know there's thoughts coming from @noahmanger on that!

[noahmanger]

I just dropped several notes into the InVision. A few other thoughts that didn't fit neatly there:

There's definitely going to be a lot of features that we can't include here, so it's important that we find other ways to tout them. I'm thinking, for instance, about things like the fact that raw efiling data is available in real time; the way you can subscribe to calendars; enhancements to candidate and committee pages, and more.

Also, in addition to direction attention to ways to give feedback, the final step might also be a good place to remind folks that sunset.fec.gov will continue to be around.

[jenniferthibault]

@emileighoutlaw here's a 🔏 Google doc of the tour features and their content elements. If we're possibly handing this to another content person, I think one specific task beforehand for you is to:

• Check the tour points on the Help for Candidate and Committees section: have we called out the right things? What's bringing the most new value to users in this section?

[noahmanger]

New issues for completing the content ( #929 ) and implementing, so closing.