This is a case study about the design process for the recently launched web pages for the Fitbit App. I was the Lead Designer on the project, working in tight collaboration with a Creative Director, Art Director, and Copywriter. The project was initiated by the Product Marketing team at Fitbit. 

Requirements of the creative brief included:

  • Demonstrating the features of the app in an interactive manner
  • Showcasing cross-platform compatibility
  • Creating a seamless and immersive user experience that integrates health and fitness into all areas of one's life.

Research and Discovery

I began the project by conducting research on over 20 different competitors and companies that have remarkable app web pages, including Apple, Nest and Wunderlist.

Based on these resources and inspiration, I developed a site structure which allowed us to showcase the unique interactive capabilities of the Fitbit app while also providing users with important information on technical features.

Design

During the wireframe process, we decided to use the hero image to feature a slideshow of people experiencing the many benefits of the Fitbit app.

The final hero image guides the users to the main call to action, to download the apps and to check for device compatibility

Below are the slides from the hero image and the final call to action.

The App page

The finished app page integrated a sense of warmth while demonstrating the technical features of the product. Fitbit's colorful icon system, combined with interactive hover states, added some playfulness to the user experience. I used Invision App to demonstrate to shareholders the interactivity of the page.

Device Pages

The page above showcased the Fitbit App, and I also created 2 device pages that allow users to check their device compatibility. The technical and logistical challenge of the device pages was to incorporate the many Fitbit products that function across smartphones, tablets and computers. I included 2 search features: a general device search and a dropdown category search to give users the choice of how to check compatibility.

Or a dropdown search, for users that get intimidated by an empty search bar…
The results page that show device compatible features

Conclusions

This project was fundamentally about creating a balance between providing technical information and showing the warm and human side of the Fitbit app. I feel that the finished app page does a good job of being playful, friendly and interactive while also prioritizing technical information.

The marketing team and company stakeholders were very happy with how this web page turned out. It launched a few months ago to coincide with the release of our new Fitbit products, Blaze and Alta. You can see the live page here and the rest of my portfolio is showcased below.

Thanks for your interest in my work.