InWithFitness Physical Tracking

Tasks:: Interaction Designer, Front End Developer
Live Site:: View

When InWithFitness was first launched, the fitness tracking system used the traditional method of posting the data back to the server whenever a user added an exercise. Although this worked, we realize that we needed a better method to provide a more pleasant user experience to our members. One that didn’t always reload the page when drilling down for example. For instance, cardio workouts were divided into classes and each class had it’s own set of unique exercises. In the old way, when a member selected a class, the page would reload with the new dataset for the exercises.

Over the course of 3 days, we set out to create web services to be used with Javascript. Using Ajax calls, specific exercises were retrieved. To make editing easier for the members, a popup that contained the exercise details showed up right on top of the page when the member clicked on a specific exercise. This way, if they didn’t want to edit the exercise, they could simply close the popup and they would have remained on the same spot as they were when they were browsing, preventing any confusion on where they were previously.

List of most recent exercises. List is retrieved via Ajax. Notes icon shows extra information on rollover. Members could also retrieve older exercises by selecting the date range.

A sample of a cardio workout popup.

A sample of a weight popup. Since a weight workout can contain multiple sets, members were allowed to add as many sets as they did.