Description
On the top right of the dashboard, there is a Level 1 badge with a progress bar showing 0/20. There is no tooltip, label, description or any hint anywhere on the page telling the user what 0/20 represents, what action they need to take to increase it, or what happens when they reach 20. A new user landing on the dashboard for the first time would have no idea what this number means or how it relates to their learning progress on the platform.
Goals
-Help new users immediately understand what the progress bar means without having to search for an explanation
-Motivate users to take action by clearly showing them what they need to do to reach the next level
-Reduce confusion for first time users who have no idea how the leveling system works
-Make the platform more engaging by showing users how close they are to leveling up
-Improve overall user onboarding experience on the dashboard
-Encourage users to stay active on the platform by making their progress visible and understandable
Implementation Details
Frontend:
- Add a tooltip that appears when the user hovers over the progress bar showing a message like "Complete 20 karma points to reach Level 2"
- Add a small descriptive label below the progress bar explaining what the number means
- Make the progress bar clickable so it navigates to a page explaining how levels and karma points work
- Use a progress bar component that visually fills up as the user earns more karma points so progress feels rewarding
Backend:
- Make sure the API response includes all the information needed to display the progress bar correctly such as current level, current karma points, and karma points needed to reach the next level
- Return the next level threshold so the frontend can calculate and display how much more the user needs to progress
Technologies Used:
- React.js — to build the tooltip and progress bar components
- Tailwind CSS — to style the tooltip and label
- Django REST Framework — to update the API response to include level progression details
Testing:
- Verify tooltip appears correctly on hover on both desktop and mobile
- Check that the progress bar fills up correctly as karma points increase
- Verify clicking the progress bar navigates to the correct explanation page
- Test with different karma point values to make sure the bar updates correctly
Tech Skills Needed
React, HTML, Tailwind CSS
Mentor(s)
.
Complexity
Low
Category
UI, UX
Description
On the top right of the dashboard, there is a Level 1 badge with a progress bar showing 0/20. There is no tooltip, label, description or any hint anywhere on the page telling the user what 0/20 represents, what action they need to take to increase it, or what happens when they reach 20. A new user landing on the dashboard for the first time would have no idea what this number means or how it relates to their learning progress on the platform.
Goals
-Help new users immediately understand what the progress bar means without having to search for an explanation
-Motivate users to take action by clearly showing them what they need to do to reach the next level
-Reduce confusion for first time users who have no idea how the leveling system works
-Make the platform more engaging by showing users how close they are to leveling up
-Improve overall user onboarding experience on the dashboard
-Encourage users to stay active on the platform by making their progress visible and understandable
Implementation Details
Frontend:
Backend:
Technologies Used:
Testing:
Tech Skills Needed
React, HTML, Tailwind CSS
Mentor(s)
.
Complexity
Low
Category
UI, UX