Redesign: Updates section fac.gov

[James-Paul-Mason]

As user of fac.gov, I want a more useful Updates page so that I can stay current on the topics that matter to me and my work.

Links

• PR: Updates Page Redesign FAC-transition-site#164
• FAC Design Review QA

Design

Tasks

Beta Give feedback

1. During next Design sync, discuss new design for our Updates section--roughly based on modular design of USAGov Blog
2. Mockup in Figma
3. Review mockups together
4. Sync with @jperson1 to get feedback on page and start talking about how we want to do dev handoff
5. Update listing page based on design and dev feedback
6. Create mockup for detail page
7. Create ticket for dev and hand off

Development

Tasks

Beta Give feedback

1. Migrate updates to their own files - no visible changes
2. Build barebones update pages
3. Breadcrumbs - ideally a site-wide solution
4. Side bars - notifications, subscribe, etc.
5. "Recent updates" component at the bottom of the individual pages
6. Final design checks - include images, color/font/spacing changes
7. Searchable updates in the main page
8. !?!? Streamline adding new updates

QA - Things to Check Over

Tasks

Beta Give feedback

1. New "Updates from the FAC" page (/updates/)
2. New individual update pages (/updates/file-name/)
3. Card components (on the sides of both pages), with email links
4. Pagination component for accessing older updates
5. Breadcrumbs for the updates pages, navigating to "Home" works

[analynd]

Thanks for adding me to this ticket @James-Paul-Mason! I'd love it if you could link me any of the content strategy work you've been reviewing with Dan.

Also, do you think we would be sharing these updates on social media? I'm sure the reason why USA.gov blog has photos for each article is to optimize for social sharing. I'm wondering if we'd need to have photos for the FAC, and if so we'd probably need some type of style guide to maintain consistency 👀 (and make sure it doesn't become a burden for us to pull photos/graphics). Thank youu!

[James-Paul-Mason]

Hi @analynd! Excellent questions. In terms of the content strategy work around updates, the main work that has been done is a proposal for what we want to share in the Updates section. There are no specific tickets related to this work, but I will send you the proposal in terms of where we want to take the content of these updates.

I don't think we would be sharing on the socials--that's a great question though. @Leighdiddy any thoughts on Analyn's question about social media as well as photo/graphic use?

[analynd]

Updating ticket with link to draft of mockup: https://www.figma.com/design/GE9iGBal6TGUzObB1tme8o/%234204-Updates-Page-Redesign?node-id=3694-3759&t=IIg4z51dV2lviBUg-1
cc: @Leighdiddy @James-Paul-Mason

I added comments in the figma file. Please lmk of any feedback, thanks!

[analynd]

Synced with Leigh, James M, and Cordelia on 9/9/24 to get feedback on design and content

• Specific edits to incorporate into next draft are documented as comments in Figma

Next Steps

• Sync with @jperson1 to get feedback on page and start talking about how we want to do dev handoff (note: can potentially use this as an opportunity to improve/standardize design-dev handoff process for team)
• Update listing page based on design and dev feedback
• Create mockup for detail page

[analynd]

@jperson1 Desktop and mobile designs are ready for dev tickets! Here are some links:

• Figma designs and annotations
• Prototypes
  • Both the desktop and mobile prototypes can be accessed via that link

Btw, do yall have access to Figma Dev Mode / can yall see details like spacing, font sizes, colors, etc? Hoping yes so that'll save us a bunch of time on annotations! But lmk if not.

Lmk if you have any questions or issues, thanks!
Analyn

[jperson1]

Btw, do yall have access to Figma Dev Mode / can yall see details like spacing, font sizes, colors, etc? Hoping yes so that'll save us a bunch of time on annotations! But lmk if not.

Yes, we do! All good on that front. Thanks!

[Leighdiddy]

@jperson1 Can you please confirm here once this work has been pushed? We'll close the ticket once it's live :)

[jperson1]

@Leighdiddy Can do! I have a list of tasks to break the implementation into pieces. Would it make more sense to add them on here, or to create a follow-up ticket?

EDIT: I tacked another tasklist onto this issue, and can break it out easily. Each item will likely get its own ticket for further description? Maybe two to one.

For posterity, the list as of right now:

1. Migrate updates to their own files - no visible changes
    a. Pull their content into the existing pages
    b. Add some kind of description to the content
    c. Add a distinct date stamp for future sorting
2. Build barebones update pages
    a. Break update files from above into their own pages
    b. Link to them from the current updates/archives page
    c. Include the description from (1) below the links
3. BREADCRUMBS - Ideally a site-wide solution
    a. It doesn't _have_ to be dynamic, but it would be nice.
4. Side bars
    a. Notifications, subscribe, "how we work"
    b. Give each their own component for repeating between pages
5. "Recent updates" component at the bottom of the individual pages
    a. Sort by the timestamps from #1
6. Final vibe check on the page
    a. Image inclusion
    b. Color and font checking
    c. Make sure links (like emails) and buttons (like navigation) are appropriate
7. Searchable updates in the main page
8. !?!? Streamline adding new updates
    a. We want an admin to be able to draft and push an update without ~~interacting with the repository~~ too much trouble
    b. Will maybe require an ADR or two depending on how we implement this

[analynd]

Analyn is QA'ing (refer to "Things to Check Over" list)

[analynd]

@jperson1 Amazing job!!! 🙌 I reviewed your list of things to check and found just a few items that I documented in this spreadsheet tracker here: https://docs.google.com/spreadsheets/d/1FAbgvIyTE9AXYIVFfAT5jk4FABaCBlgKs1FGfHMm1vI/edit?usp=sharing

Assigning this back to you to implement edits. Lmk if you have any questions!

---

Also, anyone on this ticket please feel free to lmk if yall prefer to track this type of feedback some other way. I was thinking it could be a part of this overall design-dev process here: