Motion Graphics and Fitbit

For this small project I took a look at both my Fitbit dashboard and my Fitbit app to see where there were opportunities to add animations to the interface in a meaningful way. Obviously adding too much animation can be distracting and could cause annoyances. So we must be mindful of their impact on the user experience.

I've gone through and identified some key areas where animations could find a home

Animated Glyphs & Transitions in App

Currently the progress bars of each trackable element are animated by growing upon refresh of the view. These are already color coded. Animating the glyphs during the initial stage of their updating would add a subtle and fun visual to accompany a users progress towards their goal.

When changing section in the Fitbit app there is the use of a single slide into place. Since iOS 7 lets you define custom transitions we are no longer stuck with plain linear slide transitions. We could finesse our way in and out of sections by implementing simple and visually appealing transitions. In the example below. a shrink and blur as the new view slides in.

Animated Glyphs in Dashboard

The dashboard can also be home to the same glyph animations you would use in the app. These would also add a fun visual element to the page upon data load. You could also turn the animation on once a user is engaged with a specific data set. Say the little fellow runs when your cursor is inside that panel.

Website Visuals

Right now animations are used sparingly on different parts of the website. Right now the most of the visuals on fitbit.com are static. The ones that did move were very simple in nature. The 4 section "Get Active", "Eat Better" etc. comes to mind. There are a few places where added motion might help draw the eye capture a users attention and help to tell a story.