Browse page template

[duelj]

What is it?

V1 is looking to add its atomic element documentation to the DM for the use of other teams. Because the primary touchpoint with these elements is through the Wagtail CMS we have focused on the components that will be encountered there.

This page will live in the "global elements" section of the updated DM.

Browse page

[nataliafitzgerald]

@ajbush @duelj The design looks good! Just a few copy edits and comments:

• Change "Content Guidelines" to "Content guidelines" (sentence case)
• Suggestion: Change"chunk" to “group” in the first bullet under "Content guidelines"
• Some of the language could still use finessing but I don't think this should hold up this initial release.

[marteki]

Reviewing this for UX in @schaferjh's stead. I'm focusing on usability, minor content tweaks, and ease of explanation.

Suggestions:

• Since this is pretty different in tone/jargon from the other Design Manual pages and probably won't be applicable to folks outside our agency, explicitly state at the top of the page that this page is primarily for an internal CFPB audience. Expectation setting is key for understanding.
• Break up the intro paragraph into two paragraphs, for ease of understanding:

Browse page types provide specific topic or product overviews and information. Often these pages contain medium-length content, access to specific documents or other resources, or descriptions of action steps.

Related browse pages within a specific section can be accessed via the left side sub-navigation so users can easily move around within the topic. Browse pages can have parent-child relationships to other browse pages.

• Change "chunked" to "grouped" in the third bullet point under "When to use". Consider making this bullet point two sentences, instead of one run-on sentence.
• Move list of page components to be included out of the skinny sidebar. It's harder to read than if it was in the main content flow under "When to use".
• Remove bullet points from "Content guidelines" section. These are full paragraphs of text, and should be treated as such. Agree with @nataliafitzgerald's suggestion to change the word "chunk" here.

I really love the way y'all have visualized the major breakpoints, and the listing of the page components that could be included. Awesome work!

[schaferjh]

Since this is pretty different in tone/jargon from the other Design Manual pages and probably won't be applicable to folks outside our agency, explicitly state at the top of the page that this page is primarily for an internal CFPB audience. Expectation setting is key for understanding.

@marteki When I talked about this with @ajbush we were concerned that adding some kind of sentence/label to every single new page seems like overkill/clutter, but thought maybe adding a statement to the main page of the two sections where we're adding pages (Global elements and Page components)?

Perhaps something like:

Page components

Our Page components section includes individual UI elements that can be used to design a webpage. These elements are part of CFPB’s Capital Framework, a set of front-end components built by in-house designers and developers to help us create visually consistent web products as easily as possible.

Group components, items included here which are actually a group of UI elements, reflect modules that we use within our Content Management System. They are documented here primarily for easy reference by our designers and secondarily as inspiration for anyone creating a system of components.

Global elements

Our Global elements section contains structural elements that can be used to create the foundation of a webpage as well as elements that appear on every page. These elements are part of CFPB’s Capital Framework, a set of front-end components built by in-house designers and developers to help us create visually consistent web products as easily as possible.

Page templates reflect common page types that we use within our Content Management System. They are documented here primarily for easy reference by our designers and secondarily as inspiration for anyone creating a system of components.

Thoughts from the writers of those top-level pages? @nataliafitzgerald @kurzn @huetingj @caheberer (sorry if I missed anyone/incorrectly included anyone!!)

[schaferjh]

@ajbush Browse page looks great and is ready to publish.

Would you also update the page component landing page and the global elements landing page with the additional text I wrote in the comment immediately above this one? That change should happen along with adding these pages. Thanks!

[ajbush]

Cool, updates made!

Page components Global elements