search

cfpb / sbl-project

Project management repo for the SBL project
Creative Commons Zero v1.0 Universal
0 stars 1 forks source link

[Epic] Getting started shared landing page (unauthenticated) #7

Open natalia-fitzgerald opened 1 year ago

natalia-fitzgerald commented 1 year ago

Milestone: Authenticate

The shared data filing platform will be used by filers of small business lending (SBL) and mortgage lending (HMDA) data to centrally manage their account (user profile, financial institution details, login through Login,gov, etc.).

Epic: Getting started shared landing (unauthenticated)

The shared data filing platform landing page will be the first place a user lands before they have logged in to use the filing platform. Once the filer is logged in and have successfully completed their user profile they will be directed to the SBL or HMDA filing apps to file their data.

User stories

MVP (Beta release)

Backlog (write user story issues)

Tasks

Technical requirements

Content requirements

User testing

Task ideation

Draft list of items to account for in user testing.

Current designs (MVP)

Updated 12/12/2023

Shared landing page (unauthenticated)
MVP_ Shared platform (unauthenticated)
Privacy Act Notice Paperwork Reduction Act
MVP_ Privacy Act Notice (separate page) MVP_ Paperwork Reduction Act (separate page)
hkeeler commented 1 year ago

Todos:

Edit: I moved these up to the User stories section.

natalia-fitzgerald commented 8 months ago

@dan-padgett I have now updated the mock-ups here: https://github.com/cfpb/sbl-project/issues/7#issue-1829904126 to reflect our MVP discussions.

Items that remain to be defined:

Here are some possible resources/links: @dan-padgett - let's discuss what will make the most sense/be most helpful for this audience: filers of SBL data.

natalia-fitzgerald commented 8 months ago

I updated the MVP mock-ups here to reflect today's conversations. We can move forward with building the page and make adjustments as we nail down the following:

natalia-fitzgerald commented 8 months ago

@hkeeler @billhimmelsbach @dan-padgett I consulted with Ans on D+D about our options related to the megamenu. If we want to use the megamenu it appears that we have 3 options (and one of them is not-advisable).

1) Build the unauthenticated page in Wagtail and connect this page to the Login.gov flow

2) Use the cf.gov megamenu code and bring it in to our React app

3) Duplicate the megamenu and maintain it (not a good idea)

These are some technical details for option 2:

You can also follow what complaint explorer (the actual app does) https://www.consumerfinance.gov/data-research/consumer-complaints/search/ That has a separate react app it loads into a template with the header and footer. But it's not perfect and has some CSS hacks to work

So, there's a separate repo where the app is built: https://github.com/cfpb/ccdb5-ui It gets published to npm https://www.npmjs.com/package/@cfpb/ccdb5-ui

Then in cfgov, the npm package is imported https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/unprocessed/apps/ccdb-search/package.json#L12

That package has a js file, which is the react app. That then gets imported into a template that has a content area for the app and a header and footer. https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/jinja2/ccdb-complaint/ccdb-search.html#L40

This does not use Wagtail, because there's no content to edit, it's just a template that gets served, but it uses the mega menu the rest of the site uses.

So in this react app all the CSS spills into the global scope, so some styles from the app override styles in our global design system styling, so that app requires this file https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/unprocessed/apps/ccdb-search/css/main.less#L4. Note all the !importants are bits of CSS that undo CSS that is spilling globally into the page and overriding things.

If the ccdb approach seems viable, it would be a good idea to chat with Andy about how to do it and point to CCDB as an example. He's talked awhile about "Wagtail embeds" as being a better solution for this. Also the team could explore iframes (like how youtube videos are embedded).

natalia-fitzgerald commented 8 months ago

@dan-padgett @hkeeler Let's write a user story (or stories) from the vantage point of a developer and from an end user related to the megamenu.

Here are some notes I gathered up from our conversations this week:

Dev

@hkeeler flagged technical challenges/maintenance concerns with implementing the megamenu. We would either have to host this one page on cf.gov (possibly using Wagtail) OR we would have to rebuild the megamenu within our repo/app and keep it up-to-date with cf.gov (not ideal).

I did surface a different option here: https://github.com/cfpb/sbl-project/issues/7#issuecomment-1847445137 which is how the Consumer Complaint Database currently handles it.

UX

The general strategy is to give users a clear visual indicator (among other types of indicators) that they have started the tasks associated with filing data. We want that clear indicator because it encourages users to complete those tasks. (Think about e-commerce shopping carts: once you start the checkout process, all of the links back to the main site more or less disappear. That's a deliberate choice to keep you moving towards completing your purchase.)

As it's designed, this page is a launching point for starting filing tasks. But you might have visitors coming here just to read more about the process and then want to go to another area of the site. Hence keeping the megamenu. Additionally, the Login.gov process is a pretty clear signal that a user wants to start tasks related to filing, so having the visual change in menu after that process makes sense for providing users another cue that they're into the platform and able to start tasks related to filing

hkeeler commented 8 months ago

@natalia-fitzgerald, thanks for reaching out to Ans. That's all super useful info. Here are my thoughts on each from a technical perspective:

1) Build the unauthenticated page in Wagtail and connect this page to the Login.gov flow

This seems like the most viable option, and near identical to what we're doing. I don't know what it takes to add a page like this in Wagtail, but I suspect it's fairly straightforward.

We would need to confirm that this would work from a Login.gov / Keycloak perspective; starting from one domain, then getting forwarded to a different domain upon successful authentication. @lchen-2101 and/or @jcadam14, do you know if that would be an issue off the tops of your heads?

If we go this route, we should also have a non-cf.gov means of starting the login process. We shouldn't have to stand up the full cf.gov stack to login locally or in a dev environment. We could discuss if we need to allow users to access that page or hide it in some way for production.

In that same vein, we'll need to add some functionality to cf.gov so that that login button routes to the correct instance (dev/stage/prod/???). This probably isn't a lot of work, but it is work, and we'll have to coordinate with cf.gov devs on how best to do it.

2) Use the cf.gov megamenu code and bring it in to our React app

This adds a lot of complexity. I want to stay as decoupled from cf.gov as possible. This would mean a lot of inter-team coordination, and writing glue code on both the SBL and cf.gov code that doesn't seem very worthwhile.

3) Duplicate the megamenu and maintain it (not a good idea)

I think we can all agree this is a bad idea?

I think all this makes a lot of sense for the production site, but we need to ask ourselves if we need this for MVP? We gain a lot of advantage by remaining autonomous from other teams, sites, and services. We have a lot of work to do and an ever-shrinking about of time to get it done. I suspect most users of the beta site are going to be users we've intentionally pointed there; vendors who already know what they're looking, experienced HMDA filers, etc. I think the you might have visitors coming here just to read more about the process and then want to go to another area of the site. scenario for the initial beta site is pretty slim...but I could be wrong.

@angelcardoz, this should probably all go into the planning of how we want to advertise the existence of the beta site once it's up.

natalia-fitzgerald commented 8 months ago

@hkeeler The other item to nail down is the footer. This page should get the standard CFPB footer, but are there concerns with including this for MVP (beta launch)? If we don't use the CFPB footer what should we use? Are there things that @dan-padgett and I should be aware of as we explore this? I think the footer component is already somewhat built in the React component library but I don't know technically what additional work would be involved in implementing it.

natalia-fitzgerald commented 8 months ago

@billhimmelsbach @meissadia I have updated the mock-ups here to reflect the Figma file: https://github.com/cfpb/sbl-project/issues/7#issue-1829904126

natalia-fitzgerald commented 8 months ago

@dan-padgett @angelcardoz @hkeeler @billhimmelsbach

We discussed the megamenu and footer for this page in today's backlog grooming.

Megamenu

Beta release

For the purpose of the beta release we will not include the CFPB megamenu. We will instead include a limited header that includes the CFPB logo and US.gov banner. The thinking is that the beta release will be somewhat contained and controlled and will not require us to design for the possibilities of the production release.

Production release

For the purpose of the production release we will include the CFPB megamenu (code) - either the Wagtail option or the CCDB approach (or another approach we haven't identified yet). Whatever we do we will want to be consistent between our approach to maintaining the header and the footer.

Footer

Beta release

For the purpose of the beta release we will include the CFPB footer that we have built in the React component library. This is a copy of the CFPB footer so there could be some maintenance involved if the CFPB footer changes over time. But we don't see a high risk for when/if the two "versions" of the menu getting out of sync since the beta system will be somewhat contained and controlled.

Production release

For the purpose of the production release we will include the CFPB footer (code) - either the Wagtail option or the CCDB approach (or another approach we haven't identified yet). Whatever we do we will want to be consistent between our approach to maintaining the header and the footer.

The one thing we might want to consider as we observe users is whether there is any confusion about footer links like "About us" and whether they refer to "About us - the CFPB" or "About us" - some other Us that is more specific to the platform?

+Adding for awareness: @chynnakeys @sthomas93

dan-padgett commented 8 months ago

Reading back through the comments, I think there were two things I was tagged for:

  1. Landing page menu/navigation/header
  2. Resources/links

Sounds like 1 is taken care of, so there's no need to write the additional stories talked about above (at least not for MVP).

For the resources/links, the only thing that might be worth including is something to the Final Rule. But I don't think that's necessary.

lchen-2101 commented 8 months ago

Sorry, a little late to the party, I think we've gone with not having the page in wagtail for MVP at this point, correct? To still answer the question about login.gov / keycloak; as long as wagtail is able to interact with our keycloak similarly to how our react app uses the react-oidc library to trigger the keycloak flow, then the login.gov front should be fine. Passing that token from wagtail to our authed shared landing page, I would imagine is similar to passing it from the authed shared landing page to the SBL filing platform.

natalia-fitzgerald commented 8 months ago

Next steps

angelcardoz commented 6 months ago

@dan-padgett, can we check off "User testing conducted" under tasks?

dan-padgett commented 5 months ago

@angelcardoz Yes, the only thing we haven't tested is the first question: "Is this page easy to find on the cfpb public-facing website?" But since we're providing a direct link for MVP, that's something we can test a little later on.