Gallery
See what others have created
jnthnmario
@jnthnmario
Activity rings
Design a compact activity rings component for a fitness app. Use concentric circles to show three daily metrics: steps, calories, and active minutes. The default view should read as a quick status check, with each ring clearly labeled and paired with a visible number and goal.
Include one interaction state that reveals more detail on tap or hover. That state should show the exact progress for each metric, not just the visual ring fill. If you use motion, keep it tied to progress changes rather than decoration.
Treat accessibility as part of the component, not an afterthought. The rings need a text alternative, enough contrast to separate each metric, and a layout that still works when color is removed or the component is viewed at a small size.
What to deliver
- Design the concentric ring component in its default state
- Show three activity metrics with labels, values, and goal targets
- Add a detail state on tap or hover with per-metric breakdown
- Include one in-progress animation frame or transition
- Define a low-vision or color-blind friendly variant
Employ a color-coded scheme for the activity rings to intuitively differentiate between the various metrics, using universally recognized colors that symbolize the type of activity.