Page templates

The Pega Cosmos design system offers baseline page templates out-of-the-box (OOTB). These prescribed templates were designed with good UX in mind, showing important information to users at-a-glance. As a result, users are more productive and designers spend their time on critical UX needs instead of redesigning the basics.

Cosmos uses templates for key pages, such as home pages, landing pages, and list pages. The Cosmos case page, a core page of users’ workflows, is also displayed using a template.

Below are examples of the types of templates found within Cosmos:

Pega case page template

Users will use the case page to complete work actions and access important information related to a case. The case page is made up of a template with three parts, or sub-templates:

  • Summary panel - displays an overview of the most important data and contains the case’s primary tabs
  • Work area - the area where most of the case activity occurs
  • Utility panel - contains relevant attachments, team info, and other critical tools

Summary panel template

Summary panel

The summary panel contains 4 primary regions:

The header is used to convey the most important information about the case, at a glance. It includes the following information:

  • The case (or work item) icon that is shared across all similar work (e.g., a claim icon for all claims work)
  • The unique ID of the case or work item
  • The title of the case or work item
  • Any quick action(s) for that item (the follow action is default)

The action bar lists the most important actions or steps to take on the current case or work item. It includes the following:

  • One or two primary or common actions to take
  • The Actions menu, which shows all the additional, custom, or out-of-the-box actions that a user may take on the work

Summary data shows the most important data required to understand the case or piece of work quickly and across all contexts. Summary data may include:

  • A list of generic or topical updates (e.g., last updated, status, etc.)
  • Core information unique to the case or work (e.g., if working with a medical insurance application – a member filing claim, specific injury, etc.)

The designer may decide the order of items and total number of items shown. We recommend including under 10 data items, in order to avoid a busy UI.

Tabs house critical pieces of data that allow users to complete their work. Examples of tabs include:

Tabs house critical pieces of data that allow users to complete their work. Examples of tabs include:

  • The Pulse tab – This tab is listed first, by default. It includes full chat conversations and important milestones in the case or work item (and may add details or context in a way that standard data fields cannot).
  • The details tab includes additional information that is not already provided in the summary.
  • Custom tabs – these are generally reserved for several types of data:
    • Child cases: Used to reveal a full list of dependencies, children, and other relationships between data. These are typically used for robust lists of data that must be displayed in entirety or in tables (for comparison).
    • Insights: Used to visualize data that reveals trend

Activity area

The work area contains the main interactions and activities that the user must do to act on their work. It contains the following:

  • Case lifecycle, also known as stages
  • Tasks, which include the work-to-be done items, or assignments
  • Tab panel content such as case details, the Pulse feed, or lists of cases

Utility panel

The utility panel template appears as an expandable and collapsible region to provide quick access to information that may be relevant to the user.

The utility panel is an optional part of a case; if a designer chooses no utilities for a case, it will not be presented. Rarely, the utility panel may have more than one tab of content. The utility panel contains the following regions:

The Utility Panel is an optional part of a case; if a designer chooses no utilities for a case, it will not be presented. Rarely, the Utility Panel may have more than one tab of content. It contains the following regions:

  • Expand/collapse toggle
  • Tabs (if any)
  • Utility area, containing common utilities such as files & documents, followers, related cases (for showing relationships to other work items within the system), and stakeholders. Typically a few options are shown with the ability to add, edit, and review all assets in a modal window.

List page template

List page template

Every case has a list page view available to view sets of information, such as contacts, businesses, investigations, or interactions. This templated view provides a quick and easy way to see and sort all similar content types quickly.

One powerful feature of the list template is the ability to set one or more custom views of the data. You can filter, group, sort, and hide columns of data to help users see the data they need when they need it.

Users can create their own custom views of the data as well.

Landing page template

Landing page template

Landing pages allow for unique layouts of content and data. However, landing pages must be created ad-hoc per use case. Privacy policies or overviews of specific data are some examples where landing page templates would be appropriate to use.

Use landing pages sparingly, as they must each be individually created and maintained.

Home page template

Home page template

A home page is a landing page or a static page that includes any of our default widgets, custom data insights, or views of data to help perfect your end users’ workflow. This page must provide the most relevant just-in-time information.

You can use the home page template to inform users of critical information, such as app updates or information needed to begin their workday:

  • The home page can supply an overview of all work to be done by the user, or if the right permissions are enabled, by their team.
  • The app announcement widget within the home page can highlight any new application updates by default.
  • A unified Pulse stream on the page can keep users updated on any conversation from the items users are involved with or follow.