Last Update: Sep 15, 2022
Platform: Mobile
Designer: Joy Liu
Intro
The Goal Card is a card to show the most important fields of a single performance or development goal. It will show the goal name/due date/completion/status/linked information in an organized way of different priorities. User can easily get the current goal tracking information from goal card, and can easily focus on the on track/behind goals.
Note: The Goal Card is designed based on b1911 CPM Activity Card. Because Goals and CPM are both Talent modules. We want to share the same experience. The Goal Card has different fields than Activity Cards, but we share the same pattern.
Usage
Use the pattern if:
- You need to show a summary key info with the most important fields of a business object like: Goal, Activity.
- The fields/data have different priorities.
- The Title/info are short and easy to read.
Do not use the pattern if:
- You need to show a list of info.
- You have many fields to show and no priority for the fields.
Types
Structure & Components
Behavior & Interaction
Responsiveness & Adaptiveness
Auto fit screen: Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.
Application-specific examples
Goal Cards are in use in the modules for Goals Management and Continuous Performance Management: https://www.figma.com/file/C8UouCYTNJEhsaykwTQbUH/Goal-FN-Component?type=design&node-id=405-36327&mode=design&t=8ua33AGvCAGN5dxM-4
Accessibility
The Goal Card component was reviewed within the A11y assessment for Goal Management: https://www.figma.com/file/Za9Bm7tW3nx0Uo506vUl19/UXR_Goals_B2311_iOS_JL?type=design&node-id=373-34298&mode=design&t=8ua33AGvCAGN5dxM-4