# Campaign UX requirements

## Understanding **Campaigns**

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FsFJsh4fGzxgbFyn45rc4%2Fgeneral%20(2).png?alt=media&#x26;token=78260519-cf6e-43e4-b665-80f5f550f7c9" alt="" width="563"><figcaption><p>Example: Campaign stucture</p></figcaption></figure>

A campaign in claimr is a structured set of activities and challenges designed to engage users and drive specific actions. It's a container with various elements, such as quests, tasks, rewards, and leaderboards, all working together to achieve your campaign goals.

## **1. User progress block**

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FPD1LvlkRaSgbRndduCtQ%2FScreenshot%202024-08-29%20at%2015.36.22.png?alt=media&#x26;token=cf724260-7f1a-4dc4-b815-1485355a556f" alt="" width="361"><figcaption><p>Example: User progress </p></figcaption></figure>

### **Username**

Displays the username of the logged-in user. If the user is not logged in, it might show a generic placeholder or prompt the user to log in.

* **Clarity:** Use a legible font and appropriate font size.
* **Placement:** Position the username prominently at the top of the page.
* **Logged-out state:** Clearly indicate that the user is not logged in and provide a clear path to log in or sign up.

### **User progress**

Shows the user's progress within the campaign.

* **Visual clarity:** Use clear labels and visual cues to represent progress.
* **Accessibility:** Ensure the progress bar is accessible to screen readers.

**Logged-in state:** Display personalized information, such as the user's name, points, and a progress bar.

**Logged-out state:** Show a simplified progress bar or a call to action to log in.

For more information, read [user-progress-ux-requirements](https://claimr-io.gitbook.io/claimr-help-center/ux-requirements/user-progress-ux-requirements "mention")

### **Login/Logout button**

Allows users to log in or out of their account.

* **Clear labeling:** Use distinct labels or icons to indicate the logged-in or logged-out state.
* **Placement:** Position the button near the user's name or progress information.

## **2. Highlighted quests**

Prominently displayed quests to attract attention and encourage participation.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FWOe8o537SuWPhuBiJpUm%2FScreenshot%202024-11-26%20at%2023.19.04.png?alt=media&#x26;token=fc9ae0fb-0cb8-4a9c-932a-cdfde98aad61" alt="" width="563"><figcaption><p>Example: Highlighted quests and user progress</p></figcaption></figure>

* **Visual prominence:** Use design elements (e.g., size, color, animation) to highlight these quests.
* **Relevance:** Ensure the highlighted quests are relevant and engaging to users.

## **3. Campaign description**

Provides an overview of the campaign's goals, objectives, and rewards.

* **Clarity:** Use clear and concise language.
* **Engagement:** Write in a compelling and informative tone.
* **Visual appeal:** Use formatting and visuals to enhance readability.

## **4. Challenges**&#x20;

Activities that encourage users to go above and beyond the standard quests in your campaign. They offer a way to boost engagement and provide unique opportunities for users to earn rewards or recognition.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FOoWeLIBKHohwDH7scjKy%2FScreenshot%202024-11-27%20at%2000.52.08.png?alt=media&#x26;token=05cc43ec-687d-4bb2-ac72-4b27048cb13a" alt="" width="563"><figcaption><p>Example: Challenges </p></figcaption></figure>

* **Clear presentation:** Clearly explain the challenge objectives and rewards.
* **Optional participation:** Make it clear that these challenges are optional.
* **Flexibility:** Allow for different naming conventions (Seasons, Eras, etc.).

## **5. Group**

Organizes quests into logical groups, making it easier for users to navigate your campaign and understand the relationships between different quests. This helps provide context and structure to the user journey.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2F58nD1XY3Mo6jYeC9sTGZ%2FScreenshot%202024-08-29%20at%2015.55.44.png?alt=media&#x26;token=65574fcb-3c58-470c-a0cf-1c3765cf5f4e" alt=""><figcaption><p>Example: Group of quests</p></figcaption></figure>

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FUrZEtq0pdk7q1nHBZ92Y%2FScreenshot%202024-11-27%20at%2000.55.51.png?alt=media&#x26;token=873cde38-99b2-4c97-80c8-0d31b71271bb" alt=""><figcaption><p>Example: Group of quests</p></figcaption></figure>

* **Grouping:** Visually group related quests together.
* **State indicators:** Clearly indicate whether the group is locked or unlocked.
* **Group Description:** Provide a concise description of the quest group's theme or focus.

For more information, read [group-ux-requirements](https://claimr-io.gitbook.io/claimr-help-center/ux-requirements/group-ux-requirements "mention")

### **Quest card**

Represents an individual quest within a quest group.

* **Preview:** Provide a preview of the quest's objectives and rewards.
* **State indicators:** Clearly indicate whether the quest is active, locked, or completed.

For more information, read [quest-card-ux-requirements](https://claimr-io.gitbook.io/claimr-help-center/ux-requirements/quest-card-ux-requirements "mention")

### **Tasks**

Specific actions within a quest.

<div><figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2F6lMT6yDR8riOpCoivxLS%2FScreenshot%202024-08-29%20at%2016.02.57.png?alt=media&#x26;token=9b9c888d-6286-4413-a087-6aba6904768d" alt=""><figcaption><p>Example: Follow X task</p></figcaption></figure> <figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2Fqi4Nxpzf8c4aFYyjWGLm%2FScreenshot%202024-08-29%20at%2016.07.36.png?alt=media&#x26;token=0dcdd396-60f6-481c-875d-f0518710118c" alt=""><figcaption><p>Example: Invite code task</p></figcaption></figure></div>

* **State indicators:** Clearly communicate the task's status (active, locked, or completed).
* **Task header:** Provide a concise and informative title.
* **Task description:** Offer clear instructions.
* **Call to action:** Include a clear CTA button.

For more information, read [task-ux-requirements](https://claimr-io.gitbook.io/claimr-help-center/ux-requirements/task-ux-requirements "mention")

### **State indicators**

These visual cues help users quickly understand the overall status of campaigns, quests, tasks: Active, Completed, or Locked.

<div><figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FV1U1nV9h1ISowA3ThEAV%2FScreenshot%202024-08-29%20at%2015.34.21.png?alt=media&#x26;token=09b1c954-586a-49b7-8493-7ed2e3da2167" alt=""><figcaption><p>Example: Locked campaign state</p></figcaption></figure> <figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FNdDzdPQbpZGlyRD0Hlnb%2FScreenshot%202024-08-29%20at%2015.34.43.png?alt=media&#x26;token=3d70e80a-2bfb-4cb6-b300-5a64f1a11afe" alt=""><figcaption><p>Example: Completed campaign state</p></figcaption></figure></div>

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FZNYEGSuTHZLPkeLVVbF0%2FScreenshot%202024-11-27%20at%2000.59.27.png?alt=media&#x26;token=a2ecc67f-447d-478b-a0bf-4ae2d6d36a45" alt=""><figcaption><p>Example: Different quest states</p></figcaption></figure>

* **Visual clarity:** Use distinct colors, icons, timers or labels to differentiate between the states.&#x20;
* **Accessibility:** Ensure the indicators are easily distinguishable for users with visual impairments, utilizing sufficient contrast and screen-reader-friendly descriptions.

### **Pop-ups and notifications:**

Provide feedback and information to users.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FChiqFO4RBv7qXUZOuEZ4%2FScreenshot%202024-11-26%20at%2022.30.21.png?alt=media&#x26;token=7104ffb8-2a05-47a4-bce7-359801d7fabc" alt="" width="563"><figcaption><p>Example: Submit email pop-up</p></figcaption></figure>

* **Visual appeal:** Use subtle animations, icons, or colors.
* **Accessibility:** Ensure notifications are accessible to screen readers.
* **Clear close option:** Provide a prominent close button.
* **Mobile optimization:** Ensure pop-ups display correctly on smaller screens.

For more information, read [pop-ups-ux-requirements](https://claimr-io.gitbook.io/claimr-help-center/ux-requirements/pop-ups-ux-requirements "mention")

### **Close/View more buttons:**

Allow users to close or expand certain sections or elements within the campaign.

* **Clear labeling:** Use clear and concise labels (e.g., "Close," "View More").
* **Placement:** Position buttons logically based on the content they control.

For more information, read [interactive-components-ux-requirements](https://claimr-io.gitbook.io/claimr-help-center/ux-requirements/interactive-components-ux-requirements "mention")

## **6. Leaderboard**

The leaderboard displays a ranked list of users based on points or performance metrics. It helps foster engagement by highlighting top contributors or achievers.

States and behaviors to design for:

* **Default view:** Displays the full leaderboard with all ranked users visible.
* **Collapsed leaderboard state:** Only the heading row and the top 9 ranked users are shown when the list is long. Include **View more** / **Hide** buttons to expand or collapse the list.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FFcPltCKawcIM21B9IclN%2FScreenshot%202024-11-27%20at%2001.00.57.png?alt=media&#x26;token=8f2a869e-e633-446f-b3ac-e0031009fbff" alt="" width="375"><figcaption><p>Example: Leaderboard</p></figcaption></figure>

* **Leaderboard pop-up:** Design the button for flows when the leaderboard appears only after clicking it.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FlEh5Ky24TXDb3fZt0OCt%2FScreenshot%202025-04-09%20at%2020.07.42.png?alt=media&#x26;token=592864be-bea7-404d-8ae6-8f316b50e81e" alt="" width="194"><figcaption></figcaption></figure>

* **Collapse button in pop-up:** When opened in a modal, include an option to collapse or minimize the leaderboard view.
* **Pagination:** If the full list is too long to load at once, add pagination to allow users to browse through pages of results.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FfRelUgva8LrqrlnHBhut%2FScreenshot%202025-04-09%20at%2021.04.11.png?alt=media&#x26;token=8c74cb67-bb41-47e1-b527-7da9e258cc54" alt="" width="375"><figcaption><p>Pagination</p></figcaption></figure>

* **Clear rankings:** Present user rankings and relevant metrics clearly.
* **Visual hierarchy:** Use size, color, and placement to highlight top performers.
