Design Manual Content Strategy

[kurzn]

I'm excited to chat more next week. Thought I'd start an issue to track our progress and discussions.

Doc with feedback:
https://docs.google.com/a/collab.cfpb.gov/document/d/1ddjsehWFoWue4vpZ-3Ms0VTSCaINjEfyZvKCg3194Q4/edit?usp=drive_web

Some things we should discuss at our meeting on 10/20:

• Process and timing for creating content standards and implementation
• What is "in" or "out" of scope of our effort (ie, nav labels, guides, etc.)
• Review document of existing frustrations
• Tasks to move forward

Did I miss anything you want to discuss?

@benguhin @schaferjh @marteki @keelerr @sonnakim @nataliafitzgerald

[schaferjh]

Initial meeting we decided on the following four tasks-

• IA of design manual: the buckets and what goes into them. For this task, we will want to reference the work done by @benguhin in structure and IA for manual #283 as well as feedback in the google document linked above. @kurzn will be setting up a card sort activity and follow up for next week.

Once this is complete, two work streams start up:

• For pages within each bucket, work out page first the page hierarchy/organization and then the visual layout
• Editorial guidelines for language of these pages

We want to keep in mind that our audiences for the Design Manual are:

1. Us/people working at CFPB
2. External vendors with whom we work
3. The public!

[kurzn]

Here is the padlet space where we can do our card sorting. Here's my proposal for how this could work:

1. Add as many "cards" as you can think of. I'm thinking of each card as a potential "heading" or "section" that might be included on the design manual. Please complete this by EOD Friday this week. Shouldn't take too long.
2. Early next week we will use the same Padlet to start brainstorming "labels" for our buckets.
3. Late next week (in a meeting I schedule) we can collaboratively start moving cards into buckets (not a traditional individual card sort process, but it is what the tool allows).

Anyone think this proposed process is way off base?

http://padlet.com/wall/qw6gbo3xfi1b

[marteki]

Ah, so each card on the padlet is a section of a page, instead of representing a single Design Manual component? I thought that the sections of the page would be determined later in the first of the two work streams that Jessica detailed upthread at #370 (comment).

I'm going to do ahead and detail both the components that we might need to determine the IA of the Design Manual as a whole, and also anything I see missing from the individual page sections that are already in the padlet space. The Design Manual components will have priority for me, though.

[sonnakim]

@marteki That was my understanding as well, that we'd look at the components more closely to figure out what buckets would work to fit them. Form fields breaks out into several different components which I will definitely add.

Question, do we list all the links to all the latest forks for each of the DM components in one handy place? I know we had the timeline/tracker but that links to individual github issues. Wondering if the spreadsheet Ben showed in the last design manual review has them? If not, I can put a list together.

[marteki]

@sonnakim The spreadsheet that Ben showed does have them. It's the Design Manual tab in the Design Ops project list.

[sonnakim]

@marteki Thanks!

[kurzn]

My misunderstanding of what "components" meant in the context we talked about. Looks like the approach we are taking is "topics" that could be addressed within the design manual, which makes sense. Feel free to add more things that aren't yet part of the DM but that may be topics we add to it in the future.

[keelerr]

Here's what I shared:

[schaferjh]

That's an interesting comparison @keelerr -- is this something you put together or someone else at CFPB put together or?

[kurzn]

Great meeting yesterday, team!

I've taken our padlet notes and converted it to a Google doc for easier collaboration.

https://docs.google.com/a/cfpb.gov/document/d/10PALUF4_JZM_nW1o2i-UxsgRG6KCBcCA_loYSZa2kvg/edit?usp=sharing

We seemed to settle on the following "buckets" -

• Components
• Style
• Layout
• Guides

@schaferjh I'd love to debrief with you to see how these map to V1 atoms, molecules, etc.

The next tasks at hand:

• For pages within each bucket, work out page first the page hierarchy/organization and then the visual layout
• Editorial guidelines for language of these pages

The Google doc has a section of ideas for section on a page. Some questions specific to this:

• Do all items within a bucket will have the same/similar sections, or will it depend on the item?
• Are there any required sections for every page (ie state)?

I'll set up two meetings to start working through these tasks. Feel free to attend one or both!

[cfarm]

@benguhin hoping to chat about Capital Framework changes and their impact on the Design Manual at today's meeting - let me know if there is room on the agenda. I can make it short. Here are my notes.

• We've made some proof of concept updates to Capital Framework to move all the components into one Github repository, codenamed "Voltrazord," which you can see here: https://github.com/contolini/capital-framework/blob/voltrazord/README.md
• Based off of that work, we've also made some efforts to improve the documentation of components by removing the Topdocs (output of which you see in current CF docs like here). We want to keep our documentation in HTML and Markdown format to make it more portable and easier to maintain for FEWDs. The Topdocs are written as CSS comments which are difficult to maintain.
• Additionally, we've explored importing these HTML/Markdown docs into the Design Manual in an automated fashion, so that elements in the Design Manual are consistent with the markup + documentation from Capital Framework. See some screenshots + notes here: Importing component docs into the Design Manual proof-of-concept capital-framework#243

We're at the point where before moving forward, we want input from designers on the best way to integrate docs from Capital Framework into the Design Manual. Our goal is to have a better front end for designers and FEWDs (and anyone else who follows our design standards) to consume the code patterns and design best practices from one set of excellent and consistently-maintained documentation. To my mind, this means we keep our docs in the Design Manual - akin to the way code + design patterns are presented in the US Web Design Standards.

[kurzn]

Here's the link to the working modals content
https://docs.google.com/document/d/1wXiWL-dHH_a_7a4dSs2mskpibRdpV-iZ4mdWtcwBaqw/edit#heading=h.vypq7k889jt5

[sonnakim]

I'll take a stab at tables:
http://niqjohnson.github.io/design-manual/ui-toolkit/tables.html

[kurzn]

Update and plan of action:

• Work with designer to create new images to accompany modal page (Natalie)
• Work with someone to get new modal content and images onto modal GH page (Natalie)
• Work with Cat to document how code snippets will be integrated into GH pages (Marteki)
• Write guidelines for DM content based on what we've learned/decided thus far (Natalie)
• Create list of future topics to add to DM based on conversations (Natalie)

We will present all this work during regroup at a meeting yet to be scheduled. That meeting will also incorporate the conversation of how DM work will be done in the future, per @caheberer and #383.

The work we've been doing will then (likely) be handed over to an assigned project team to continue.

Questions? Comments? Please add! :)

[marteki]

@cfarm has a proof-of-concept for a single file that could be included in a Design Manual page, that shows the live elements as well as code snippets: cfpb/capital-framework#243

So, maybe we'd need another section, called something like 'Implementation'?

[kurzn]

Team, here's where I ended up with the TOC for the design manual, including the possible future topics.

Feel free to post comments.
https://docs.google.com/a/cfpb.gov/document/d/15Me36x_6AQda6lOFRC7JaIG8zEXsvnxUz9njwBvOTW8/edit?usp=sharing

[stephanieosan]

Design Manual Sprint Jan–April 2016 UPDATED

Content strategy sprint goals

1. Content guidelines for style, global, and components page types
2. Bake in the new code area and capital framework integration into the new templates Plan for how code snippets / capital framework integration will work with the new content templates #391 (HOLD)
3. Rewrite, code and push live two pages (as test cases for the new guidelines + templates) for each of the three page types–style Rewrite, code and push live two pages for the style page type #392 global Rewrite, code and push live two pages for layout page type #393 components Rewrite, code and push live two pages for the components page type #394 (HOLD ON STYLE AND GLOBAL)
4. Finalize and release the new Information Architecture Finalize and release the new Information Architecture for the design manual #395
   • Align homepage content with new IA (since the words we use will be changing)
5. Develop a list of future design manual topics and how they fit into the IA Develop a list of future design manual topics and how they fit into the IA #396
6. Figure out where the content guidelines documents live and stand them up there Figure out where the content guidelines documents live and stand them up there #397

Folks working on this: @kurzn @huetingj @sonnakim @kellylo @stephanieosan

Stuff we won't do this sprint (and should be picked up next sprint)

1. Content guidelines for the Guides page type
2. Rewrite, code, and release every page of the design manual to adhere to the new guidelines and standards.

[marteki]

Closing, and tracking through #446