SF Preference Center Mockups

SF Preference Center - Subscribe/Explore View - One-Page Design - Isotope design with searching, filtering, and sorting.

• The user is presented all of the different alerts (whether they are subscribed to them or not), and they are given the option of subscribing or unsubscribing to any alert with a toggle design.
• Javascript functionality exists for the American Psychologist and Dreaming journals with regards to the "Journal Alert" and "Online First Publications" checkbox behavior.
• The user can first filter all of the alerts, and then sort. (Note: The JavaScript may need to be tweaked to allow any sequence of searching and filtering.)
• The default sort is by Subscriber Size (the most subscribers showing first).
• 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.
• There is a link for the user to manage their current subscriptions (in a different way), by linking to the "unsubscribe" view of the Preference Center.
• At a mobile breakpoint, the search input field dropdown filter is hidden and the filter and sort button groups stack.

Quick Subscribe - This mockup shows a "quick signup" form for a newsletter alert for a www.apa.org newsletter landing page, similar to the Salesforce Quick Single Action Subscribe mockup. Here, the user comes from a "contextual beginning", so we would capture minimal data such as the first name, last name, email, and the item they are signing up for, along with suggesting 1 or 2 more related items if possible. For the mockup demo, clicking on the "Subscribe" button would show on on-page alert showing successful form submission (e.g., using Ajax in real-life).

SF Preference Center - Unsubscribe View - This mockup shows an email that was recently unsubscribed to (e.g., the user pressed "Unsubscribe" on an email alert and arrived on this screen); The "opt out of all of these emails" is emphasized on the screen. The user still has the option to manage their current subscriptions and/or add new subscriptions in the bottom section.

Quick Unsubscribe - This mockup is a simple confirmation screen modeled after the Salesforce mockup where a user is confirming an unsubscribe action to a particular alert.

Save All Preferences Successful Page - This is the page the user is navigated to after saving all preferences.

Unsubscribe Confirm Successful Page - This is the page the user is navigated to after opting out/unsubscribing from all of these alerts.

"Your Subscription Preferences Have Recently Been Changed" (email) - This is the email content a user would receive when something has changed for their subscription preferences.