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. Case pages have a guided and prescribed structure to optimize work, review, and collaboration in record time. Use your storyboards and design thinking work to flesh out the key data on this page.
A case page has three main regions: the Summary Panel, Activity Area, and Utility Panel. Each region has its unique function and purpose and may contain other components within it.
In the following image, click the + icons to learn more about each region.
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 illustrates a checklist for designing a typical information architecture from the perspective of a UX/UI designer. In this example, the designer is aware of the key sections that need to be targeted 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 its creation be reserved 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 of key information? Are your titles short? |
Working with your LSA: This exercise should be part of your case architecture plan with your LSA. All forms, tasks, stages, and steps should have determined during your initial prototyping exercises. Review the following key task considerations: |
Widgets: Do you need to show attachments or the current users following the case? |
|
Locking: How should your case react when more than one user has it open? (Work with your LSA to determine the right choice on this one) |
Case ID pattern: Which short, yet unique prefix should your case's ID use? (for example, USER-123 where USER is the prefix) |
Content: Are the tabs needed one of the following: Pulse, Details, a List, or Persona-specific data? |
Task: Does this task need to be fully completed in one sitting? (Use a single form) | |
|
Searchable: Does this case type need to be discoverable through global search? |
Case hierarchy: Is this case type a child of another case type? |
Task: Does this task need to be worked on as a collection of data? (Use a multi-step form) | ||
|
Header title: Which unique name should your case types use to differentiate it? |
||||
|
Case actions: Which case-wide actions are critical to include, such as deadline adjustments, resolving cases, or transferring tasks? |
||||
|
Summary data: Which few pieces of information are the most critical for all users to see at all times? Are some more important than others? |
Note: Keeping track of persona-specific needs or ordering of data is a helpful best practice. A large deviation between the needs of multiple user personas is a sign that you may 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.
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?