Create designs for email template

[ryanfchase]

Overview

We need to create a design for a 311-Data email template in order to ensure that emails sent through our app are compliant and on-brand with the 311-Data design system

Note For Designer

The end result should be applicable to any email that 311 needs to send, it should not be specific to just our Contact Form subject/body.

Action Items

• [x] Come up with designs for overall styles and layout of our email template
  • [x] fonts types and sizes
  • [x] footer info
  • [x] logo placement
• [ ] Complete Design Iterations section below
• [ ] Document user interaction in Figma

---

Design Iterations

Please move ticket between In Progress and In Review to assist PM team

Iteration 1

Link to notes: REPLACE WITH COMMENT URL

REPLACE WITH SCREENSHOT UPLOAD

---

Resources/Instructions

Example Email Contents

Subject

Thank you for your input!

Message Body

{{to_name}},

We appreciate you taking the time to leave a suggestion for our 311 Data service request map. Your feedback is important to us, and we are always looking for ways to improve our data visualization tool. Please follow our [LinkedIn](https://www.linkedin.com/company/hack-for-la/) for updates on this civic tech project and others within the Hack for LA organization.

Sincerely,

311 Data Volunteers at Hack for LA

Hand Off Materials

Figma Section Name: REPLACE WITH SECTION NAME

Before Screenshot

REPLACE WITH SCREENSHOT UPLOAD

After Screenshot (Finalized)

REPLACE WITH SCREENSHOT UPLOAD

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> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."

[ryanfchase]

Just realized I referenced an older version of the contact page message body. Though, it was not very important for the designer to complete their work. But let it be known that it is correct now.

@annaseulgi for next time: when you're done reviewing, unassign and remove ready for design lead, thanks!

Also, if you are going to move the ticket into the backlog, you'll need to make sure it is ordered properly by Milestone. Moving it into Prioritized Backlog will simply move it to the bottom, and we'll need to drag it to it's correct place. I prioritized this just now, so no action is required. FYI you can also just add the ready for prioritization label when you've signed off and PMs will move it for you.

[annaseulgi]

@ryanfchase Gotcha thanks for letting me know! Will try my best to do that moving forward

[ryanfchase]

@ryanfchase Gotcha thanks for letting me know! Will try my best to do that moving forward

We're trying to improve the way we communicate these! Thanks for being open and flexible.

Last ask if you're the designer to work on this. Please jot down...

• An ETA of when you'd like to complete this
• Your availability for being contacted about this ticket -- we obviously trust you as design lead, but we ask this to be consistent 😉

[annaseulgi]

ETA will be about 3-4 weeks! (Sorry - updated this comment but will be working on this ticket in July) Availability is flexible and I get notified by email when something comes up :) (not sure if that's what you were referring to @ryanfchase )

[annaseulgi]

finishing up mockups - waiting to finalize after getting team feedback after the July break!

[bberhane]

Adding @Joy-Truex since I believe Anna discussed handing off her issues to new leads

[ryanfchase]

Hi @Joy-Truex,

Please leave a comment with the following items:

• updated ETA
• progress from the last week (if applicable)
• availability for communications during the week

---

I know this is technically in the process of being handed off. If we can get an update on this by tonight (for my information), that would be appreciated. Thanks!

[Joy-Truex]

Hi @ryanfchase ! After getting feedback from the team, I have moved this to the handoff page.

We've decided to go with the second of 3 options that anna designed. We chose this because of the contrast provided from the blue rectangle at the top, and overall scan-ability of the message template.

[ryanfchase]

Hi @ryanfchase ! After getting feedback from the team, I have moved this to the handoff page.

We've decided to go with the second of 3 options that anna designed. We chose this because of the contrast provided from the blue rectangle at the top, and overall scan-ability of the message template.

@Joy-Truex, I will have a look and make sure we have everything we need to make a dev ticket. I will help close this ticket once at that point, feel free to unassign yourself in the meantime. Thanks!

[ryanfchase]

Assigning myself so I can make a dev ticket.

• ETA: tonight
• availability: tonight

[ryanfchase]

ETA: tonight availability: weekdays

[ryanfchase]

@Joy-Truex @allisonjeon I've (finally) had a look and populated the screenshots that the devs will need to complete this work. I will close this as approved, thanks all.

[Joy-Truex]

Due to discussion in Implement designs for email template #1828 stating that we cannot use web fonts in our emails, the font has been updated from Roboto to Sans Serif (Arial) to utilize a font that is from the list that the Gmail text editor allows.

Font Comparison