Welcome Screen

Joule / Patterns / Welcome Screen

Intro

The welcome screen introduces users to Joule and invites them to begin a conversation. It appears the first time a user activates Joule, each time a conversation restarts, and when a new conversation is created.

Welcome screen in compact Joule panel (left) and regular Joule panel (right)

Usage

Do

  • Display the welcome screen with the Joule Illustration and greeting message when the user opens Joule or starts a new conversation.
  • Automatically open the keyboard when the welcome screen loads.
  • Use a short, conversational greeting that feels relevant to the time of day or the user's context where possible.
  • Keep the greeting copy to one to two lines to avoid overwhelming the empty state.

Don't

  • Don’t drop the legal disclaimer from the welcome screen.
  • Don’t update the placeholder text for the input field without discussing it with the Joule UX team.
  • Don’t create variations of any required visual or textual content. These need to stay consistent to help the user recognize Joule.

Anatomy

A. Joule Header

The header includes the welcome screen title ("Joule"), and the following control actions:

  • The menu button on the left to view the list of conversations
  • The "Close" button on the right to close the panel
  • The overflow button on the right for additional actions

B. Joule Icon Illustration

The Joule icon illustration is located below the header. The illustration is an animated branding element of the welcome screen.

C. Welcome Message

The welcome message is a streaming animation that types in as Joule is loading and remains on the welcome screen. It varies by the user's time zone.

D. Input Field

The input field allows the user to enter text input to communicate with Joule.

E. Persistent AI Notice

The persistent AI notice is a line of text that informs the user that Joule uses AI. The disclaimer is always visible. The full content can be found in the overflow menu in the header.

Welcome screen anatomy

Behavior and Interaction

When the user taps on the Joule icon in the shell bar header, Joule loads with a loading screen. Once loaded, the welcome screen appears and the keyboard opens to allow the user to begin typing.

The shell bar flow always opens Joule in the full panel size. The user can swipe down for a medium–size view.

Welcome screen in full-size Joule panel (left) and in medium-size Joule panel (right)

Once a user sends the first utterance, the Joule icon illustration and welcome message disappear. A timestamp is displayed that indicates when the first user utterance was sent.

Welcome screen interaction

Adaptive Design

The welcome screen is adaptive based on screen size and device.

Welcome screen in compact Joule panel (left) and regular Joule panel (right)

Variations

Full-Size Panel

The default welcome screen variant is the full-size panel. This variant is used when the welcome screen is loading. If the user were to swipe down, the welcome screen would change to a medium panel view.

Welcome screen in full-size Joule panel

Medium-Size Panel

The second variant of the welcome screen is the medium-size panel. If the user were to swipe down, the welcome screen would change to a medium panel view.

Welcome screen in medium-size Joule panel

Resources

Joule for Android: Welcome Screen