Task UX requirements
This section outlines the UX design requirements for presenting tasks within your claimr quests, ensuring clarity and user-friendliness throughout the task lifecycle.
Understanding Tasks
Tasks are specific actions or objectives that users need to complete within a quest. They are the building blocks of quests and contribute to the overall user journey within a claimr campaign.
Tasks can exist in 4 various states
Completed: The user has successfully finished it.
Active: Currently available and ready for the user to complete.
Locked: Currently unavailable, possibly due to prerequisites or time constraints. The reason for being locked should be clear to the user.
Pending: Waiting for an external event or action (like a payment confirmation or approval) before it can be completed.
Active tasks
This section focuses on the UX requirements for tasks that are currently active and available for users to complete.
Task header
Provides a concise and informative title for the task, summarizing its objective.
Clarity: Use action-oriented language and avoid jargon.
Prominence: Display the title with visual emphasis.
Task description
Provides clear instructions on what the user needs to do to complete the task.
Clarity: Use simple language and break down complex tasks into smaller, manageable steps.
Task body
Purpose: This is where you provide the main content or details of the task, including any necessary information, instructions, or visuals.
Visual clarity: Use headings, subheadings, bullet points, and other formatting elements to organize the content and make it easy to scan.
Visual aids: Incorporate relevant visuals, such as images or videos, to enhance understanding and engagement.
Conciseness: Keep the content focused and avoid unnecessary information.
CTA button
Provides a clear action button for users to engage with the task (e.g., "Start task," "Complete," "Submit").
Clarity: Use action-oriented and concise language.
Visual prominence: Make the button stand out with contrasting colors or clear affordances.
Locked tasks
This section focuses on the UX requirements for tasks that are currently locked and unavailable to users.
Task state indicators
Clearly communicates that the task is locked and unavailable for completion.
Visual Clarity: Use distinct visual cues to indicate the locked state. This could include:
Color: Use a different color for locked tasks (e.g., gray or a less prominent color).
Icons: Use a lock icon or a similar visual symbol to represent the locked state.
Blurring or dimming: Consider blurring or dimming the task's content to visually reinforce that it's inaccessible.
Placement: Position the indicators prominently, ideally near the task title or in a location that is easily noticeable.
Task description
Provides a brief description of the locked task, explaining what it entails and how to unlock it.
Conciseness: Keep the information brief and focused.
Visual hierarchy: Use design elements to guide the user's eye.
Completed Tasks
This section focuses on the UX requirements for tasks that have been successfully completed by the user.
Task state indicators
Clearly communicates that the task has been completed.
Visual clarity: Use distinct colors, icons, or labels to indicate the completed state.
Accessibility: Ensure high contrast and consider screen reader compatibility.
Placement: Position indicators prominently near the task title.
Task header
Displays the title of the completed task.
Completion message
Provides feedback to the user acknowledging their completion of the task. This can include congratulatory messages, information about rewards earned, or prompts to proceed to the next task or quest.
Clarity: Use positive and encouraging language.
Informative: Communicate the outcome of completing the task.
Pending Tasks
This section focuses on the UX requirements for tasks that are currently pending, meaning they are waiting for an external event or action before they become available or completed.
Task state indicators
Clearly communicates that the task is pending and not yet ready for the user to interact with.
Visual Clarity: Use distinct visual cues to indicate the pending state. This could include:
Color: Use a specific color for pending tasks (e.g., yellow or orange).
Icons: Use an hourglass icon, a clock icon, or a similar visual symbol to represent waiting or pending action.
Labels: Add a clear "pending" label to the task.
Placement: Position the indicators prominently in a location that is easily noticeable.
Task description
Provides a brief description of the pending task, explaining what it entails and what needs to happen for it to become active or complete.
Clarity: Use concise and straightforward language to explain the pending state and the reason for it.
Informative: Clearly communicate what the user needs to do or what event they are waiting for (e.g., "Waiting for payment confirmation," "Pending approval").
Visual Hierarchy: Use design elements like font size, color, and spacing to guide the user's eye to the most important information.
Popular task types
While tasks in claimr campaigns can share general states (Active, Completed, Locked, Pending), each task type comes with a unique UX layout and distinct design elements. These layouts influence how users engage with the task and must be accounted for in your design implementation.
Below are examples of the most common and structurally rich task types to guide your UX preparation.
Log in and follow X task
This task requires users to log in with their X account and follow a designated profile to earn a reward. It combines both authentication and an external platform action.
UX elements to include in the design:
Instructional header: a clear, action-based task title displayed at the top.
Login button: a prominent button prompting X authentication. Ensure the state of the button (active, disabled) is clearly visually indicated.
Terms & Conditions checkbox: required before login becomes available. Include:
Checkbox
Linked text for “Terms and Conditions” and “Privacy Policy”
Target account preview: a banner or embedded card showing users which account they’re about to follow.
Conditional or alternative UI elements
Depending on task status or user action, the following additional UI elements may be present:
Confirmation state: after login, users may be shown buttons.
“Follow [Account Name]” (deep linking to follow action)
“Confirm” (another task used to validate action post-follow). Display of the user’s handle under the button for clarity
Help block (optional but recommended). If task completion fails, show:
Alert-style message (e.g., “Can’t complete the task?”)
Bullet list of common fixes (e.g., public account, shadowban info)
Error hint / validation: If task validation fails or the user attempts action before authentication, provide clear error messages or red input hints if applicable.
Join Telegram group task
This task asks users to join a Telegram group. It includes platform authentication and group-specific context.
UX Requirements:
Instruction header: Clearly state what the user is expected to do (e.g., “Login and join a group to earn”).
Group preview: Display group avatar and name (visual identity is important).
Login button: Must include the platform icon (Telegram) and clearly indicate the action.
Terms and Privacy checkbox: Mandatory acceptance before proceeding.
State awareness: If the user is already logged in, indicate which Telegram account is connected.
Multiple buttons: Be ready to include both Login and Confirm buttons, if required by flow.
Referral link task
The user is asked to share a unique referral link and bring a specific number of users into the campaign.
UX Requirements:
Instruction header: Include the referral goal (e.g., “Invite 10 referrals”).
Generate Link button: Clear CTA styled button with appropriate icon (e.g., globe).
Referral progress display: Show current count vs. required (e.g., “0 / 10”) — use a progress bar where applicable.
Copy interaction: Make it obvious that the user can copy the link; include feedback when copied.
Responsiveness: Ensure long links fit or truncate well on small screens.
Custom event task
This task is based on fulfilling a set number of customized actions within the campaign to unlock a reward.
UX Requirements:
Instruction header: Use clear action-based titles (e.g., “Complete to earn”).
Progress indicator: Numeric (e.g., “0 / 10”) with an accompanying visual progress bar.
Refresh button: Prominently placed to allow users to update their progress manually.
Feedback state: If the progress bar updates after an action, animate the update subtly for clarity.
UGC link task
Submit a Link Task
The user is required to paste a URL (e.g., tweet, blog post, YouTube link) and submit it for validation.
UX requirements:
• Instruction header: Clearly state what kind of link needs to be submitted.
• Input field: Styled input area with placeholder (e.g., “http://www.link.com”).
• Submit button: Actionable and responsive. Disabled until a valid-looking URL is entered.
• Error state: Show visual feedback if the input is empty or malformed.
• Success handling: Provide confirmation once submitted.
UGC image task
The user is asked to upload an image, video, or other file to complete the task.
UX requirements:
• Instruction header: Clarify what kind of file is expected.
• File picker button: Clearly styled button labeled “Choose file.”
• Preview area: Show a thumbnail or preview of the selected file.
• File constraints: Display any limits.
• Submit & Reset buttons: Submit to finalize; Reset to remove the file.
• Disabled state: Submit button should remain disabled until a valid file is selected.
Fortune wheel ask
The user interacts with a wheel spinner to receive a randomized reward.
UX Requirements:
• Instruction header: Describe the action (e.g., “Spin to earn points”).
• Spinner wheel: Central animated spinner with reward values clearly labeled.
• Spin button: Prominent CTA button below the spinner.
• Result display: Upon spin completion, show the earned reward.
Scratch card task
The user is presented with a scratch card interface to reveal a randomized reward.
UX requirements:
• Instruction header: Communicate the task goal (e.g., “Scratch to earn”).
• Scratch UI: Visually styled card grid with interactive scratch zones.
• Prize pool info: Show prize range or potential outcomes (e.g., 0, 100, 150, 200).
• Reward feedback: Visually reveal the prize after scratch.
• Result summary: Display total reward value (e.g., “Total reward: 200 Points”).
Watch YouTube Task
The user must connect a YouTube account and complete a viewing task (e.g., watch a video).
UX requirements:
• Instruction header: Explain the viewing requirement (e.g., “Watch to earn 100 Points”).
• Login button: Prominent CTA with the YouTube icon. Disabled until the Terms & Conditions checkbox is checked.
• Terms & Conditions checkbox: Required for login activation. Include linked text for both documents.
• Post-login state:
– Show embedded video player with required video.
– Display timer if set in task settings (e.g., “Timer: 59 / 100”).
– Include visual progress bar synced with watch time.
• Completion state:
– Automatically completes after watch time is fulfilled.
– Lock input and update UI to reflect completion.
• Responsiveness: Video player, progress bar, and buttons should adapt seamlessly on mobile devices.
• Fallback behavior: Include error state if the video fails to load or embed.
• Responsiveness: Ensure embedded videos and buttons adapt well on mobile.
Last updated
Was this helpful?