Runnable design examples

Runnable

Sign-in screen where the user authenticates with their GitHub account to access the platform.

• Sign In

Runnable

Signup page where the user can create an account using GitHub or Bitbucket to start a 14-day free trial.

• Sign Up
• Account Setup

Runnable

Sign-in screen where the user authenticates with their GitHub credentials to authorize access for the Runnable application.

• Sign In

Runnable

Onboarding step where the user selects a team workspace, like 'bertwitt', or indicates they don't see their team to proceed.

• Team Management
• Welcome

Runnable

Onboarding loading screen where the user waits for their infrastructure to spin up while being offered a product tour video.

• Loading
• Guided Tour

Runnable

Onboarding Confirmation

Runnable

Onboarding step where the user configures their application by choosing to start a demo with Node.js, Python, or Ruby, or by connecting existing repositories.

• Setup Wizard
• Getting Started

Runnable

Configuration wizard step where the user selects the stack type, version, and branch for their repository before initiating a build, guided by an onboarding coach mark.

• Setup Wizard

Runnable

Detail page where the user views the configuration settings for a ruby-starter template and is guided by an onboarding coach mark after successfully creating a container.

• Setup Wizard
• Templates

Runnable

Onboarding Dashboard Sidebar navigation Templates

Runnable

Form Configuration

Runnable

Modal overlay confirming a successful deployment and prompting the user to enable GitHub pull request notifications via a toggle switch.

• Success
• Integrations