User progress UX requirements

This section explains how to design clear and informative displays of user progress within ⚡️claimr. It covers the different states users can be in and the elements to include in each state.

Understanding User progress

Displaying user progress is crucial for motivating users and encouraging continued participation in your campaigns. By showing users their achievements, points earned, and overall progress, you can create a more engaging and rewarding experience.

Users can be in one of two states:

• Logged in: When users are logged in, they see personalized information, such as their name, points, and progress bar. They also have the option to log out.

• Logged out: When users are not logged in, they see basic information and are encouraged to log in or sign up.

Logged in state

This state should clearly indicate that the user is currently logged in to their account and provide relevant information and actions related to their profile and progress.

Example: Logged in state

1. User name

• Display the user's name prominently to provide a personalized experience.

• Use a legible font and appropriate font size for easy readability.

3. User points

• Show the accumulated points the user has earned within the campaign or quest.

• Use a clear numerical representation and label (e.g., "Points: 150").

• Display the points prominently, potentially using a larger font size or distinct color.

2. User progress bar

• Visually represent the user's overall progress toward completing the campaign or quest.

• Choose an easily understandable progress indicator (e.g., bar, percentage).

• Use colors and animations to make the progress bar visually engaging and dynamic.

• Ensure the progress bar is accessible to screen readers and provides alternative text descriptions.

3. User points

• Show the accumulated points the user has earned within the campaign or quest.

• Use a clear numerical representation and label (e.g., "Points: 150").

• Display the points prominently, potentially using a larger font size or distinct color.

4. Log out button

• Allow users to log out of their account securely.

• Use clear labeling (e.g., "Log out") and consider using a recognizable icon.

• Typically located near the user's name or profile information.

• Implement a confirmation dialog to prevent accidental logouts.

Logged out state

This state should clearly indicate that the user is not logged in and provide a clear path to log in or sign up.

1. Log in button

Example: Log in state

Include a prominent "Log in" button to allow existing users to access their accounts. This button should be visible and accessible.

2. Title

Display a clear and concise title that explains the purpose of the section. For example, you could use "Welcome to [Campaign name]" or "Sign in to continue."

3. Brief description

Provide a brief explanation of the benefits of logging in or the features users can access once logged in. This could include things like:

• Accessing personalized campaigns and quests.

• Tracking progress and earning rewards.

• Connecting with other users.

Additional considerations:

• Use clear messaging and visual cues to differentiate this state from the logged-in state.

• Consider adding a "Sign up" button for new users, a preview of campaign features, or a link to your Privacy Policy.

• Hide personalized elements like the user's name, points, and progress bar until they are logged in.