Project

General

Profile

Actions

Design/UX #20580

open

Design/UX #20575: Registration and Login Redesign

Account activation email(s)

Added by Colin McDonald 4 months ago. Updated 6 days ago.

Status:
Testing Required
Priority name:
Normal
Assignee:
Category name:
Registration
Target version:
Start date:
2024-07-12
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

This is for the email (or maybe emails) sent when an account is activated. Are the two different emails here one for the activation itself, and one a sort of separate welcome email? I think we still need to work the through email sources/sequences, as well as what's possible to upgrade and streamline their design. See attached screenshots for current email examples.


Files

account-activation-emails.png (228 KB) account-activation-emails.png Colin McDonald, 2024-07-12 02:17 PM
New Account Email.png (106 KB) New Account Email.png Sara Cannon, 2024-08-09 12:38 AM
welcome email.png (221 KB) welcome email.png Sara Cannon, 2024-08-09 12:39 AM
email.png (217 KB) email.png Sara Cannon, 2024-08-27 12:29 PM
email.png (182 KB) email.png Sara Cannon, 2024-10-01 11:57 AM
create.png (5.43 KB) create.png Sara Cannon, 2024-10-01 11:59 AM
CV.png (4.69 KB) CV.png Sara Cannon, 2024-10-01 11:59 AM
Profile.png (5.93 KB) Profile.png Sara Cannon, 2024-10-01 11:59 AM
Group.png (6.12 KB) Group.png Sara Cannon, 2024-10-01 11:59 AM
search.png (5.98 KB) search.png Sara Cannon, 2024-10-01 11:59 AM
Screenshot 2024-10-21 at 12.52.19 PM.png (174 KB) Screenshot 2024-10-21 at 12.52.19 PM.png Sara Cannon, 2024-10-21 01:52 PM
Actions #1

Updated by Colin McDonald 4 months ago

  • Tracker changed from Feature to Design/UX
Actions #2

Updated by Sara Cannon 3 months ago

There are two emails sent. I'm attaching new templates for both of the emails.

However, I wonder if the initial "new account" email that says the password is "user set" is even necessary. I'm guessing the purpose is to show the person their username, but they can also use their CUNY email to log in. Could we reduce the email load and eliminate it?

The second email mirrors the welcome modal with a password reset prompt added to the bottom.


Actions #3

Updated by Boone Gorges 3 months ago

The 'Your new account is set up' email is the core Multisite email: https://github.com/WordPress/wordpress-develop/blob/9f09c574c0ac64041c81760f10646994d21ce49d/src/wp-includes/ms-functions.php#L1831

The other email comes from BuddyPress: https://github.com/buddypress/buddypress/blob/14e71ac13c7652675983b9a1893627f2f5abaa34/src/bp-members/bp-members-functions.php#L3381

There's no reason to have two. It's interesting that BuddyPress itself doesn't suppress the MS email. Possibly because WP/WPMU used to send a randomly-generated password in the email content, which meant that the email was necessary for the first login. The BuddyPress emails are easier to style (see the bottom email at https://redmine.gc.cuny.edu/attachments/29119) so I think it makes sense to use that one.

As I mentioned on our previous call, the use of inline images is going to pose some problems. This is especially true for the large CAC logo in the header, which is important for branding and layout. The secondary images in Sara's mockup are not as important, and if they didn't appear it probably wouldn't change the format of the email in a huge way.

A two-column layout for email content is likely going to be problematic. It won't work well on mobile clients. For web pages, we use media queries and responsive design techniques to modify column flow on narrow screens. But responsive techniques are very limited across email clients. You have to use table markup for column styling that's anything like cross-platform, and media queries have limited support. Here's a decent, recent overview: https://www.mailmodo.com/guides/responsive-email-design/ My recommendation is to stick with single-column layouts where possible.

Actions #4

Updated by Raymond Hoh 3 months ago

It's interesting that BuddyPress itself doesn't suppress the MS email.

I think we should look at suppressing the MS email whenever a user is activating an account through the BuddyPress user activation process. This would also make for a good BuddyPress upstream patch as well.

Outside of that, we should keep the MS email because it can be manually triggered through the admin dashboard or through WP-CLI.

Actions #5

Updated by Colin McDonald 3 months ago

Thanks Sara for the work on these two emails and the suggestion to streamline to one, and thanks Boone and Ray for looking into doing that. Sara, let us know what you think about Boone's suggestion to stick with a one-column email format.

I also like thinking about this email and the modal in #20582 as basically the same thing, an intro list of action items, displayed in two different places for extra encouragement. It will be good to present this to the group in the coming weeks to see if they have any other thoughts on what to include.

Actions #6

Updated by Sara Cannon 3 months ago

Here's the email in one column

Actions #7

Updated by Colin McDonald 3 months ago

Looking good! For the next version, can we plug in this content? I also added URLs but mostly for reference, figure we won't be coding those in until later. Is it possible to have a dynamic, username-specific URL in these emails, as I do for the Provile and CV items? Otherwise, I can probably swap out for static documentation links.

Welcome to the CUNY Academic Commons!

Set Up Your Profile
Tell us more about yourself, change your preferences, and make new connections.
Button: Edit Profile
https://commons.gc.cuny.edu/members/colinmcd/profile/edit/group/1/

Find a Site
Check out what people are publishing on the Commons, and easily filter by campus and more.
Button: Site Directory
https://commons.gc.cuny.edu/sites/

Join a Group
Browse Commons communities and become a member of any that catch your eye.
Button: Group Directory
https://commons.gc.cuny.edu/groups/

(I divided the above two because there are two separate Site and Group directory links. I think the same images can be used for both in the second and third slots, though.)

Create Your Own
Use our portal to easily set up a Site, Group, or connected Group + Site so you can start your own Commons project or collaboration.
Button: Creation Portal
https://commons.gc.cuny.edu/create/

(This one combines Create a Group / Site / Connected Group + Site)

Make a CV
Set up a curriculum vitae to showcase your educational and professional info, and use it as a versatile public landing page.
Button: Public CV
https://commons.gc.cuny.edu/members/colinmcd/activity/

Actions #8

Updated by Raymond Hoh 3 months ago

Is it possible to have a dynamic, username-specific URL in these emails, as I do for the Provile and CV items?

We should be able to use the shortcut link: https://commons.gc.cuny.edu/members/me/. This doesn't require the username. For instance if we wanted to link to the Commons Profile's Activity page, we would use the following URL: https://commons.gc.cuny.edu/members/me/activity/. This would prompt the user to login and once authenticated, the user will be redirected back to their /activity/ page.

Actions #9

Updated by Colin McDonald 3 months ago

Thanks Ray, here is the updated email content then:

Welcome to the CUNY Academic Commons!

Set Up Your Profile
Tell us more about yourself, change your preferences, and make new connections.
Button: Edit Profile
https://commons.gc.cuny.edu/members/me/profile/edit/group/1/

Find a Site
Check out what people are publishing on the Commons, and easily filter by campus and more.
Button: Site Directory
https://commons.gc.cuny.edu/sites/

Join a Group
Browse Commons communities and become a member of any that catch your eye.
Button: Group Directory
https://commons.gc.cuny.edu/groups/

(I divided the above two because there are two separate Site and Group directory links. I think the same images can be used for both in the second and third slots, though.)

Create Your Own
Use our portal to easily set up a Site, Group, or connected Group + Site so you can start your own Commons project or collaboration.
Button: Creation Portal
https://commons.gc.cuny.edu/create/

(This one combines Create a Group / Site / Connected Group + Site)

Make a CV
Set up a curriculum vitae to showcase your educational and professional info, and use it as a versatile public landing page.
Button: Public CV
https://commons.gc.cuny.edu/members/me/activity/

Actions #10

Updated by Sara Cannon about 2 months ago

Here is the email with the updated wording

I've also attached all the icons

Actions #11

Updated by Boone Gorges about 1 month ago

I accidentally posted an update about this email to https://redmine.gc.cuny.edu/issues/20578#note-5

Actions #12

Updated by Sara Cannon about 1 month ago

I tried to test out the registration email on CDev using the code "NONCUNY2024", and I can't get it to work. Is there another code I should use?

Actions #13

Updated by Boone Gorges about 1 month ago

On cdev, you can use the code cac. I also whitelisted gmail.com addresses if you want to avoid using the signup code.

Actions #14

Updated by Sara Cannon about 1 month ago

Great! Thanks! The email looks great. I think it's okay to leave the username info out since you can also log in with your email.

Actions #15

Updated by Sara Cannon 16 days ago

On Cdev we are still getting both emails. Were we going to nix the username one? If we are keeping it, we should style it like above

Actions #17

Updated by Colin McDonald 9 days ago

It looks to me for this email like we need to update these two buttons and their links:

Button: Edit Profile (capitalize Profile)
https://commons.gc.cuny.edu/members/me/profile/edit/group/1/ (update link)

Make a CV (lowercase a)
Button: Public CV
https://commons.gc.cuny.edu/members/me/activity/ (update link)

Actions #18

Updated by Colin McDonald 9 days ago

Sorry, on the CV link, let's use this one instead:

https://commons.gc.cuny.edu/members/me/edit-cv/

Actions #19

Updated by Colin McDonald 6 days ago

Just wanted to nudge these changes before we do a final round of testing, when you're able. Thanks!

Actions

Also available in: Atom PDF