Service landing pages
Design type: Navigation, Onboarding | Product area: Hybrid Cloud Console
Author: Mary Shakshober
Last edit: July 11, 2023
About landing pages
What is a landing page?
In the perspective of ConsoleDot, a ‘landing page’ is a top level page that provides high level information, context, and actions related to more detailed pages. Landing pages can occur at various levels of the console information architecture (in this case, navigation sections), but so far we only have formalized documentation on ‘service’ level landing pages. We define a service broadly as a discrete group of functions that work together to help the user achieve outcomes. Examples: Insights Advisor; OpenShift Clusters; Hybrid Cloud Console User Access.
In general, service level landing pages should orient the user by answering:
- What is this group of functionality that I've navigated to? What outcomes and use cases does it help me (the user) address?
- How do I get started using it? Are there prerequisites?
- Are there ways I can learn more about all the things that this service can do for me?
Landing pages will most often be dynamic because they will change what content they show once the user has configured the service and begun using it. We refer to the orientation state of the landing page as the “day 0” page. We refer to the landing page state that appears after that as the “day 1” page (which will often become a dashboard showing how the service is operating).
Levels of landing pages can include (in order of highest level to most narrowed focus)…
- ConsoleDot landing page
- Bundle landing pages, for example …
- Service overview pages (what this documentation is for), for example …
- Maybe others in the future!
Elements of a day 0 service-level landings page
- Header section
- Tabs section (only use if necessary)
- CTA section
- Pricing section (only use if necessary)
- Benefits / use case section / about section
- Recommended content section
Related links
- Landing page sketch template. Get the template.
- ‘Add as library’ > [In Sketch app] Add > Templates > ConsoleDot-DesignTemplate > Service landing page > [Choose which works for you]
- ‘Gold star’ examples’. See the examples.
1. Header section
Is the main call to action persistent after Day 0? | |
---|---|
YES | NO |
RECOMMENDATION | RECOMMENDATION |
Use the ‘With button’ variant of the landing page header symbol. This header should have these elements …
Example ![]() | Use the ‘Basic’ variant of the landing page header symbol. This header should have these elements …
Example ![]() |
2. Tabs section (only if needed)
Show a tab only when your page transitions to day 1; put the overview content (still relevant day 0 stuff) on a tab called “Overview.” (will explore more in Day 1).

3. CTA section
Make most important CTAs prominent. Use the marketing CTA button for the 1 or 2 prominent CTAs. Try to avoid showing every possible way to get started with your services on this day 0. (too much noise, too many bold buttons).
Include a prerequisite that transitions to a CTA when the prereq is done. If you can’t do that, show a sequence of steps. For example:
Prerequisite: register your platform or system or whatever with console
How many ways do you want to recommend that a user gets started? | ||
---|---|---|
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 …
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:
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. |
4. Pricing section (only if needed)
Is it imperative that users be able to access pricing information for your service? | |
---|---|
YES | NO |
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. |
5. Benefits / Use cases / About section
This section can contain several things. This section can detail things like …
- Key features of the service
- Other possible actions (beyond the main CTAs) that a user might want to take
- Important structures in your service’s architecture to understand
- Use cases for your service
The display of this section should be consistent though, using an expandable list with the first list item defaulting to being in its expanded state. Use the presentation table below to determine how you should present the content that you have available.
Do you have any key use cases, features, important structures, or additional important actions that a user could take (beyond the main CTAs)? | ||
---|---|---|
YES | Sort of | NO |
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:
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:
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:
Example ![]() |
Example ‘About’ copy:
Instead of this:
Red Hat Advanced Cluster Security for Kubernetes is the pioneering Kubernetes-native security platform, equipping organizations to more securely build, deploy, and run cloud-native applications anywhere.
Lowering cost?
(uses sales oriented words like pioneering, is a high level description)
Try this:
Red Hat Advanced Cluster Security (ACS) improves the security of the application build process, protects the application platform and configurations, detects runtime issues and facilitates response. It is a Kubernetes-native security platform that empowers organizations to securely build, deploy, and run cloud-native applications. ACS helps protect containerized Kubernetes workloads in all major clouds and hybrid platforms.
6. Recommended content section
How many helpful resources does your service have? | |
---|---|
1 piece of learning content | 2+ pieces of learning content |
RECOMMENDATION Create a full-width card with the following content:
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:
Example ![]() |