What’s inside the Fitness Tracker App.
10 screens with real content in place. Rewrite them, reorder them, or add your own.
- 1Screen 1Today: the week strip, three activity rings, resting heart rate, sleep and the next workout
- 2Screen 2Workout in progress: the exercise demo, set progress, elapsed time, heart rate zone and pause
- 3Screen 3Workout complete: a summary with time, calories, a heart rate graph and personal bests
- 4Screen 4Workout library: filter chips, the current program and workouts picked for you
- 5Screen 5Workout detail: the coach, equipment, every exercise with sets and reps, and a start button
- 6Screen 6History: active time for the week as a bar chart against the goal, totals and recent sessions
- 7Screen 7Training plan: a week calendar of sessions with rest days and a reschedule sheet
- 8Screen 8Heart and recovery: resting heart rate, HRV and sleep trends with a readiness score
- 9Screen 9Profile: badges, streaks, personal records and connected devices
- 10Screen 10Goals and settings: daily move, exercise and step goals, units and reminders
When to use it.
Fitness Tracker App is a 10-screen phone app design for a training and activity tracker, made for product designers, gym brands and wearable start-ups. It covers today's three activity rings and the next workout, a live workout and its summary with a heart rate graph, the workout library and detail, weekly history, a training plan, heart and recovery trends, the profile with badges, and goals. Near-black screens, charcoal cards and one neon lime accent give it a sporty, night-gym feel.
Made for
- Product designers starting a new app
- Startups pitching an app idea
- Agencies designing apps for clients
- Developers who need screens to build from
Make it yours in four steps.
Open it in UI design and work through it, or let Docsiv AI do the first pass with your details.
- Step 1
Rename Ardent and change the lime accent to your brand colour.
- Step 2
Replace the training photos and edit the workouts, sets and reps in the library and detail screens.
- Step 3
Update the rings, charts and recovery numbers to match the metrics your app tracks.
- Step 4
Link the screens into a clickable prototype, or export them as FIG, SVG, PNG or PDF.
Start from the Fitness Tracker App now.
Questions about this template.
Something else on your mind? Ask us in the chat, bottom right of the page.
Is the Fitness Tracker App template free?
Yes. Create a free account and it opens in Docsiv's UI design app, ready to edit and share. The Free plan includes every Docsiv app and 500 AI credits a month.
Can I change the colours, fonts and text?
Yes, all of it. The template uses Inter with #0a0b0d, #16181b, #c6f62d, #5bdcf0, #ff6b45, #f4f5f0, and you can change any of them, rewrite every word and add or remove screens and layers.
What can I export it as?
UI design in Docsiv offers: FIG, SVG, PNG and PDF files. Once it's saved, you can also share it with a link.
Can Docsiv AI change it for me?
Yes. Tell Docsiv AI what you need, such as your brand's colours, new wording or another screen, and it makes the changes in UI design for you to review. AI uses credits; the Free plan includes 500 a month.
Start your app design with Docsiv AI
Describe the client or the project and Docsiv AI writes a first draft of your fitness app UI for you to edit, share and send.