UI design

The UI model in Pega Platform™ provides flexibility to give developers the means to efficiently connect front-end components with back-end APIs. The UI layer in the Pega Platform architecture subscribes to the Principle of Separation of Concerns, which is the software design principle that encourages software modularity by stipulating that an application should be divided into distinct parts, where each part addresses a specific concern.

Effective business applications are intentionally designed to align with contemporary professional workflows and address real-world challenges. Key design elements, such as legible typography, concise language, and minimalistic visuals, support user requirements, enhance mobile accessibility, foster creativity, and facilitate seamless collaboration. Pega Platform integrates user experience (UX) design principles throughout. Each workspace is purposefully crafted to enable target users to participate in application development with ease and confidence.

Well-designed software adheres to four core UX design principles:

• User-centric
• Empathetic
• Engaging
• Process-driven

User-centric

User-centric design addresses technology and business challenges by prioritizing the perspective of individuals performing tasks with Pega tools. Effective design anticipates user actions and enables users to efficiently achieve their objectives.

Empathetic

Empathy is a fundamental component of the design process, enabling teams to understand and share the perspectives of users. Unlike sympathy, which merely expresses concern, empathy involves actively recognizing and addressing user needs. By applying empathetic principles, Pega Platform delivers solutions that effectively resolve real-world challenges. For instance, the intuitive features in Pega Platform demonstrate consideration for the developer, ensuring the platform's functionality is accessible and user-focused.

Engaging

Poor software design can result in exhausting, repetitive, and frustrating user experiences. This issue is particularly significant for enterprise users, who may interact with Pega Infinity products for extended periods each day. In contrast, well-designed interfaces maintain user engagement and enable individuals to focus on their tasks rather than navigating technology challenges. An engaging design fosters a positive user experience, which contributes to improved productivity and outcomes.

Process-driven

User-centric design follows a formal process that includes:

• Identifying user challenges through observation and empathy.
• Collaborating to ideate and refine solutions.
• Testing prototypes against performance metrics.
• Implementing the final design.

For example, David, a designer, and Petra, a product owner, observe CSRs using the Pega Customer Service™ application. David notes Cece, a CSR, has difficulty managing multiple customer chats at once. The team discuss improvements, such as visual cues for chat order based on wait time and customer value. Performance concerns are addressed, and the team agrees to use wait time as a metric to prioritize efficiency and develop solutions to test with users.

A pattern is a dependable solution to a recurring problem. In software, design patterns are tried-and-tested methods that streamline problem-solving. Pega Platform offers pre-existing, reusable patterns using combinations of components that address common business needs and enhance user experience. These patterns are scalable enterprise assets, allowing organizations to reuse and extend them across future projects, reducing effort.

Pega Platform uses prescribed design patterns with preset configurations. This allows developers to quickly create UI pages and flows by leveraging an out-of-the-box library of templates, patterns, and components optimized for application development. This prescribed approach separates business logic from presentation, enabling automatic UI updates when business rules change and supporting responsive design. Built-in patterns for forms, lists, dashboards, and Case management can be customized and extended, maintaining consistency and productivity across devices and channels.

Pega Platform addresses the unnecessary complexity and inconsistent UI with a UI model that you can use to author your applications with templates, Views, widgets, and components.

Template

A template is a generic rendering structure that presents data with visual style and interaction behavior. Templates help you to handle the layout and responsiveness of a View in order to provide an optimal experience for your users. For example, templates include breakpoints, white space management, and wrapping to ensure out-of-the-box compliance with the latest accessibility standards.

Template availability is based on the kind of View:

• You can select from multiple templates when creating a new Partial View.
• Form Views use the Default form template with the option to select a 1-, 2-, or 3-column layout.
• When first created, List Views default to the Table template and can be updated to a Table, Gallery or Timeline template.
• The Full Page View uses a default template with the ability to show selected information, such as utilities and summary information.

View

A View is a UI object that represents the combination of data and a template. To support efficient development, the system automatically generates a set of default Views such as Full Case View, Summary data, Details, Pulse, Preview, Edit, Create, and List.

In addition to customizing the default Views, you can create three types of Views depending on your business needs: List, Partial, and Form Views.

Widget

A widget is a preassembled View with a preset template and data requirements. Examples of widgets include the Attachments and My Worklist widgets. The repeating structure is based on a design template and requires data in a specific format.

Component

Components are reusable UI pieces, such as tables, controls, and containers that make up Views, templates, widgets, and other components. For example, the Utilities pane is a component that houses modular widgets to provide quick access to data or resources that support a user’s workflow at any time and in any part of the case. The Utilities pane is displayed on the right side of the Case View and is resuable in other Views.