First-time Orientation pattern 🏖️

[ljcarot]

First-time Orientation pattern

As a designer and/or developer focused on my product's PLG improvements, I want to create within my product, a First-time Orientation experience that highlights for a new user how to get started using my product with the goal to help the user reach an aha moment(s).

Design spec:

Other links: Prototype

Guidance for website

Additional notes from meetings

Design Maintainer(s)

• Cameron Calder
• Bridget Ndege

Tasks

Before starting work on this epic, please review and complete the following.

• [x] Initial review of design/existing code

Working in Carbon for IBM Products package

• [x] Have you reviewed our contribution guidelines?
• [x] Have you noted our code guidelines?
• [x] Did you use the CLI to scaffold your new component?

### Tasks
- [x] Review gradient composition - deeper dive with smaller team
- [x] Review for a11y on CAG - Gower gave thumbs up
- [x] https://github.com/carbon-design-system/ibm-products/issues/4681
- [x] Ready for refinement and sizing with dev
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4809
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4683
- [ ] https://github.com/carbon-design-system/carbon/issues/16305
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5233
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4982
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4810
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5040
- [x] First-time Orientation: Comms for announcing new pattern
- [ ] Get Started: Code Recipe for building Get Started Pattern

[sstrubberg]

Pattern name change (May 28), per Cameron Calder

Get Started -> First-time Orientation

[sstrubberg]

Should Onboarding be in our Guidelines section?

What's the breakdown?

Guideline = Onboarding. Guidance for onboarding a user anywhere in their product journey (trial, first time, 3 months in)

Patterns = 5 total patterns under "Onboarding", each pattern uses one or more of the "onboarding components" to create the pattern. They could also utilize core components.

1. First time orientation. (Vertical tabs + Get started cards + interstitial + AssistMe panel)
2. Guided paths
3. Just in time activation
4. Just in case access
5. Courses and modules

Components = Pieces that make up the 5 patterns.

1. Checklist
2. Coachmark
3. Get started card
4. Guide banner
5. Inline tip
6. Interstitial
7. Nonlinear reading

---

Additional things to consider

WalkMe components = Native components to WalkMe that we have skinned to look like Carbon. These are specifically components that overlay on top of the Product UI

• Launcher (button)
• SmartTip (tool tip)
• ShoutOut (modal?)
• Smart walk through (tool tip?)

Assist me =

• Assist me panel

What Components are in Core and what Components are Product PAL