As a member of the public I would like to be able to clearly recognize the purpose of the Christmas tree section of the e-permits site and the options available to me when I am on the landing page, so that I can start the process to get a Christmas tree permit for my forest.

[ASprinkle]

Possibly include this link to capture an https://www.fs.fed.us/ Interface with public on -Conservation message -What the FS is about message -Kids messaging

Acceptance criteria

• [ ] user can find a forest
• [ ] user can understand what the site is for
• [ ] user can understand what they can do (learn about christmas tree cutting and learn how to buy a permit)

Tasks

• [x] use usability data to inform new design of page (Bryan/Jane)
• [x] determine whether new design affects task flow and update task flow model if needed (Bryan)
• [x] from review, add basic safety information warning (Jane)
• [x] update task flow to reflect current design (Bryan)
• [x] new design (Nate/Bryan)
• [x] implement html/template (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 the updated landing page mockup per our design meeting earlier today. Links to assets, links, and icons will be located below the mockup.

Landing page template references: Top banner - https://nciinc.github.io/fs-fork-uswds-site/page-templates/landing/ 3 columns - Featured projects here https://18f.gsa.gov/

Icons: 537-icons.zip

Link references: Every Kid in a Park - https://everykidinapark.gov/ local forest - https://www.fs.fed.us/ivm/ multi-faceted agency - https://www.fs.fed.us/about-agency

Asset links: FS Badge - Use reference from header or footer Every Kid In Park - https://s3-us-gov-west-1.amazonaws.com/cg-23950e94-a2f0-49a1-940d-c52d308a546e/img/logo.png

[bryanmcfadden]

Please see recommended changes below:

I would recommend removing the "Start here." prefix on the "Choose your forest." It seems repetitive with the button label. (As a user, am I staring here...or starting when I click the button?)

I would also recommend changing the "Explore tree cutting" step 1 title to just "Explore". This could then be prefixed on to the next page H1 title to keep consistency. (forest information page)

Recommend changing the H1/adding H2 on the forest information page to keep consistency with landing pages first step "Explore".

Recommend changing the "Buy permit" button label to keep consistent with the "Buy your permit" second step on landing page.

[ASprinkle]

I think this is a great step in the right direction! Bryan's suggestions are also intriguing. If we are concerned about the consistency in messaging from the landing page to the Forest pages, I wonder if we shouldn't just update the landing page to match better instead of updating all the Forest pages. Although, I do like seeing the word "Explore" in the header on the forest page. under the "explore" image: can we change the description to read, "Whether it's your first time, or a long standing family tradition, learn more about Christmas tree cutting on the national forest you select above." Or just end it at "...learn more about Christmas tree cutting." under the "Buy" picture, can we edit the description to read: "Help us ensure national forest resources into the future by carefully reading and following the rules and guidelines for your Christmas tree permit." under the "Enjoy" picture: "...supplies you need to cut down your Christmas tree." In considering "buy permit" or "buy your permit" a user could buy a permit for someone else -so it might not be "your" permit.

[bryanmcfadden]

@ASprinkle - Reworked with your suggestions.

[MelissaBraxton]

A few recommendations:

• Let's left align the "What's next" text
• Change "What's next" to "What to expect"
• In case folks mistakenly think the headers below the icons are actionable, these should link to an anchor that focuses people on the "Choose your forest" drop down.
• Change "Buy your permit" to "Buy a permit"
• Agree with Amber re: leaving "your" off the buy button.
• Agree with Amber re: not adding "explore" to the Forest specific headings
• I wonder if we can come up with something other than "explore"? Something that conveys learning--like, "Know your stuff" or "Get the know-how"
• Para under "Enjoy your trip" - looks like we still need to add in the word "Christmas".
• To better convey which step of the process people are on, consider adding back in a graphic and blurb for "choose your forest," so that we can visually convey the fact that you are on the first step in a multi-part process by greying out (or otherwise altering the appearance to convey inactive) steps 2 and on. A couple of ways we could go about this:
  • Just add the find your forest graphic/para back in, to the left of "explore" (so we'd have 4 circles, 4 headers, and 4 paras), but then we'd be breaking the law of thirds ( 👎, but not a deal breaker)
  • OR (my preference), we could actually lose the "enjoy your trip" content and just have 3 things: 1. choose your forest, 2. explore (or get the know-how), and 3. buy a permit. One could argue that "Enjoy your trip" is somewhat outside the scope of what the permitting application does. Our platform prepares you to enjoy your trip, but then stops there. (like, people don't come back to the ePermit site to check the weather and get the tools they need...)

[bryanmcfadden]

@ASprinkle @MelissaBraxton @JaneZC - Here is an updated version with some of the changes recommended. I have also reworked the opaque background to match more of the USWDS style. (This allows more of the colorful forest image to show :) )

[MelissaBraxton]

Nice! Let's find a way to visually show that you are on step one "choose your forest" and that "explore" and "buy a permit" are next steps that you can't skip to.

Here's an example (I don't think we need numbers, but I like the way they've "grayed out" steps 2 and 3):

[sadlerw]

[sadlerw]

[ASprinkle]

I am a big fan of the look, feel and function of this landing page. Hard to see on the mock - but assume that if someone clicks on the "choose your forest" circle - that they are prompted to select from the drop down above, correct?

[sadlerw]

We could make any of the images in that section links that refocus the user on the select a forest dropdown -- let's consider that tomorrow @bryanmcfadden @JaneZC @npage123 when we meet

[sadlerw]

[ASprinkle]

The link for EKiP should read "Every Kid in a Park".. not "the" park. thanks :)

[bryanmcfadden]

Updated user task flow (removed multiple entry for selecting a forest by map or drop-down)

user_task_flow.pdf

[MelissaBraxton]

@sadlerw - I'm not sure what kind of feedback is needed here. Maybe we can remove the label?

I think the team was going to do more work based on earlier feedback, and it doesn't look like that's been done based on what I can see in the latest mock and what's on staging.

Specifically, I think Nate is going to work on the look of the icons (better communicating inactive steps), Jane is going to work on the "explore" header. It also looks like the Amber's recommended change re: EKiP has not been implemented.

[sadlerw]

The screenshot above (other than the fix to 'a' from 'the' per Amber) is the final version as far as the group was concerned on Friday. Maybe we should meet Monday to discuss if you were expecting more changes. There were performance issues on circle on friday that prevented deploys to staging. thanks, Will

[sadlerw]

also - we are a multi-faceted agency that protects - that is in a PR but not on staging yet

[MelissaBraxton]

• The headers under the icons should not appear actionable. Remove the link style. We want to dissuade people from thinking that these links actually take them anywhere, but still have the anchor link to the "find a forest" just in case they do.
• Remove the periods at the end o the headers below the icons.
• "Read the details" sounds bit burdensome. Can we change it to something a little more inviting? Maybe "Get the details" ? Curious what @ASprinkle thinks.

[sadlerw]

"Learn about the permit" or "Learn the details" ??

or "Apperceive the Rules and Guidelines" or "Get the 411" :-)

[JaneZC]

@MelissaBraxton @bryanmcfadden @npage123 @ASprinkle

That pesky second header is giving us headaches! :) Here's some options we've discussed/brainstormed:

• Explore tree cutting
• Discover tree cutting
• Read the details
• Learn about tree cutting
• Get more information
• Get the details
• See the details
• Review the rules

A few things: I'd prefer to stick with three words (so there's consistency in phrasing between the three icons on the homepage). I should note that the second icon was designed off the 'tree cutting' notion that was in the original pitch. I also wanted to stay away from 'rules' in the subhead as that felt very unfriendly tone-wise. I've also been focused on being able to cut the three-word header down to one-word (thinking that they maybe useful in future process planning/graphics) ... ie. Choose. Read. Buy. ... makes it easy to understand the process. Choose. Get. Buy ... is a bit more confusing.

@MelissaBraxton I liked the idea behind 'get the know-how' but was worried it sounded too informal compared with the other options on the page.

Not sure if that helps, but throwing it out there. :)

[sadlerw]

[ASprinkle]

This is great - I like "get the details". I also appreciate the text description changes under each icon.

Also, I noticed that if I click on the Choose your forest icon, the selection bar above is highlighted. The hint action is very subtle, as indicated by a fine white dotted line around the selection bar. This action hint may need to be strengthened to bring the users eye to the selection bar easier/faster.

With this information, I think the landing page is at a good point for further usability testing/input.

[sadlerw]

@ASprinkle the dotted lines around the focused element is standard for all uswd sites. The page will scroll as well if that element isn't visible on screen. The keyboard works to open the select too.