SF Preference Center Mockups

SF Preference Center - Isotope Design - Unsubscribe View - Isotope design with searching, filtering, and sorting for both the Unsubscribe and Explore views (same screen, different views, which will be made possible by URL attributes in production)

• 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 previous "Currently Subscribed" green banner cards turn to "Recently Unsubscribed" yellow cards, in case the user changes their mind and wants to toggle back their subscription "on".
• The default sort of the screen are items the user currently subscribes to, then ordered by Alert Title (A to Z).
• 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 with regards to the "Journal Alert" and "Online First Publications" checkbox behavior.
• The user can search, filter, and sort the alerts, with all of these functionality 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 user is navigated to a confirmation page.

SF Preference Center - Isotope Design - Unsubscribe View - Filter Button Group to Dropdown Mobile-Friendly Design - The same screen as the Unsubscribe View, but with a 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.

SF Preference Center - Isotope Design - Explore View - Isotope design with searching, filtering, and sorting for both the Unsubscribe and Explore views (same screen, different views, which will be made possible by URL attributes in production)

• 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 login 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 requried 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 sort is by Subscriber Size (the most subscribers showing first).
• The user is then presented all alerts (with their subscribed alerts mixed in the default sort order) 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 with regards to the "Journal Alert" and "Online First Publications" checkbox behavior.
• The user can search, filter, and sort the alerts, with all of these functionality 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 user is navigated to a confirmation page.

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).