> ## Documentation Index > Fetch the complete documentation index at: https://docs.claimr.io/llms.txt > Use this file to discover all available pages before exploring further. # Quest card UX requirements > Key design elements and considerations for creating effective and engaging quest cards in your Claimr campaigns. ## Understanding Quest cards Quest cards serve as the primary interface for users to interact with individual quests within your campaign. Each card should provide a clear overview of the quest's objectives, rewards, and progress, enticing users to embark on the journey. ## Quest state indicators Clearly communicate the current state of the quest: Active, Completed, or Locked. Quests at different states * **Visual clarity:** Employ distinct colors, icons, or labels to differentiate between each state. * **Accessibility:** Ensure the indicators are easily distinguishable for users with visual impairments. * **Consistency:** Maintain a consistent visual style for state indicators across all quests. * **Placement:** Position these indicators prominently on the quest card. ## Image Provides a visual representation of the quest's theme. Example quest card with an image * **Relevance and quality:** Choose high-quality images that are relevant to the quest's content. * **Size and aspect ratio:** Ensure the image is appropriately sized and cropped. * **Accessibility:** Provide alternative text descriptions for images. ## Quest name Clearly and concisely conveys the essence of the quest. * **Clarity:** Use action-oriented language and avoid jargon. * **Length:** Keep the title short enough to fit within the card's layout. * **Hierarchy:** Use a larger font size and/or bolder font weight to distinguish the title. ## Short quest description Provides a brief overview of the quest's objectives and rewards. * **Conciseness:** Craft a succinct description. * **Clarity:** Use plain language and avoid technical terms. * **Enticement:** Use persuasive language to encourage participation. ## User progress bar Visually represents the user's progress towards completing the quest. Example quest name, user progress bar, rewards, and counter * **Clarity:** Use a clear and easily understandable progress indicator. * **Visual feedback:** Provide updates to the progress bar as the user completes tasks. * **Accessibility:** Ensure the progress bar is accessible to screen readers. ## Counters Display numerical information related to the quest, such as the number of tasks completed or rewards earned. * **Clarity:** Use clear labels and units of measurement. * **Placement:** Position counters near relevant elements. ## Rewards Showcase the rewards that users can earn by completing the quest. * **Visual appeal:** Use high-quality images or icons to represent the rewards. * **Clarity:** Clearly indicate the type and quantity of rewards offered. ## CTA button Prompts users to take action and start or continue the quest. Example CTA buttons for different states * **Clarity:** Use action-oriented language. * **Visual prominence:** Make the button stand out. * **Accessibility:** Ensure the button is easily clickable. * **State differentiation:** Visually distinguish between active and inactive states. ## Quest blockers and dependencies Display any conditions or requirements that must be met before a user can start or continue a quest. Example quest card with dependencies * **Clarity:** Clearly communicate the blockers and any actions the user needs to take. Show any other quests that must be completed before this quest can be unlocked. * **Visual cues:** Use icons or labels to visually distinguish blockers. ## Countdown Displays a timer for time-sensitive quests. Example quest card with a countdown timer * **Clarity:** Use a large, easy-to-read font and clear time units. * **Urgency:** Consider using color or animation to create a sense of urgency.