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
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.
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.
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.
New UI Styleguide
Templates & Components
Visual Design
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!
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.
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.