SF Preference Center Mockups

• This view of the Preference Center is geared toward unsubscribers—users coming from an "unsubscribe" link on an email (so, we know what their email and associated preferences are).
• The top section has a button where the user can unsubscribe from all of their current preferences. Pressing this button launches a modal where the user sees all of their current subscriptions. After confirming the action, the one modal hides and a new one shows confirming the action. This second modal currently fades away and hides after 5 seconds. Also, the previous "Currently Subscribed" green banner cards turn to "Recently Unsubscribed" yellow cards, in case the user changes their mind and wants to toggle back any particular subscription "on".
• The default view of the screens only show the items the user currently subscribes to. Once the user uses either the search bar filter or one of the button filters, the results are primary sorted by "currently subscribed", and then secondary ordered by Weighting Size (with 9 being the highest and at the top, and 0 the lowest and at the bottom). Weight Size is an internal "data-attribute" field which would be designated in the Salesforce backend.
• After the currently subscribed alerts, the user is then presented all other alerts and given the option of subscribing or unsubscribing to any alert with a toggle design.
• Javascript functionality exists for the American Psychologist and Dreaming journals regarding the "Journal Alert" and "Online First Publications" checkbox behavior.
• The user can search, filter (with both the search bar filters and the filter buttons), and sort the alerts, with all of these functionalities working together.
• The "Reset All" clears the search field and also resets the sort order.
• To create custom research alerts, the user could open the "Custom Research Alerts" modal by clicking on that card's button.
• At a mobile breakpoint, the search input field dropdown filter is hidden and the filter and sort button groups stack.
• After changing any preferences on the screen or from a modal, the user has to press the "Save All Preferences" button (which is duplicated on both the top and bottom of the screen, with the yellow CTA design, so they stand out well).
• There is a button at the bottom of the screen where the user can permanently remove their email from all APA communications (within Salesforce). Confirming this action sets a flag in Salesforce and the user is navigated to a confirmation page.
• Mobile-friendly design where the filters button group changes to a dropdown at a breakpoint of 767px and below to take up less screen real estate on mobile devices.

Changes since the Round 4 mockups:

• The sort order for "Subscriber Size" has been removed (both as internal sort and with the frontend badge display). This has been replaced by "Weight Size", an internal sort with 9 being the highest and 0 being the lowest. If you view the source code, you can see this data-attribute.
• "Membership" has been added as a topic and tag, along with 2 membership cards for the mockups (with weights of 9 and 5 for the demo).
• For the "unsubscribe to all current preferences" section, the heading and corresponding modal title has been changed to say "all current preferences" instead of "all current emails".
• The "unsubscribe from all current preferences" modal functionality has been changed. The statement that the user has to press the "Save All Preferences" button has been removed since the action of the modal would be immediate now after confirming the modal. The confirmation button has been changed from "Confirm" to "Yes, Unsubscribe from All" to make it clear what the user is doing. Then, after clicking on that, that modal closes and another opens which confirms the message. Then, that second modal fades away and hides after 5 seconds. We may or may not want to keep this functionality. Either which way, the user can close the modal by clicking on the top "X", the "Okay" button, or outside of the modal. The 5 seconds should be enough time for a user to read the confirmation message.
• The long-text buttons all have responsive views (e.g., shorter text at smaller breakpoints). All of the long-text buttons need to be reviewed.
• The "Name" sort button ascending and descending icon has been changed from up and down chevrons to alpha-sort-ascending and descending icons.
• The bottom "permanently remove" modal primary button has been changed from "Confirm" to "Yes, Remove from All" to make it clear what the user is doing.
• Visual tweaks, including left-aligned card headings and badges for better readability, different button styles to make the primary actions more prominent, different body outline color for less distraction, and less padding on the top section to bring the cards up more.

Changes after 12-4-2020 stakeholder meeting:

• On the Unsubscribe mockups, a link has been added underneath the user's email display at the top of the screen ("Not you? Set and save your own alerts here") which links to the Explore view. This was added to help deter someone from changing another user's alerts from following a forwarded email.
• All long buttons, including those in the modals, have responsive switches for button text for mobile-friendliness at small breakpoints.
• For the purposes of the mockup, the top "remember to save all preferences" banner at the top, which shows up when any modal is closed, is now hidden on the Unsubscribe mockup when a user confirms to cancel all of their current subscriptions or on both the Unsubscribe and Explore mockups when a user confirms the "permanently remove" bottom modal. This is to show that these actions are definitive and there is no need for the user to press "Save All Preferences" in these scenarios.

• This view of the Preference Center is geared toward users who what to explore the various APA alerts, and the mockup simulates not knowing who the user is (e.g., the user's email).
• The top section has a sign in section, where the user can input in their First Name, Last Name, and Email (used for the alerts) to either retrieve their current alerts, or to "sign in" and set new alert preferences. There is frontend validation for all fields required and a valid email address. (We will need to work on this design and figure out the best place to required this info from anonymous users when they want to save their preferences (e.g., right when they press the "Save All Preferences" button?).
• Once the user logs in, the login box disappears and is replaced by their email (on file?).
• The default primary sort is by a hidden data attribute for "weight" (0–9 with 9 at the top and 0 at the bottom). Then, a secondary sort is for Alerts Name (A to Z).

Changes since the Round 4 mockups (other than the general changes mentioned for the new Unsubscribe View mockup):

• The "Log In" verbiage for the anonymous user has been changed to "Sign In" along with other text changes to make it clear to the user that we just want to "identify" them if they want to retrieve or save their preferences.
• The bottom "unsubscribe from all" section is not shown by default for an anonymous user. It is only when a user logs in that this section show.