Mock up ideas for a Wagtail page to replace the organizational chart

[dorothyyeager]

What we're after
It's important to have a list of senior officials on the site. Our current organization chart is not convenient to update and is housed on transition at https://transition.fec.gov/about/offices/offices.shtml, but linked off of https://www.fec.gov/about/leadership-and-structure/#agency-structure. We'd like to turn that chart into a Wagtail page that content team could easily update. (Maybe something similar to the contact page). It could also serve as the access point for the office pages we will be bringing over from transition in #2876

Inventory of the pages linked off that chart.

To do

• Mock up ideas for organization structure page
• Meet with a front end developer about mock ups to decide what our capabilities are
• Create implementation issue for new Wagtail template
• Create implementation issue for HTML work

Related tickets: #2876 #2896

Future work for content team:

• High level review of the design
• Create the new page
• Second pair of eyes
• Publish the new page
• Update link on https://www.fec.gov/about/leadership-and-structure/#agency-structure
• Put in a redirect
• Take down old organization chart

[dorothyyeager]

The front-end, content and U/X design teams had a good meeting about the office pages (#2896) and we've realized we need to start with the organization chart as an MVP - turning it into something that can be edited in Wagtail and resemble the rest of the website and be responsive, while retaining the chart's basic organizational layout. The office page work will be saved for later and the design work for the chart will pick up in this ticket.

[JonellaCulmer]

First draft of org chart mock-up. @AmyKort @dorothyyeager @patphongs

[dorothyyeager]

I like it as an MVP. I kind of wavered about the line between OIG and the Commission, but it's dotted and explained in the footnote, so it works for me.

[AmyKort]

This looks pretty much like what we've got now, right? I'm looking for substantive differences and not really seeing any. I think that's a good way to go for the MVP.

[JonellaCulmer]

@AmyKort Exactly right. I thought making any significant changes would result in some conversations we're not prepared to have at this time.

Thanks @AmyKort @dorothyyeager. I'll move forward with next steps for this issue.

[AmyKort]

Thank you @JonellaCulmer !

[rfultz]

Talking w/ @johnnyporkchops @JonellaCulmer on Friday (and with approval from @AmyKort) we're going to move forward with the experiments I've been working on, re-styled. The smaller widths will be a stacked list (single column), though we're still thinking about ways to represent the non-hierarchal relationship between the commissioners and IG (maybe two columns for them?). We'll probably lose the connecting lines for the smaller widths; still need to engineer how they'll work for the larger widths.

We're researching options to efficiently administer the information inside the CMS, keeping in mind the upcoming work for streamlining the admin for tables that are currently html blocks.

[johnnyporkchops]

Wagtail Implementation - It should be fairly straightforward to implement the html that @rfultz has created into editable Wagtail template. Given the fairly predictable structure of the table and the changes editors might make, this is a reasonable candidate for a Wagtail streamfield block. I can work on the Wagtail template.

[JonellaCulmer]

Closing in favor of #3071 and #3072