UI design with the Pega Constellation design system

The Pega Constellation 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. Constellation clients are built on the REACT Web-Standard and use the Pega Digital Experience (DX) API to interact with the Pega server, to provide an open and modular API-based architecture. Constellation offers a separation of concerns (SOC) between the business and presentation logic.

The following figure shows how the different parts of Constellation represent a Model View Controller (MVC) architecture. React components provide views in MVC. Constellation, the runtime orchestration layer and replacement for Cosmos in Pega Platform version 8.8, is the Controller in MVC. The Pega Server, or Pega Engine, is the Model in MVC.

The Pega Constellation design system is built for and around AI, case-management, and collaboration, and is tested using enterprise-specific metrics. Constellation is a library of UX patterns that form a 'building kit' that supports our Pega Express and Center-Out methodologies.

The Pega Constellation design system offers three distinct experiences: for developers building low-code applications, for business users managing daily workflows, and for clients with whom you directly engage.

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

Constellation can render in four distinct technologies: Traditional Pega UI, iOS, Android, and React. 

Benefits of the Pega Constellation design system:

• Improved work performance
• Better object relationship experience
• AI integrated into the experience
• Better user experience when using internal collaboration tools
• Responsive to to the increasing sizes of monitors and other display devices

By design, there is only one User Portal (Constellation is the implementation of the Pega Constellation design system that uses section-based UI, and is preferred for complex applications that require highly specialized features, such as offline mobile). The User Portal landing page is broadly divided into three parts:

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