Fitbit.com App Page Redesign
The App Page on Fitbit.com needed a refresh to feature the new app design and explain to its community how the Fitbit platform can help them reach their health & fitness goals.
​
Project Brief: Redesign the current App Page on Fitbit.com
UI/UX design - Monica Calmet
Copy - Trey Clark
PM - Sarah Dollar
The Current App Page - Research
Prior to thinking about the new concept and design for the app page, our team analyzed data related to the current customer web experience and looked into industry best practices to guide our users through the best possible Fitbit App experience. We looked at other apps, heat maps of the current site to better understand customer interactions with the site, and also UX personas the app is based on. We concluded that our web users love to engage above the fold, interact with animations and are very interested in storytelling + personalization.
The Concept
An above the fold experience that lets the user explore the app and/or discover their own adventure by picking an specific feature.
Ecosystem & Wireframes
We began by creating a story based on a UX persona, touching on all the important features the new app has, and looking at ways to animate the content and engage our users.
Wireframe Prototype
Visual Design
After getting buy-in from stakeholders on the app story, animation and experience, we proceeded with exploring visuals.
Our final designs align with the Fitbit brand and celebrates the app. It touches on the three main buckets from the user experience of the app: Today (stats), Discover (workouts, games, etc.) and Community (friends).
Each feature has smaller stories that highlight important information for the user. In Today, for example, each scroll on desktop or swipe on mobile, will pop out statistics, insight cards or tricks to educate the user.
See the Prototype!
Play the videos below so you can see part of the experience for desktop & mobile.
Development & Micro Animations Script
Our team built a detailed script for each micro animation as well as development notes for all elements and transitions for each feature of the page. The project was placed on indefinite hold as we prioritized the Fitbit.com redesign.
