Onboarding patterns

3 patterns built for onboarding interfaces.

Mega Nav
Separate dropdowns per section make each one feel like a different place, so browsing across a product's navigation hides the fact that the sections are siblings.
NavigationProductivityDashboardOnboarding
- Keyboard
- Touch
- Reduced motion
Invite Card
An invite sent to the wrong address cannot be taken back by the sender, and a bare text field gives you nothing to check before you commit.
InputFormsProductivityOnboarding
- Keyboard
- Touch
- Responsive
- Reduced motion
Splitting Accordion
An open accordion panel shares its container with every other row, so the boundary between the answer you opened and the questions you did not is ambiguous.
DisclosureProductivityOnboarding
- Keyboard
- Touch
- Responsive
- Reduced motion