Landing pages

YES
Users will repeat this action beyond Day0 (ie. a user might want to ‘Create cluster’ even after their Day0 experience, so we can keep this high level action in the header at all times)

NO
Once users do this action once, and then their journey will look different beyond Day0

RECOMMENDATION

RECOMMENDATION

Use the ‘With button’ variant of the landing page header symbol. This header should have these elements …

1.  Name of service 
2.  A 1-2 sentence ‘elevator pitch’ of your service should go here to help set context of page.
3.  A ‘Learn more’ link that should open a new tab to provide more context for what the service is. We recommend having this URL destination be one of the RH websites (ie. related product page on developers.redhat.com or redhat.com)
4.  High level main action that can be repeated beyond Day0. Use the CTA style button.

Example

Use the ‘Basic’ variant of the landing page header symbol. This header should have these elements …

1.  Name of service 
2.  A 1-2 sentence ‘elevator pitch’ of your service should go here to help set context of page.
3.  A ‘Learn more’ link that should open a new tab to provide more context for what the service is. We recommend having this URL destination be one of the RH websites (ie. related product page on developers.redhat.com or redhat.com)

Example

1 main way to get started

2 main ways to get started

3+ ways to get started

RECOMMENDATION

RECOMMENDATION

RECOMMENDATION

Create a full-width card with …

1. ‘Get started with <Service Name>'
2. Body copy to help the user gain context of what the main action is, 
3. A blue marketing style CTA, and 
4. A right-aligned spot illustration (be intentional with these images -- don’t use anything too general)

Example

Do side by side, 2-card layout. The actions should use the blue outline marketing style CTA style (or one filled in blue style if it is recommended). Use icons that indicate which CTA is a:

• (we provide) Trial
• Connects to existing subscription
• Kicking off a process that doesn’t require a subscription (cuz you already registered systems or you can create an instance of something free like a cluster)

Example

We suggest that you collaborate with your PMs to determine 1-2 main actions so that we can take an opinionated stance on the best way to get started.

Other possible ways to get started can be detailed in the 'Features / use cases' section.

YES
Users should be able to access pricing if needed.

NO
There isn't any reason to show pricing / there is no pricing info

RECOMMENDATION

Use the hint pattern to give ~1 sentence of context and link out to a marketing page that has pricing. 

Example

RECOMMENDATION

Don't include this in your design - move onto the next section.

YES
I have things to populate in this section

Sort of
I have one or two items that could go in this section, but not much

NO
This service is very small, new, or otherwise a bit unknown to us -- we do not have these things flushed out enough to surface to the user

RECOMMENDATION

Create a full-width accordion with icons in the toggle headers (this variant has been requested to PatternFly - view the GitHub issue). Each use case / benefit / feature should have it's own accordion section, with the following information:

1.  Relevant icon
2.  "<Use case or benefit>" in the header
3.  Description of the use case, feature, benefit, etc. and a ‘Learn more’ link that goes out to other RH website to describe it more.
4.  (Optional) If there is a relevant action that a user could take to actually DO something (not just learn more) with a given feature / benefit /use case, you can include this in the far right of its toggle header. 

Example

RECOMMENDATION

Create a 50% width accordion with your 1-2 items (in same style as the previous column) AND a 50% width static card with this content:

1.  "About <Service name>" in the card  header
2.  A ~1 paragraph detailed description of what the service provides. See the ‘About’ copy example below for inspiration.

Arrange the accordion and the card such the the accordion is on the left and the card next to it on the right. 

Example

RECOMMENDATION

Create a full-width accordion with just one accordion item in it. Use a relevant icon in the toggle header (this variant has been requested to PatternFly - view the GitHub issue) that has this content:

1.  Relevant icon
2.  "About <Service name>" in the toggle header
3.  A ~1 paragraph detailed description of what the service provides. See the ‘About’ copy example below for inspiration.

Example

1 piece of learning content

2+ pieces of learning content

RECOMMENDATION

Create a full-width card with the following content:

1.  “Recommended content” as the card title with font size 20
2.  <Title of learning item> with font size 16 (medium, not regular weight)
3. 1-3 sentences to ‘preview’ to the user what this piece of learning content will teach them and why it is valuable to them.
4. Arrow link to interact with the learning item (ie. ‘Begin Quick start’, ‘Read the documentation’, etc.), that opens any external URLs in a new tab and directly moves user to the learning item if it is internal to console (ie. Quick starts) 

Example

RECOMMENDATION

Start with a section header that says “Recommended content” at font size 20

Then create a three-column table with the following content:

1.  <Title of learning item> with font size 16 (medium, not regular weight)
2.  A label with the content type
   1.  Documentation (orange)
   2.  Quick starts (green)
   3.  Learning paths (cyan)
   4.  Other content types (purple)
3.  An action-oriented link (ie. ‘Begin Quick start’, ‘Read the documentation’, etc.), that opens any external URLs in a new tab and directly moves user to the learning item if it is internal to console (ie. Quick starts)

Example