Mode design examples

Mode

Sign-in screen where the user authenticates with their email and password or via Google and Office 365 single sign-on.

• Sign In

Mode

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

• Forgot Password

Mode

Home screen where the user's 'My Work' tab is empty, prompting them to create their first report.

• Empty State
• Home

Mode

Settings page where the user configures their personal profile details, social links, and editor preferences.

• Account Settings
• Profile

Mode

Settings page where the user configures their profile avatar by uploading an image, using initials, or connecting a Gravatar.

• Account Settings
• Profile

Mode

Create page where the user sets up a new organization by providing a name, alias, and an optional profile picture.

• Account Setup
• Error

Mode

Settings page where the user manages full members for their organization and can invite new teammates.

• Team Management
• Roles & Permissions

Mode

Settings page where the user selects a database provider from a list to configure a new integration.

• Integrations

Mode

Code editor where the user writes and executes SQL queries against a selected database schema to build a report.

• Code Editor
• Report

Mode

Account creation Onboarding Form User management

Mode

Grid Onboarding Dashboard Account management Account settings Data analysis

Mode

Settings page where the user invites a new member to their workspace by providing an email address and a custom message, alongside a banner prompting them to connect a database to begin their trial.

• Team Management