Preference Center Mockups

Last Updated: 4-21-2020

Salesforce Preference Center Mockups

Leading Designs

SF Preference Center 6 - Unsubscribe View - V1 - This mockup is a simple confirmation screen modeled after the Salesforce mockup where a user is confirming an unsubscribe action to a particular alert.
SF Preference Center 7 - Unsubscribe View - V2 - 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.
SF Preference Center 8 - Unsubscribe View - V3 - Similar to the SF Preference Center 7 - Unsubscribe View - V2 mockup, without a green "recently unsubscribed" section.
SF Preference Center 9 - Unsubscribe View - V4 - Similar to the SF Preference Center 7 - Unsubscribe View - V2 mockup, but without the "recently unsubscribed" section and just having the "opt out of all" button on top. Also, there is an example of a responsive CTA button here, where on screens less than 767px the button text changes.

SF Preference Center 10 - Subscribe/Explorer View - V1 - This mockups shows a view for a user who wants to manage their current subscription preferences and explore APA's communication preference options and add any new ones. An example of such a user is one coming from the MyAPA home portal.
Quick Subscribe - V1 - 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 Actioin 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).

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.

Security-Related Designs

Update Preferences Security Screen - This page has a button to email a link to your inbox to make sure it's actually the real user who is unsubscribing.
Update Preferences Email - This is the email that the user receives to their inbox on file that a request was made to change their subscription preferences.

Test Designs

SF Preference Center 5 - Current Subscriptions within Modal - Similar to the SF Preference Center 4 - Single Modal After Unsubscribe All mockup, but with the "Current Subscriptions" within a "Manage" modal instead of listed by default on the screen; The "Frequency" section is still displayed in this mockup
SF Preference Center 4 - Single Modal After Unsubscribe All - Unsubscribe All link triggers modal where the "confirm" action goes to a confirm thank you page
SF Preference Center 3 - Double Modal After Unsubscribe All - Unsubscribe All link triggers a confirmation modal, and the "confirm" action on that modal goes to a "successful unsubscribe" modal, where then the user can close and return to the Preference Center or navigate to apa.org

PsycInfo Preference Center Manage Mockups ("Polaris")

Leading Designs

Polaris Preference Center Manage 2 - Single Modal After Unsubscribe All - This mockups shows the "Opt Out of All of These Emails" link triggering a modal where the "confirm" action goes to a confirm thank you page.
Polaris Save Preferences Successful Page - This is the page the user is navigated to after pressing the "Save All Preferences" button and successfully submitting the Polaris Preference Management screen.
Polaris Unsubscribe Confirm Successful Page - This is the page the user is navigated to after unsubscribing from all of the customized emails.

Test Designs

Polaris Preference Center 1 - Double Modal After Unsubscribe All - In this mockup, the "Opt Out of All of These Emails" link triggers a confirmation modal, and the "confirm" action on that modal goes to a "successful unsubscribe" modal, where then the user can close and return to the Preference Center or navigate to apa.org.