Company
Colgate-Palmolive
Role:
UX/UI Designer
Tools
Figma
Platform
Web
Timeline
July 2024 - December 2024
Overview
The Tom’s of Maine Refresh project took place over two phases, starting with an extensive redesign of the shopping experience. Over that time we streamlined the user experience with a focus on clarity and responsiveness following from extensive interviews and competitor analysis. In Phase 2 of the refresh we elevated the Tom’s of Maine brand story while moving the site from AEM to Shopify.
Impact
10–15% increase in conversion
more than 80% longer session duration
20% decrease in bounce rate
~80% reduction in maintenance time
When launched in 2024 Tom’s of Maine became the most accessible website at Colgate-Palmolive. This resulted in the site becoming the base of the White Label design system and Shopify template that would become company standard (Multi-brand Design system project)
Problem
Inconsistent Branding:
The site was not accurately respecting brand style guides or adequately expressing the values Tom’s of Maine represents.
Low Ranking:
Due to low quality accessibility and user experience, the site was ranking second to last among competitors globally and nationally.
Inconsistent Functionality:
The shopping experience was inconsistent due to the complexity inherent in the technical implementation of the AEM system.
Poor Quality Visual Design:
The visual quality of the site was not seen as appealing enough by users.
Planning & Research
Qualitative Usability Testing
Goal: Understand brand perception and overall usability
Method: Unmoderated test on User Testing
Method: Unmoderated test on User Testing
Card Sorting
Goal: Learn how users group and prioritize content
Method: Unmoderated card-sort
Method: Unmoderated card-sort
Tree Testing
Goal: Assess information findability
Method: Unmoderated tree-test
Method: Unmoderated tree-test
User Interviews
Goal: Understand motivations and pain points
Method: 1:1 interviews
Method: 1:1 interviews
Quantitative Testing
Goal: Establish baseline task success for the DTC experience
Method: Unmoderated test
Method: Unmoderated test
The research revealed strong brand affinity but significant structural and experiential issues across the site. Users trusted and appreciated the Tom’s of Maine brand, yet struggled to navigate and connect with the content.
Design & Process
Explored and iterated on all page designs with wireframes in order to build a clear understanding of the project scope, and UI needs.
By first walking the team through these wireframes, we were able to sign off on key UX elements before moving onto mockups.
Homepage
The homepage was restructured to follow the existing content while creating a more balanced relationship between products and brand equity.
Product visibility was increased, and additional white space was introduced throughout the layout to improve readability and accessibility.
The hero carousel was refined to highlight a mix of product offerings, brand initiatives, and the Tom’s of Maine community.
To further strengthen credibility and trust, user-generated content was added as a core visual element of the page.
Product Listing Pages
The former “View All” page was redesigned as a true product listing page, addressing the friction users experienced when it previously served more as an informational page.
Product cards were refined to present essential details at a glance, creating a smoother browsing experience.
A neutral color palette was applied to ensure the products remained the focal point, and sorting options along with pagination were introduced to help users navigate the catalog more efficiently.
Product Description Pages
The page was enhanced with hierarchical breadcrumbs to improve orientation and navigation.
Each product now features a more robust visual set, including four to five images—plus video when available—showcasing product shots, ingredient details, lifestyle imagery for scale, and key features.
Ratings and reviews were made more prominent, including clearer visibility into the total number of reviews.
The flavor and scent selector was redesigned to align with Tom’s of Maine’s established color system, and ingredient information was moved higher on the page to give users quicker access to details they consistently value.
Navigation
The navigation and shopping experience was redesigned end-to-end, creating a more seamless flow from product discovery to checkout.
A dynamic filtering system was introduced, and the main menu was strengthened with direct links to key product categories, making it easier for users to reach the pages they’re most interested in.
Page names were updated for clarity and improved discoverability, and redundant pages were consolidated to minimize confusion and prevent users from searching in multiple places for the same information.
Next Project: Multi-Brand Design System