Welcome Screen
Joule / Patterns / Welcome Screen
Intro
The welcome screen introduces users to Joule and assists with initial actions by offering a range of capability starters to help them begin their tasks efficiently. It appears the first time a user activates Joule, right after the loading screen, and 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 menu icon button that navigates users to the conversation menu, the title (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
C.1 ‘Hello, First Name’
The welcome message starts off with a personalized greeting.
Example: Hello, Sara.
C.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?”
The default text message 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
Welcome screen in full-size Joule panel
Medium-Size Panel
Welcome screen in medium-size Joule panel