Cosmos case page structure for designers
Case page structure overview
In Pega Platform™, the design of your case page is critical to the success of your application. You must create case pages that have a guided and prescribed structure to optimize work, review, and collaboration in record time. Use your storyboards and insight from the design thinking process to determine the key data on this page.
A case page has three main regions:
- Summary Panel
- Activity Area
- Utility Panel
Each region has its unique function and purpose and might contain other components.
To learn more about each region, in the following image, click the + icons.
Case Preview and Case Preview header
The Case Preview is a transient drawer that can be opened through any link’s optional Actions. It shows an overview of key data on a case and provides fast actions.
The Case Preview is visually very similar to both the Summary Panel and the 500px case view. Additionally, Case Preview only accessible above the 500px breakpoint/screen size.
The Case Preview Header automatically uses the case’s header information. However, the Case Preview initially begins on the Overview tab.
Example template for information architecture
The following template shows a checklist for designing a typical information architecture from the perspective of a UX/UI designer. In this example, the designer knows the key sections to target for any case page and has identified questions to ask at each point. Use this template as a guide or checklist to help provide the best possible experience for your users.
| General | Summary Panel | Tabs, Tab pages | Stages, Steps/Tasks | Utilities |
|---|---|---|---|---|
|
Creation method: Can users create this case from the add menu or should they reserve its creation for another workflow? |
Case type icon: Which unique Cosmos-supplied icon does your case type use? |
Titles: Does your case use the default tabs of Pulse and Details? Do you need additional tabs for key information? Are your titles short? |
Working with your LSA: Make this exercise part of your case architecture plan with your LSA. Determine forms, tasks, stages, and steps during your initial prototyping exercises. Review the following key task considerations: |
Widgets: Do you need to show attachments, related cases, stakeholders, tags, or the current users following the case? |
|
Locking: How should your case react when multiple users have it open? (Work with your LSA to determine the right choice on this one.) |
Header title: Which unique name should your case types use to differentiate it? |
Content: Do you need to include any of the following as a tab: Pulse, details, a list, insights, or persona-specific data? |
Task: Does the user need to fully complete this task in one sitting? (Use a single form.) | |
|
Searchable: Do you need to make this case type discoverable through global search? |
Case ID pattern: Which short, yet unique, prefix should your case ID use, for example, USER-123, where USER is the prefix? |
Task: Do you need to work on this task as a collection of data? (Use a multi-step form.) | ||
|
Case hierarchy: Is this case type a child of another case type? |
||||
|
Case actions: Which case-wide actions, such ad deadline adjustments, resolving cases, or transferring tasks, are critical to include? |
||||
|
Summary data: Which few pieces of information are the most critical for users to see at all times? Are some pieces more important than others? |
Note: Tracking persona-specific needs or ordering data is a helpful best practice. A large deviation among the needs of multiple user personas means that you might need to speak with your LSA about creating an additional channel in your application for that user persona.
Check your knowledge with the following interaction.
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?