Coachmark: UX review

[RichKummer]

The goal of this step is to get familiar with the component/pattern as it exists today. You'll be reviewing the component across the docs, coded versions, and Figma kit. For this first step, keep in mind the goal of discovering if there are ways to make this component more flexible and composable. You don't need to answer these know, but think about:

• What options are there. Do you think there are any missing?
• If I were to add a Slot component from Figma, would that be useful to switch out other components?
• What existing elements might I want to switch out?

Tasks

• Review the existing component’s documentation
• Review the component in Storybook
• Review the component and its variants in the Figma kit
• Note areas where the component could be made more flexible but currently is not. Could we update certain existing components in this one? Add any new areas to bring in other components?
• Search the backlog for any issues related to that component. See any themes?
• Review difference between components and patterns docs on Core.
• Check out Product gallery in the website. What examples exist for this component? See how adopters are using the component. Would an adopter want it to be more flexible, and how?

[bndege2]

Coachmark: UX Review

Areas the Coachmark components could be made more flexible:

Additional use case identified in What’s new notification work:

• Coachmark without the beacon: Designers want to draw users' eye to an element in the UI but do not need the beacon, e.g., coachmark pointing to a button/icon.
• Coachmark without beacon open upon page load

Theming:
All Figma components should be updated with inverse theming. The contrast draws users' attention. (Refer to v10 components and use v11 theming.)

Sizing:
We currently only have one width size for coachmarks. Teams might need wider options. Below is an exploration of where the design needed a wider coachmark to display a gif.

---

Figma Kit Review:

See Figma Onboarding Update: Coachmark # 61

---

Storybook Review:

Rework how Coachmark components are coded:

Hardcoded Icons:
The idea icon on the collapsed fixed coachmark and fixed coachmark without image are currently hardcoded and do not allow designers the ability to swap it out for another. The Figma component would need to be updated as well for designers to swap out the icon.

Stepped Tooltip coachmark :
Designer question ibmproducts-pal slack channel:
Do you know whether Novice to Pro's Coachmark has been designed so that is can change its position upon moving between the steps (clicking 'Next') in its progress?

The current Stepped tooltip coachmark is not designed to change locations in the UI when a user moves between steps. This is an essential interaction for onboarding and product walkthroughs. Designers should have the option of using static tooltip coachmarks, and tooltip coachmarks that shifts around the UI.

---

Documentation Review:

Variant	Purpose
Stacked	Provides additional context to the main coachmark message.
Stacked (correction)	Specifically for fixed coachmark messages. We do not use a stacked coachmark on a tooltip coachmark or floating coachmark.

Re-triggering Coachmark:
Designer question ibmproducts-pal slack channel:
Wondering if theres a way to re-trigger the coachmarks from the page it self versus the learn pane. (When not using the purple pane - only coach marks) . Not everyone will intuitively know to trigger the learn pane to find these tours. Also, the tours will vary page by page.

• Currently, teams have no guidance on how to re-trigger a coachmark if they are not using the Assist Me panel.
• Guide banners are a solution, but is there another approach we could take here?

---

Product gallery:

Product gallery does not include the coachmark component. It might be one to consider adding

---

Carbon Design System:

The toggletip documentation on Core has a related section. Similar to the coachmark, the toggletip also has interactive elements, and visually looks very similar. What sets them apart is the trigger and intent. Is it worth mentioning the Coachmark here and linking out to further guidance on the Carbon for IBM products documentation?