Preview image. Unlock full-res
Fitness app engagement UI card featuring personalized greeting, seven-day color-coded calendar selector, and warm orange primary CTA on a neutral card.
Summary
A fitness app UI card prompting the user to schedule a run with a personalized name, seven-day color-coded activity selector, and a large warm orange call-to-action button.
Visual description
A white rounded card overlays a photograph of a runner's feet in white socks on a striped wooden bench. The card contains a greeting line ("RAPHAEL, Get ready for an easy cool down run today") in a mix of sans-serif weights. Below are seven circular color swatches, one per day of the week labeled TODAY through SUNDAY. TODAY is filled in orange, the following days are gray or light purple, creating a visual progress indicator. A large orange rounded button reads "Start your run" on the left, with a secondary "Skip" button in light gray on the right. The overall palette is neutral (whites, grays, warm browns) with the orange acting as the sole vibrant accent.
Key takeaway
The color-coded day selector is an elegant way to show a week's activity at a glance without requiring interaction or explanation. The personalized greeting (using the runner's name) increases relevance and engagement. The two-button pairing (primary orange action + secondary skip) respects user choice without introducing decision friction. The card's white rounded shape pops cleanly against the photographic background, directing focus where needed.
Reuse notes
Essential pattern for fitness, wellness, and habit-tracking apps. Adapt for run logging, workout scheduling, meditation streaks, or any daily-repeated activity. The color-coded week works well for any 7-day cycle; customize the accent color to your brand (orange conveys warmth and energy here). The environmental photo (runner, shoes, outdoor setting) creates aspirational context; ensure it aligns with your app's audience. Pair with persistent notification or push messaging for best conversion on this flow.
