UX Hand Off to Devs- Write and Design Notification Templates

[UXBrendan]

User Story AS an Orcasound Concerned Citizen Scientist I WANT to clearly understand content in email, SMS, or mobile push notifications by choosing either all or a selection of Orcasound hydrophones SO THAT I can receive email notifications when a live listening event is occurring.

Description Based on the discovery research conducted and discussions with Skander (dev) and Scott (stakeholder), write template messages for 3 channels of notifications:

1. Email a. This also includes a complete visual redesign of the email in addition to copy
2. SMS a. Copy only
3. Desktop/mobile push a. Copy only

Notes:

• Skander requested email content

• Scott requested SMS and mobile push content

• When thinking about content for SMS and mobile push notifications, space is limited. Perhaps providing short copy about active listening event at a hydrophone and providing 2 links- one to the hydrophone and one to web-page content that includes additional content (see "Top level content to include" checklist below) is one design solution. Discuss as a team and decide what the best approach would be to serve all content to users based on notification channel (email, SMS, and desktop/mobile push notifications).

• If you need UX Writers, please post a message in the #ux-general channel to ask for help

• [ ] Top level content to include:

  • [ ] Which hydrophone the listening event is occuring at
  • [ ] Link/button/hypertext link to specific hydrophone
  • [ ] A conservative call to action link- allowing for a wide variety of calls to action with a link
  • [ ] Option to opt out of notifications
  • [ ] Option to share with friends

• [ ] Please write user stories that include links to email redesign and copy that can be assigned to devs (User Story template)

Acceptance Criteria GIVEN I receive email, SMS, or push notifications WHEN a listening event is occurring THEN I see content that clearly communicates to me that a hydrophone listening event is occurring and am able to reach the active hydrophone during the listening event.

[UXBrendan]

@saraloup

Feel free to assign to UX Notification team members or complete yourself. Let me know if you have any questions.

[sonamchauhan1201]

Here's a summary of the work completed

• Low-fi Wireframe: The low-fidelity wireframe has been created and included in the Figma file. It outlines the overall layout and structure of the email design, providing a visual representation of the content and elements. More examples will be added by Aug 10
• Color Palette: My suggestion is to use the same color palette that the other OrcaSound team is already using.
• Font Size Suggestions: To ensure readability and visual hierarchy, I provided font size recommendations for different sections of the email. This includes headings, subheadings, body text, and any other relevant elements.
• Email Content: Add some content and looking for resources

https://www.figma.com/file/xMF7abpL5MjJ8vQNTa31Vt/Orcasound-notifications?type=design&node-id=735%3A360&mode=design&t=iETXRa4j6dn3fUbq-1

[saraloup]

@UXBrendan Does the Be Whale Wise link need to be in the template as well? It's in the current email but not listed as a requirement above.

[UXBrendan]

@saraloup

The "Be Whale Wise Guidelines" should only be in the sign up form, not the email. Scott may have changed this, but historically, it's only been in the sign up form.

[saraloup]

Uploads for template test

More template assets

[saraloup]

Uploads for template #2

[saraloup]

More template assets

[sonamchauhan1201]

Updated Image

[saraloup]

This is the design implemented into MJML. There is one issue where the font is getting overwritten in the code and two vertical icon alignments (hydrophone and social share) that could be better if possible. Mustafa is looking into these for me.

Design has been tested through Litmus PutsMail with Gmail and Outlook web, and Outlook 16/365

[UXBrendan]

@saraloup- Great work! I hope that Scott and Skander give you good feedback. Will you be user testing the email template designs?

[sonamchauhan1201]

@UXBrendan We did a preference test using Usability Hub and the Orcasound UX design community on Slack, receiving feedback from 13 participants over two weeks.

This is test result-https://docs.google.com/document/d/1hAEZzHvvFLX6wDwXaLr0Oly9-sKWnkzct0RwvkKWXKQ/edit

[UXBrendan]

@sonamchauhan1201 I would push back and say that testing with internal UX team members is not user testing. Would love to see a presentation of results and recommendations, and participate in a discussion about next steps.

[sonamchauhan1201]

@UXBrendan I used a tool called Usability Hub to understand user preferences. I asked users who are not from the Orcasound community, and I received only 8 responses by sharing the link on my LinkedIn profile. To gather more feedback I visited the Orcasound UX General Slack channel. I can share the presentation with you at next week's weekly meeting or on any other day that suits you best.

[UXBrendan]

@sonamchauhan1201

Got it. If this was a qualitative study, then you only need a minimum of N=5 participants (per user segment/persona type) according to NN/g (https://www.nngroup.com/articles/5-test-users-qual-quant/). Usually, I never get N=5 for each of the 3 personas we've characterized, so I always stop my studies after getting N=5 participants. Is there a reason why you needed additional participants beyond the N=8 that participated?

Happy to attend a presentation of the study, but the purpose is for recommendations to be shared with who will be taking care of next steps. Who are you handing off to? Designers? If so, have you documented your recommendations so that they clearly understand their responsibilities? I'm happy to help the team move through the UX process, but my involvement isn't necessarily required if you can clearly document next steps and hand off to the appropriate team member.

[sonamchauhan1201]

@UXBrendan Thanks for the suggestion it's really helpful.

We have two designs, but we are unsure which one is best. Therefore, I decided to conduct a preference test to evaluate the designs. While running the test, I asked users to briefly explain why they preferred one of the options and what specific aspects or features influenced their preference. I received five responses in brief, while others preferred not to provide an answer and simply selected their preferred option. To gain more clarity in design, I decided to seek feedback from the Slack community. This test was conducted on October 6.

I am collaborating with Sara on the design too, and we have already discussed and iterated upon it.

Here is the link to the result https://app.lyssna.com/tests/db55b744495f/results/c837f69df394