[Wagtail Templates] Flow chart of different templates

[taisdesouzalessa]

Issue

In meeting between Gavin, Kristina and Taís, we decided to do a flow chart (based on Gavin's suggestion) to have a visual representation of when a staff member can add their content and use an existing template (with little or zero support from prod team) and when design and engineers are needed (more complex pages).

To do:

• Taís will take a look at existing opportunity pages and see which ones are very similar (so we can consider them a template) and which ones require design/engineer involvement.
• Based on that study, Taís will do a draft flow chart and invite Gavin and Kristina to collaborate.
• Once we are satisfied with the direction, we may present that to the prod team for feedback.

@gvn @kristinashu please let me know if those steps make sense and feel free to edit/add things.

[kristinashu]

Excellent! @sabrinang might be interested in this as well since she might be working on some onboarding, documentation, CMS ux stuff!

[taisdesouzalessa]

@sabrinang let's connect and collaborate!

[gvn]

Sounds great!

[taisdesouzalessa]

@sabrinang @kristinashu and I analyzed the pages and came up with 4 basic templates staff constantly use. Here are the diagrams:

Campaign Page (2 templates)
Opportunity Page (2 templates)

@gvn are we missing anything there? Please let us know - you can comment on InVision as well.

As you can see from there, the templates we already have can be used by staff with minimal production team support - designers are needed for images and icons, but that's all.

However, if staff needs another type of page that doens't fit into the templates categories above, then production team (designer + engineer) + a staff member should work together to find the best solution.

Next (suggested) steps:

1. Connect with Sabrina to map what are other common components used by staff inside those templates.
2. Refine the templates (the spacing issue we are working on will help with that, plus we can do tweaks on them to make sure they are solid)
3. Share the diagram with the team and Sabrina's idea on make boilerplates of templates inside wagtail to help staff to build them easily.

!!!!!!Feel free to add/edit the next steps above.!!!!!

[kristinashu]

Thank you @taisdesouzalessa! This is so helpful to see. Being about to show these explicit rules helps us move away from giving so many options to the admin user and moves us towards baking the options into the template (i.e. campaign pages always have x number of columns).

[kristinashu]

I've received feedback that some multi-page campaigns might not have a petition form. This means some campaign pages will look like the Opportunity pages. Because of this, I think the sub nav on Campaign pages should match the sub nav on Opportunity pages.

I've mocked up the four possible templates for Opportunity and Campaign pages https://redpen.io/p/zm3711d264ee11ad4f but I'm struggling to find a consistent grid. @taisdesouzalessa @sabrinang do you have any feedback? It's confusing so let me know if you have any questions.

[taisdesouzalessa]

@kristinashu I find the 4th option multipage with petition a bit overwhelming.

For what I've seen in other petition page examples, usually the copy is very focused (not super long) because the goal is to make people sign the petition and I feel if we give them too much to read they may give up. I really think the option we had before (with horizontal menu below image) is a good option for campaigns because it forces us to be focused on a few items. Plus it has space for localization (see 1 in the image on RedPen)

Here is my suggestion (mixing what you proposed with the horizontal menu from Rebecca):
https://redpen.io/xw70956106aa9adedc

Opportunities pages, in my mind, should allow for more content (it is almost a mini site inside our site) so I think it makes sense for opportunity pages to be different from campaigns page.

[kristinashu]

Ok thanks Tais! What you mocked up is what I had originally but feedback from stakeholders was that the sub nav on campaign pages with a form should look similar to sub nav on campaign pages without a form. But you think it's ok for them to be different? I'm happy to push for that, just want to make sure we are all ok with that.

[taisdesouzalessa]

@kristinashu nice! So we are on the same page...lol. In my opinion they should be different because their purpose is different.

[kristinashu]

@ScottDowne @alanmoo @Pomax have had questions about the different types of templates so I've used what Tais has been working on to make this overview https://redpen.io/gnce740629099e94c7
I'm still working on it but maybe we can talk about it after stand tomorrow.

[kristinashu]

Adding visual IA to this since it's loosely related https://redpen.io/nwef7202a9fbd86f1a

I think we can close this ticket. Only thing left to do is to add this to the user documentation in #1491