Workplace_Careers_R3.png

Fitbit.com Redesign 

Phase 1

Fitbit.com needed an update. The original (legacy) website was dated, having been created many years ago. My team, supported by design agency Code & Theory, who provided UX help, was tasked to redesign the site in two phases and create a new, user-friendly platform that better represents the Fitbit brand, increases product sales, site performance and improves accessibility. 

Project Brief: Redesign the legacy Fitbit.com site and build in a content management system (CMS) to improve performance and customer experience.

This project started in early 2018 and the new site was launched in January 2020 in USA and Canada. There were many round of UX/UI reviews, stakeholder presentations and feedback, as well as development meetings and QA. Took great effort and teamwork!

 

I am currently overseeing the localization and roll-out for the EMEA, LATAM & APAC site launches which are coming soon.

I started as Senior Interactive Designer and I am now so proud to have grown into the role of Interactive Lead for Web at Fitbit. 

VP Platform Marketing - Steven Marjon

Web Director - Danielle Hurley

Creative Director - Dani Naboulsi 

Operations Director - Brynne Roberts

Interactive Lead - Monica Calmet

UI/UX design - Monica Calmet

UX design support - Code & Theory

Web Producer - Lara Blasko

Copy - Marissa Langman

PM - Sarah Dollar

Development - Tech Aspect

Desktop HD Copy 21.jpg

The Fitbit.com Legacy Website

The original, legacy Fitbit platform was in place for many years. My team started this project with an intensive study of web analytics and the user experience of the Legacy site. We found conversion rates were low because the purchase path wasn't clear - we were losing customers. The main navigation had too many options, product pages lead you to a main product information page to shop (two clicks) and pages were too long. On the positive side, we learned great things about the platform: our users love the 360° experience on the product pages and appreciated the core information about product features.

Desktop HD Copy 23.jpg

UX Design

Our team worked closely with Code & Theory in the initial phase of this redesign. We created a detailed site map which showed all pages of the website so we could decide what we were going to tackle in Phase 1 versus Phase 2 and discussed new link structures for pages. For Phase 1 we focused on redesigning the Navigation, Homepage, Store Page, Product Pages, Cart & Checkout, Technology and Quiz. 

UX Copy.jpg
UX Copy.jpg

Initial UI Designs

To expedite the process, I worked closely with Code & Theory to create a UI Styleguide and create templates and components for the new pages that follow interactive responsive rules and are easy to manage in CMS. This process resulted in a fresh visual approach and sparked our core UI direction. The style guide serves as a living library which continues to evolve.

visual explorations copy.jpg

New UI Styleguide

UI styleguide.jpg

Templates & Components

02_fitbit-web-redesign.jpg
Components.jpg

Visual Design

Screen Shot 2019-05-14 at 3.21.07 PM.PNG
Workplace_Careers_R3.png
IMG_2024.JPG
IMG_9529.JPG

Final Designs

After more than a year of work, we got to a great visual place and designed many pages with the new look and feel for the launch of Phase 1. Check out some visuals below or got to Fitbit.com to see the live designs!

Desktop HD Copy 3.jpg
Desktop HD Copy 22.jpg

Development & QA

I was the lead working with Tech Aspect, our development partner for CMS. It took many rounds of reviews, code inspections, optimization issues, templates & design solves that were problematic in development, for us to reach the end product. We built a Zeplin CMS Website project, where every component, template, design and export rule and specs live.

05_fitbit-web-redesign.jpg
06_fitbit-web-redesign.jpg

Current Status

I am so proud of the outcome of Phase 1 for the Fitbit Website and the great people I work with! We have officially launched in USA and Canada (the rest of the world is coming soon) and we're already seeing a huge increase in sales. Now, as an Interactive Lead, i'm designing new templates and components that are part of Phase 2, fixing component issues with development, redesigning components for better user experience based on data, leading localization of many designs for our site to launch worldwide, improving documentation for export, handoff of designs, creating new rules and designing new product pages. I continue mentoring and teaching designers on my team as well as overseeing creative work.