Desktop HD.jpg

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

Desktop HD Copy 13.png
Desktop HD Copy.jpg

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. 

Fitbit_App_Page_Redesign_Process.jpg
Fitbit_App_Page_Redesign_Process2.jpg

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.

Fitbit_App_Page_Redesign_Process3.jpg
Fitbit_App_Page_Redesign_Process4.jpg

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. 

Fitbit_App_Page_Redesign_Process9.jpg
Desktop HD Copy 6.jpg

Wireframe Prototype

Visual Design

After getting buy-in from stakeholders on the app story, animation and experience, we proceeded with exploring visuals. 

Desktop HD Copy 5.jpg

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).

Desktop HD Copy.jpg
Desktop HD Copy 9.jpg
Desktop HD Copy 10.jpg
Desktop HD Copy 11.jpg

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.

Desktop HD Copy 7.jpg
Desktop HD Copy 8.jpg

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.

Fitbit_App_Page_Redesign_Process12.jpg
Fitbit_App_Page_Redesign_Process11.jpg