Newsletter Landing Page · UX/Dev Walkthrough & Handoff

States by use case

“Member” means any logged-in CR account, Basic or Paid.

1. Logged-out user, new subscriber

• Start logged out: check newsletters → Sign Up → sign-up pop-up (name and email) → confirmation.
• After signing up: “You’re now signed up for 2 newsletters.”
• Figma: Screen 1 Logged out, Screen 2 Just signed up, pop-ups 02 and 04.

2. Logged-out user, existing subscriber

• Start logged out: “To view or update your newsletter subscriptions, enter your email.” → their subscriptions load at the top, checked.
• After entering their email: uncheck to remove, check to add → Update Newsletters.
• Figma: Screen 1 Logged out, pop-up 07 Look up your email, Screen 2 Has newsletters, Manage Unchecked and Saved. Verification: none in the design (same as today’s lookup); dev/PM to define if needed.

3. Logged-in member, no subscriptions

• Logged in, no newsletters yet: the page shows their account email. Check newsletters → Sign Up → confirmation (no sign-up pop-up).
• Figma: Screen 2 No newsletters yet, pop-up 04.

4. Logged-in member, existing subscriptions

• Logged in, has newsletters: subscriptions at the top, checked. Uncheck to remove, check to add → Update Newsletters.
• Figma: Screen 2 Has newsletters, Manage Unchecked and Saved.

5. Logged-in member, wants a different email

• Viewing a different email: “Use a different email” shows that email’s newsletters and “This doesn’t change your account email.”
• Figma: Screen 2 Different email, pop-up 08 Use a different email.

Prototype tips

• Any name, email, and password work. Nothing is saved.
• Use an email with “none” in it (like none@email.com) to see an email with no newsletters.
• Use an email with “error” in it on the sign-up form to see the error message.
• Resize the window to see tablet and mobile. Refresh to start over.