Screenshot study · Reviewed September 23, 2026
Notion Mail: distinguish sign-in from connecting a mailbox
The captured Notion Mail screens first identify a Notion account, then explain connecting a Gmail address. Naming the separate provider and showing its system handoff make the change in responsibility visible.
When does one account setup become two separate decisions?
The captured Notion Mail screens first identify a Notion account, then explain connecting a Gmail address. Naming the separate provider and showing its system handoff make the change in responsibility visible.
Evidence and limits
Selected still images from the Sep 2026 Notion Mail iOS collection. These show states, not verified transition order, timing, conversion, or accessibility behavior. Source copy may describe historical service conditions.
Read the decisions
01 / Notion Mail · Sep 2026 · Still image
Name the account prerequisite
What is visible
The welcome screen says to continue with a Notion account and provides Get started.
Design interpretation
State account dependencies before sending users into authentication.
02 / Notion Mail · Sep 2026 · Still image
Show the account-method menu
What is visible
A notion.so browser sheet lists Google, Apple, Microsoft, Passkey, SSO and Email.
Design interpretation
A rich provider menu adds flexibility but should keep each route easy to distinguish.
03 / Notion Mail · Sep 2026 · Still image
Request the emailed code in place
What is visible
A verification-code field appears beneath the email field with a sent-to-inbox explanation.
Design interpretation
Keep the address and challenge together so users can verify the destination.
04 / Notion Mail · Sep 2026 · Still image
Acknowledge account setup work
What is visible
The browser sheet shows a spinner and Getting set up text in the center.
Design interpretation
Use a meaningful wait label and define an error path for long operations.
05 / Notion Mail · Sep 2026 · Still image
Separate identity from mailbox connection
What is visible
A Connect Gmail address sheet explains mailbox connection and offers Continue with Gmail.
Design interpretation
Signing in and granting mailbox access are separate decisions; explain both.
06 / Notion Mail · Sep 2026 · Still image
Expose the provider handoff
What is visible
An iOS dialog names accounts.google.com and offers Cancel and Continue above the connection sheet.
Design interpretation
Preserve recognizable provider identity and a cancel route at trust boundaries.
What to question
- Keeping every provider method visible helps switching but lengthens the form when email expands.
- A browser-sheet sign-in introduces its own navigation and dismissal controls; cancellation needs a recoverable destination.
- The inbox capture includes a dated service notice. It is useful evidence of notice placement, not proof of current availability.
Try an original implementation
Explore a three-step web onboarding pattern: choose a goal, set a pace, and optionally request a reminder. Go back to revise answers without losing them.
This React example uses native form controls, keyboard navigation and focus management. It is a separate prototype with original copy and styling, not a reproduction of the source apps.
Download React sourceRequires React and Tailwind CSS. Web only; not React Native. MIT license.
Import the named OnboardingExample component into a page. Replace the final preview with your application logic; this example makes no network requests.
Practice studio · Original web demo
Step 1 of 3
What would you like to practice?
Before you ship
- Explain what account identity is needed before asking for it.
- Separate authentication from mailbox permissions in both copy and state.
- Allow cancellation without leaving setup stuck.
- Give setup loading states an error and retry path.
Validate these recommendations with your own users. No conversion uplift is claimed.