UI design with the Pega Constellation design system

Cosmos is a replacement for Pega's previous generation of the design system, the Pega UI-Kit. Both improve the experiences of our client’s employees and focus on production applications. Still, the Cosmos design system goes further than UI-Kit, providing a complete presentation layer composed of a collection of perfectly implemented components that support accessibility and localization out of the box.

The Pega Cosmos design system helps teams quickly achieve ideal user experiences in their business applications by providing a prescriptive, consistent, intuitive, and easy-to-understand user interface. Pega Cosmos clients are built on the REACT Web-Standard and use the Pega Developer Experience (DX) API to interact with the Pega server providing an open and modular API-based architecture.  Pega Cosmos offers a separation of concerns (SOC) between the business and presentation logic.

This diagram illustrates how the different parts of Cosmos represent a Model View Controller (MVC) architecture. React components are the view in MVC. Constellation, the runtime orchestration layer, is the Controller in MVC.  The Pega Server or Pega Engine is the Model in MVC.

The Pega Cosmos design system is built for and around AI, case-management, and collaboration and is tested against enterprise-specific metrics. Get fast business results using Pega’s out-of-the-box experiences. The Cosmos design system is a library of UX patterns rendered as a building kit that supports Pega Express and Center-Out methodologies.

The Pega Cosmos UX framework specializes in three distinct experiences: for developers building low-code applications, for business users managing daily workflows, and for clients with whom you directly engage.

Cosmos is a complete App Studio-configurable (low-code) front-end system for app builders. Pega Cosmos provides an entire professional presentation layer with information architecture, interactions, and proper accessibility. It is a complete UX toolkit for the needs of large organizations and built around the use-cases of case management applications.

Cosmos can render in four distinct technologies: Traditional Pega UI, iOS, Android, and React. Please note that Cosmos React UI will be available in Pega v8.6 for Production systems.

Benefits of Cosmos design, a new way to do work:

• Improve work performance
• Better object relationship experience
• AI integrated into the experience
• Better user experience when using internal collaboration tools
• Respond to the growing sizes of monitors or devices

By design, there is only one User Portal in Theme-Cosmos. The User Portal landing page is broadly divided into three parts:

• Summary Panel - includes object metadata, object data, related objects. 
• Work area -  includes lifecycle tasks, ad-hoc tasks, suggested tasks (via AI), collaboration, completed tasks. 
• Widgets – includes participants, utility, attachments, quotes, partners. 

For more information on how to customize Cosmos UI, see Customizing a Cosmos Rules application.

UI-Kit and Cosmos are two entirely different design systems.  As with migration between any design systems, migration is a development effort, and the level of effort depends on the complexity of the application. 

• Understanding the level of effort
• Approaches and tips for migration
• Best practices

Understanding level of effort

The level of effort depends on:

• Number of case types
• Number of overridden rules from UI-Kit
• Skin overrides and custom Skin formats
• Use of Skin formats that do not exist in Cosmos skin
• Section rule considerations:
  • Amount of overridden sections from UI-Kit
  • Sections not based on design templates
  • Sections helper classes for styling
  • Non compatible custom Sections / HTMLs / Controls

Approaches and tips for migration

For detailed step-by-step instructions on migrating an application built on UI-Kit to Cosmos UI, see Migrating an existing application from UI-Kit to Cosmos UI.

Best practices

To prepare for Cosmos UI migration, engage in the following best practices.

Learn how to design applications in Cosmos

1. Articulate the main objectives of the application. 
   Cut through industry jargon and terminology and describe as simply as possible the main objectives of the application. This concept is tied to the Pega Express™ methodology. 
2. Identify real business objects and where they go in the Cosmos system.
   You need to identify what data is required, where that data goes, and how it needs to be accessed from the UI.
3. Walk through a concrete example use case.
   You need to identify what actions, work, and activities need to be performed and where to complete them.  Also, identify how AI, collaboration, and navigation works within the system.

Once you have identified these three items, it becomes much easier to design within the Cosmos system.

Compliance with the Case Designer

Use the Case Designer to configure your case types to employ seamless case and sub-case relationships. Use the App Studio Data Designer to manage data relationships.

Design template-based UI

Cosmos takes full use of templating, as it is a completely templated system. Moving to design templates in your apps now helps in moving to Cosmos later. 

Avoid custom HTML, custom controls, and custom sections

Apps built in older releases of Pega still have many custom components built using JSP or other technologies. Those components cannot work within a React-based UI. It is best to use out-of-the-box controls instead, which have out-of-the-box React equivalents.

For additional details on Pega’s UI and UX approach, see the UI/UX excellence webinar.