Welcome Screen

Joule / Patterns / Welcome Screen

Intro

The welcome screen introduces users to Joule and assists with initial actions. Users can select from a range of capability starters that help them get started with their tasks.

The welcome screen appears the first time a user activates Joule, right after the loading screen. It also appears each time a conversation restarts.

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

Usage

Do

  • Welcome screen gradients should follow the same guidelines and should not be deviated.
  • Adapt the wrapping for the recommendation message component when it expands past the width. The component differs for default and full-screen versions. Please refer to the specs.
  • Use short and concise titles for the capability starters so that they are easy to read and provide the user with sufficient context about the capability, for example, “Create a position”, “Update pronoun”, “Delete requisition”.

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.
  • Don’t leave the capability starters wrapped in default sizing when in full-screen view. They should expand to take up the available space.
  • Don’t use more than five capability starters because it will overload the user with too many options. We recommend using three capability starters

Anatomy

A. Header

The panel header carries the name (Joule) and two icons for overflow and closing the panel.

B. Joule Icon Illustration

The Joule icon illustration is located below the header. The illustration is a static branding element of the welcome screen. It is a required element for the full-screen panel, but optional for a half-screen panel.

C. Welcome Message
  1. ‘Hello, First Name’
    The welcome message starts off with a personalized greeting.
    Example: Hello, Sara.
  2. ‘How can I help you?

The second part of the welcome message consists of a helpful prompt to let the user know that Joule is here to help.

D. Joule Text Messages

The text messages give an example of how to communicate with Joule and prompt the user to get started. The usage prompt helps the user get an idea of how to query Joule. The message is in the format “Talk to me naturally”, for example, “What are my tasks for today?”

“Talk to me naturally.” Keep consistent (do not change)
Default is “What are my tasks for today?” You can update to suit your business’s content.

E. Quick Replies (Optional)

Quick replies are custom, pre-written responses that a user can use to save time in messaging. LoBs should have their own custom quick replies that can be tailored to the user needs.

F. Input Field

The input field is where the user can enter their first query.

G. 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.

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)

When users tap on the input field, the top area is minimized and the keyboard pushes the input field up. The legal disclaimer disappears. Once a user sends the first utterance, the welcome message disappears. A timestamp is displayed that indicates when the first user utterance was sent. Once the top area is minimized, the layout remains without the top area, even if the user taps out of the input field without input entry.

Welcome screen interaction

Adaptive Design

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

Welcome screen in compact screen (left) and expanded screen (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

SAP Fiori for iOS: Welcome Screen