search

fecgov / fec-cms

The content management system (CMS) for the new Federal Election Commission website.
https://www.fec.gov
Other
98 stars 40 forks source link

Design orientation experience for new home page #877

Closed noahmanger closed 7 years ago

noahmanger commented 7 years ago

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 commented 7 years ago

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):

Let's talk about WHERE

Let's talk about the WHAT

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:

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

nickykrause commented 7 years ago

@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:

jenniferthibault commented 7 years ago

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

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

My thoughts just on the walkthrough part:

noahmanger commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

New draft alert! :woman_artist: 🚧 :construction_worker_woman:

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

Data

Candidate and committee services

Legal resources

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:

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.

screen shot 2017-03-21 at 7 29 47 pm

Additional open questions

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

jenniferthibault commented 7 years ago

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

jenniferthibault commented 7 years ago

🖌 InVision has been updated to show the items above

📱 Updated mobile:

screen shot 2017-03-22 at 9 29 47 pm

Open questions

noahmanger commented 7 years ago

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 commented 7 years ago

@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:

noahmanger commented 7 years ago

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