Constellation and User Experience
Universal pain points related to user experience exist across industries undergoing digital transformation. The interface, through which users, including customers and staff, interact with the solution, can make or break adoption and success. In the following video, several U+ Bank stakeholders, including the Service Leader, a Branch Manager, and the Chief Digital Officer, share some of these common challenges that affect customer experience, staff experience, and impact business outcomes:
Designing for multiple personas
The Solution Designer explains how Pega approaches user experience design: "We're not designing one interface; we're designing different experiences for different personas, each optimized for their specific needs and context."
The Solution Designer identifies three distinct personas for U+ Bank's customer onboarding solution:
Persona 1: The Customer
Needs a clean, simple, mobile-friendly interface for applying online. Values clarity about progress and next steps. Wants to start on one device and continue on another seamlessly.
Persona 2: The Branch Banker
Needs an efficient workspace with quick access to customer information, application status, and tools to assist customers. Values speed and contextual information - everything needed for the conversation right at their fingertips.
Persona 3: The Back-Office Processor
Needs a workspace optimized for reviewing multiple applications, identifying issues, and taking bulk actions. Values efficiency in working through queues and seeing exception highlights.
In Pega Blueprint™, the Solution Designer defines which Case Types, data attributes and Channels are visible to each Persona. The customer-facing application emphasizes simplicity and guidance. The branch banker workspace provides a unified view of customer information, application status, and action buttons for common tasks. The processor workspace shows queue management and batch operations.
Note: However, these are design previews, showing stakeholders what's possible. The actual UI implementation occurs later, when the Solution Builder takes the Blueprint and creates detailed screens using Constellation's standardized components in App Studio or Dev Studio, where they precisely determine how each element is displayed and functions.
The following animated figure shows an example of how Blueprint can showcase the same Case from the perspective of various Personas:
Constellation as the foundation of the UI
Pega Constellation™ is Pega's design system that ensures user interfaces are modern, accessible, and consistent:
- The application will look professional without custom design work.
- It will work seamlessly across devices, with a responsive design built in.
- It will be accessible to users with disabilities, meeting Web Content Accessibility Guidelines (WCAG) standards.
- It will perform well with optimized loading and rendering.
In the following video, the Solution Designer describes Constellation to the Branch Manager by highlighting the benefits and how Constellation relates to the collaboration that occurs in Blueprint:
In the following image, click the + icons to learn more about the Constellation user interface:
Preview and stakeholder validation
Pega Blueprint contains a preview capability that is invaluable during stakeholder reviews. With a click, Blueprint generates an interactive preview of the application. Stakeholders can see the customer journey, test the flow, and experience the interface before any implementation begins.
The following video shows the power of this preview feature; the Solution Designer can show the U+ Bank stakeholders not only what the application will look like, but also make requested changes in Blueprint immediately, so stakeholders can see the update in real time.
The Solution Designer uses a preview to showcase Constellation's responsive design capabilities, demonstrating how Constellation will automatically adapt the user interface from desktop to mobile, without requiring separate interfaces for each channel or device.
This iterative design process, enabled by Blueprint's preview feature, means that stakeholders approve the direction with confidence before the Solution Builder begins implementation on their Pega application.
The Pega connection
The Solution Designer knows that designing user experience in Blueprint becomes real when Solution Builders implement these designs in Pega applications using Constellation. They are not creating mock-ups that developers will then recreate; the Blueprint they are designing informs exactly what is possible without guesswork.
This understanding enables efficient design. The Solution Designer knows:
- Which built-in components, such as forms, tables, cards, panes, navigation, and charts, are already accessible and responsive.
- Responsive design occurs automatically when standard components are used.
- Most scenarios work with standard components.
- Pega Platform™ configurations enable sophisticated experiences: Data Pages, real-time calculations, conditional logic, workflow-driven interfaces, and personalized dashboards.
- The Solution Designer focuses on information architecture and workflow rather than reinventing UI patterns.
Designing for conversations with Solution Builders
Understanding Constellation's abilities, what's possible compared to what requires custom development, means that Solution Builders implement exactly what was designed without guessing or backtracking.
The Solution Designer can point to the Blueprint design: "Yes, I've designed the customer interface to show real-time progress. Yes, we should show dynamic form validation. Should there be a save-and-exit feature? The Solution Builder can implement this using Constellation's standardized components in App Studio, and I've added notes in the workflow shapes about the specific user experience requirements."
This level of detail in Blueprint, which is enabled by understanding Constellation's abilities, means that Solution Builders can implement exactly what was designed without having to go back to square one.
User experience as a competitive advantage
U+ Bank's stakeholders see how thoughtful UI design addresses their pain points. The Service Leader sees a customer interface that's clear and mobile-friendly, reducing abandonment. The Branch Manager sees a unified workspace that makes staff more efficient. The Chief Digital Officer sees a modern experience that competes with digital-first banks.
In the following image, click the + icons to learn more about the competitive advantage aspects of Pega's User Experience capability:
The Solution Designer has used Blueprint to design not only what the solution does, but also provides a basic preview of how it will feel to use for customers, staff, and processors. This holistic view of user experience, grounded in Constellation's features, is what makes Blueprint such a powerful tool for Solution Designers. After stakeholders approve the Blueprint, the Solution Builder takes this high-fidelity design and implements it in Pega Platform, bringing the vision to life in production.
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?