This is a mobile app for step tracking. The theme in this design is energetic motion graphics, so I made an animated prototype to present this idea.

A common phenomenon of the fitness apps in the market are...let's say, boring. How do we take the most mundane thing - step tracking - to make it fun, and motivational?






Dashboard

On the Dashboard page, the user can check how many steps they took in a day.The cumulative steps graph shows how much progress they've made towards their goal. Notice that the graph rises from the bottom as a progress meter  Once the graph reaches the top, they beat it.







Steps Breakdown

The user can tap on the main card to see the workout details of the day. The graph zooms out so the user can see and interact with the full cumulative graph. 

The user can drag along the cumulative graph to see how many steps they took at any specific point in a day. The user can return to the Dashboard by tapping the back button, and the graph shifts back to the most recent slice of the graph.







Workout History

From the Workout History page, the user can navigate to the Dashboard for any specific day. One day one card, containing the total number of steps and the corresponding cumulative steps graph in the background. The graph turns blue when the user has met their goal (the animation above needs tweaks), acting as a visual cue. Upon selection, the card will lock into place as the new dashboard.






Profile

On the Profile page, the user can check their personal data as well as all-time personal bests and averages that the app constantly keeps track of.





The Whole Walkthrough




Thanks For Your Attention.
Fitness App
Published:

Fitness App

Published: