Interstitial: 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?

[susanacr2]

Working Figma file

[susanacr2]

Met with Tyler Watson yesterday, his team in App Modernization have used the Interstitial for a user to learn the features of the product.

Use of Interstitial

• 4 steps
• Leveraging an animation as he believes it increases engagement.
• Believes the Interstitial is a good way to introduce both the blend of IBM's brand and the Product
• Lollie is hard to use and to understand the workflow. He found a way around it by creating a mp4 and compressing it.

Feedback provided:

• The progress indicator does not expand to the end, which visually he would recommend.
• Limit the amount of steps a user can add.
• There could be an optional description area text to provide more context of what the purpose is.
• The paragraph could have a character limit so it isn't too dense.
• The paragraph can become too wide, making the lines appear really long when it is on a full screen.
• The Media could have more room to be more engaging.
• Provide more guidance on how to implement an animation.
• Current guidance for media is to make it on Lollie or illustrations. Pain points: Lollie is too complicated to use, developers are also not familiar with it. Illustrations are too broad on what should be used. It would be great to know what illustration is most successful for each case. E.g. for his needs, it is easier to animate flat style. We could recommend images.
• Note: By using the story book, clicking next makes the screens slide rather than appear. This breaks the flow of the animation.

[susanacr2]

Portfolio_01.mp4

[susanacr2]

Meeting with Melissa Fernandes and Maksim Halubouski on Tuesday to discuss their experience with the Interstitial on Cloud Pak for Data.

[susanacr2]

Meeting with Micheal Douglas on Monday to hear about his experience working with the interstitial for Security.

[susanacr2]

I met with Micheal from GDSC and got some context about his experience with both the Interstitial and the Get started patterns.

Topic Discussed: How he had to rework the Interstitial as the current pattern isn't transitioning well into the Get started pattern.

Reasoning: The layout of the current Interstitial seems disconnected when the user lands on the product.

Context: For his use case there are two users, the tenant/admin and the user. He is focused on the tenant experience where a user is mainly setting the permissions, turning things on and off –doing the installing. It should be quick to get the user straight into the product where then, he can do the configurations leveraging something similarly to the get started pattern. (He has made some adjustments to it).

Inspired by Turbonomic's onboarding, Micheal explored how to leverage the interstitial (with some customizations) as it felt more natural. He learned that doing some of the configuring such as adding users, does not belong in this flow as it can get quite long and messy for a user. Therefore, he is an advocate for having quick steps, in his flow, only 2 to get the user set up and then continue the experience on he lands into the product.

Can the Interstitial still be used as personalization? Yes, the tenant can do what was described above. The user, can still come here and select what they want to do with the product and some might also have access to set up the product as well.

Get started pattern: There was some feedback received about the Getting started pattern, including having empty states labels such as "No users, no databases" rather than checkboxes. These can be overwhelming for the user and the user can come and do them as they wish.

Customizations:

• Vertical progress indicator
• Tiles: adding a stroke to them (user can select one or more)
• Side links
• Side extra information/support about the use cases
• Loading
• Extension of Progress Indicator in V2.

Files shared:

• Admin onboarding experience v1:
• Admin onboarding experience v2: Shows how the configuring should not be part of the Interstitial.
• Admin onboarding experience v3