As a user, I would like to see a single buy permit button so that I may not be confused about where a permit is purchased.

[bryanmcfadden]

Notes

This comes from usability testing and the possible confusion of where the purchase permit button is located in the content body of the page.

Acceptance criteria

• [x] user can see buy permit button in one place (including mobile layout)

Description

Since there are 2 purchase permit buttons and one is located in the content body at the bottom of the dates and times of the forest and its districts, some users believe they are buying a permit for the last district listed rather than the forest itself.

Tasks

• [x] redesign sidebar and mobile nav to exclude buy button based on usability research (Nate)
• [x] design new floating buy button with explanation at button (Nate)
• [x] remove purchase permit button from content body (will)
• [x] implement new floating buy button for mobile and non-mobile (Cameron/Will)
• [x] add to fs wds (mobile and non-mobile) (will)
• [x] TTS approval
• [x] PO approval

Definition of Done

• [x] Code unit / e2e tested and comply with QWASP
• [x] No new security vulnerabilities
• [x] Internal team code review
• [x] Documentation / readme.md / CircleCI updated
• [x] Docker updated
• [x] Compare finished design with mockup
• [ ] Usability tested

[npage123]

Here's what we're thinking of how the sticky footer could be styled @MelissaBraxton @tram to replace the two existing "Buy Permit" buttons. As it reduces down to a mobile view, just the button would appear knowing the cost text will still be included in the body copy.

[MelissaBraxton]

I think this is a great direction! LGTM!

[ASprinkle]

Agreed!

[MelissaBraxton]

Hey @npage123 (cc @ASprinkle), @bryanmcfadden and @pvd-flexion were talking about this on Friday, and I think we'll need to do a little more work here. This button style is not consistent with our primary button style. Making this button consistent with what's in our style guide will necessitate a change to the background color of the sticky nav.

In thinking about this, I realized that we have been using a green button as our primary CTA, but this is not consistent with the style established on the intake module. (I had flagged this as an inconsistency in our style guide in issue #199, but it's actually the other way around!)

Check out https://nciinc.github.io/fs-fork-uswds-site/components/buttons/

I've created a card to make the primary CTA button style consistent with the FS-USWDS style guide. https://github.com/nciinc/fs-permit-platform/issues/571

[sadlerw]

Melissa - Seth and I went through and analyzed the fs-intake stuff and I think you were right the first time. The style guide needs to change the primary (usa-button) to the green color (as we are using it now.) The secondary style needs to be the brown/black which is currently defined as usa-button. The current secondary (red) needs to just become red buttons. We will add a task to the style guide story to fix it. But, I think that the design here is good as is except it isn't consistent with the intake side. That said, Nate is going to post a sticky footer that is consistent with the existing fs-intake. We will add an example of that in the footer section on the style guide.

[sadlerw]

note removed buy permit buttons on screenshots

[npage123]

I think the sticky footer looks good @sadlerw . One minor change, could you please change just the forest name to the Merriweather Bold font?

[sadlerw]

forest name is now bold

[ASprinkle]

While I understand the "Maximum 5 trees per permit" I believe the language is "...per household" as a restriction for the forests - I can see this causing some questions/confusion by FS admin during review. Can we remove the "maximum" statement? Isn't it included on the Permit Holder information page before they hit next?

[bryanmcfadden]

@ASprinkle - Based on the recent content reviews, I recommend we remove the "Maximum 5 trees per household" text entirely. I would also recommend we hide the forest name and tree cost (show button only) when on mobile to maximize screen real estate for the user.

Also, I would recommend not having the sticky bar display when the permit season has not started. There would be no reason to display the buy button if you can't purchase anything.

[sadlerw]

ok - that all looks like:

1. on mobile

   

2. medium

   

3. full

   

[ASprinkle]

I don't understand the difference between 2 and 3. I think 2 looks great!

[sadlerw]

just a wider screen in 3 than 2

[MelissaBraxton]

Looks good with one minor tweak. Per Nate's comment above--the Forest name still doesn't look like Merriweather in the latest screen shot. Once we fix that, we're good to go!

[sadlerw]

I'm not sure why it would be Merriweather - my understanding was that merriweather is for paragraphs, headings, etc. with dense text whereas sans fonts are used for callouts etc. for readability. @npage123 was there something in the style guide that said to use merriweather here? thanks Will

[npage123]

My thought is that it would be an h4 if possible. A heading for the price callout but not stacked?

[sadlerw]

the closest thing I can find in the us web design system is usa-footer-big-logo-heading I'll use that

[sadlerw]

[MelissaBraxton]

LGTM!