hackforla
UXD - Create Google Doc and Presentation templates for 311 data
Overview
We need to create basic branded templates for 311 Data that can be used as the basis for research templates.
Action Items
- [x] Create a Google document template
- [x] Include a title page that has the same information as the Internship template
- [x] Include a branded visual header for all pages after the first one
- [x] Include a footer with Hack for LA branding on the title page and Updated date, Page Number and Name of Document on subsequent pages
- [x] Include 3 levels of heading styles + body copy
- [x] Add a table of contents on the page before this content
- [x] Create a Google presentation template
- [x] Include an instruction page
- [x] Include a title page with project branding
- [x] Include common layout pages with project branding
- [x] Feedback rounds from other teams
- [x] Design
- [x] Product + Org Rep
- [ ] Designer to review feedback comment and reference material
- [ ] Complete new design iterations that satisfy feedback from Bonnie
- [ ] Create a new document in 📁 (GDRIVE) 311-data.org > 4. User Research > Research Templates
- [x] named:
[template] generic presentation - v2.2 - [ ] Populate slides with designs that satisfy Bonnie's feedback
- [ ] update this ticket's section, "Deliverable: new Google Drive directory and files" to reflect this new slide deck
- [x] named:
Design Iterations
Please move ticket between In Progress and In Review to assist PM team
Iteration 1
1. Using square brackets in title to indicate it is a template
User to fill in the actual title of the document
2. Removing header triangle on page 1
Pictured: Green "X" from the Version History where the header triangle is removed
3. Increasing margin to prevent copy overlapping with header triangle
Pictured: prev version of doc where copy was hidden by header triangle
4. Footer content appears as text, automated page-number
Before (could not copy/pate)
After:
Hand Off Materials
Deliverable: new Google Drive directory and files
- 📁 (GDRIVE) 311-data.org > 4. User Research > Research Templates
- 🎞️ (slides) [Template] Slides
- 🎞️ (slides) [template] generic presentation - v2
- 🎞️ (slides) [template] generic presentation - v2.1 (Bonnie Feedback in comments)
- 📝 (doc) [Template] 311Data - generic document
- 📝 (doc) Session Summary [RP#] [Session#] - blank
Figma Sections
Replace with links to any figma sections used for this ticket
-
section 1 -
section 2 -
etc
Resources
Designer Resources
Iteration Dropdown Copy/Paste
<details><summary>Iteration X</summary>
<p>
Link to notes: `REPLACE WITH COMMENT URL`
`REPLACE WITH SCREENSHOT UPLOAD`
</p>
</details>
Related Work
- https://github.com/hackforla/311-data/issues/1951
- https://github.com/hackforla/311-data/issues/1796
- https://github.com/hackforla/311-data/issues/1926
- https://github.com/hackforla/311-data/issues/1927
The generic doc template has been updated in the following ways:
- the header triangle has been removed from the first slide to let readers focus on the logo
- the top margin has been increased on subsequent pages so that on-page copy does not overlap with the header
- the footer has been edited so that the copy appears as text and is editable. The page numbers have been automated.
- the phrase [Title of document] has been put in square brackets to indicate it needs to be filled in.
Two elements are still outstanding in this document:
- figuring out how to automate the last updated date
- confirming what tagline we can use that connects our project to Hack for LA (I have asked this question in the hfla-marketing slack channel
I could use some feedback on fonts.
ETA update: I will be working on the presentation template tomorrow and will have it ready for review by the end of the day.
I've updated the generic doc template and the generic slide template the research team will be using. Once I have everyone's feedback, these can then be submitted to be turned into templates.
Thanks!
@ExperimentsInHonesty - when you have a moment, I'd appreciate your feedback on the brand slide in the slide deck and the first page footer in the document. It feels important to connect 311 data with Hack for LA in the latter tagline (rather than introducing multiple brands and not making a connection to the project). Let me know what you think
[edited to include Bonnie's HfLA acct]
I am going to jot down some of the visual changes for the Generic Google Doc that are outlined on this comment.
- I'm going to move these into the main ticket under "Resources", similar to how we do so for other visual-based tickets for 311-data
Screenshots: Generic Document
Using square brackets in title to indicate it is a template
Removing header triangle on page 1
- Pictured: Green "X" from the Version History where the header triangle is removed
Increasing margin to prevent copy overlapping with header triangle
- Pictured: prev version of doc where copy was hidden by header triangle
Footer content appears as text, automated page-number
Before (could not copy/pate)
After:
I wanted to address a comment I've seen in this ticket...
From earlier comment and Google Doc comment:
- figuring out how to automate the last updated date
There might be a way to get the automated "last-edited date", but this is not supported by Google Docs out-of-the-box. We would need to spend dev resources on this, it requires a dev to write a Google App Script (aka google-flavored automation) to achieve this. I've linked a source that explains the steps that need to be taken to achieve this:
I am happy with these! All looks good to me, let me know if the "last-edited date" aspect is important (I'm certainly curious to see if we can manage that). I will get this in front of Bonnie at the next PM meeting.
I added one comment to the slide deck advising against using yellow text on a white background to improve readability. That's my only suggestion, otherwise looks good to me! ✅
Thanks, @ryanfchase & @Joy-Truex. The comments are much appreciated.
@Joy-Truex - Good catch. I've updated the subtitle to the brand dark blue. Let me know if you'd prefer the copydeck grey instead.
@ryanfchase - the 'last updated date' expectation isn't coming from me but from the internship example. I'll reach out to their team to find out how they got that to work. My hope is that we could just cut and paste an existing script... If nobody else has implemented this, I don't think it's a priority for us.
The slides need the text [HfLA Logo] Hack for LA is a project of Civic Tech Structure, Inc. a 501(c)(3)
Example
Notes while reviewing with Bonnie
- generic document
- Include disclaimer: "[HfLA Logo] Hack for LA is a project of Civic Tech Structure, Inc. a 501(c)(3)"
- see Bonnie's comment for example
- Logo should be bigger, maximize logo size while keeping disclaimer 1 line
- 20250806 - reminder from previous discussion, please don't make this whole triangle one big picture (bad for accessibility)
- Include disclaimer: "[HfLA Logo] Hack for LA is a project of Civic Tech Structure, Inc. a 501(c)(3)"
-
Slide 1
- Not enough space for subtitle, maybe move it up and change font (size/color)
-
Slide 2: Background
- check text color WCAG accessibility compliance
- try incorporating more imagery
- sidebar with logo (feedback slide 5)
- NC boundary logo mosaic (feedback slide 7)
- sidebar with still from site (feedback slide 8/9/10)
- Include Outro / Thank-you slides
- contains website, socials
- contains authors (and their headshots)
Reference Material (may be out of date)
We've collected some feedback from Bonnie, I will be assigning myself this ticket while I organize these into actionable steps.
Moving to Questions, ready for org rep so that we can ask follow up questions about the feedback we received
Prepping this for hand-off to design team. @Joy-Truex please add a complexity / size for a designer to pick up.
No changes to action items. simply moving this back to prioritized backlog with a lower milestone so designers can focus on Map milestone tickets
Design updates that were made before placing this issue back to a lower priority:
- Created new presentation document in Google Drive [template] generic presentation - v2.2
- Added disclaimer with logo on first slide (left a comment because I was not sure if we only wanted this on the first slide or on every single one)
- Resized 'Subtitle' and 'Date of Presentation' text on Slide 1 to fit more text
- Text on Slide 2 passes AA contrast for WCAG compliance, but fails AAA contrast
- Added sections for profile pictures and names for contributors on final slide; also added sections for website URL and link to Hack for LA's project page (wasn't sure what other socials we wanted to include)
@jessieliu1219 there was a mistake in the ordering of the prioritized backlog, sorry about that. Unassigning you, please take from the top of the backlog for a new ticket