Marathon design examples

Marathon

Sign-in screen where the user authenticates with their email address and password.

• Sign In

Marathon

Password recovery screen where the user enters their email address to receive reset instructions.

• Forgot Password

Marathon

Password recovery screen where the user is informed that the entered email address was not found.

• Forgot Password
• Error

Marathon

Signup screen where the user creates an account with their work email and password next to a product preview showing a kanban board of design feedback.

• Sign Up
• Account Setup

Marathon

Onboarding step where the user uploads a profile photo and enters their first and last name.

• Profile
• Edit

Marathon

Onboarding step where the user chooses between joining an existing team or creating a new one.

• Team Management
• Setup Wizard

Marathon

Onboarding step where the user names their team and optionally uploads a logo to start the workspace setup.

• Add & Create
• Team Management

Marathon

Onboarding step where the user invites teammates by email to join their new workspace.

• Invite Teammates
• Team Management

Marathon

Onboarding step where the user is prompted to connect their Figma account to sync comments into the workspace, with an option to skip.

• Integrations
• Setup Wizard

Marathon

Onboarding step where the user is prompted to create their first project before continuing to the dashboard.

• Setup Wizard
• Empty State

Marathon

Inbox view where the user is prompted to connect integrations like Slack and Figma to populate their empty feed, alongside a trial expiration warning.

• Empty State
• Notifications

Marathon

Sign-in screen where the user grants Marathon access to their Figma account to read files, comments, projects, components, and profile info.

• Confirmation
• Integrations