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.
Last updated
Was this helpful?
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.
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.
Display the user's name prominently to provide a personalized experience.
Use a legible font and appropriate font size for easy readability.
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.
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.
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.
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.
This state should clearly indicate that the user is not logged in and provide a clear path to log in or sign up.
Include a prominent "Log in" button to allow existing users to access their accounts. This button should be visible and accessible.
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."
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.
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.
