Fabletics: Next-Level CMS with Builder.io

A global eCommerce innovator, seeking better ways to create engaging digital experiences

With over 2 million subscription members, Fabletics is a tech-first industry leader in creating high-performance activewear that’s accessible and inclusive.

They’d recently migrated their front-end to a React-based, component-driven architecture. Now, they were ready to build out exciting new content-driven customer experiences across their site in order to drive greater conversion and increase sales.

However, they faced a major gap: their existing CMS capabilities didn’t provide the Merchandising and Marketing teams with the tools they would need to create and optimize these new experiences. As well, changes to site content often required engineering support, causing a further drag on team efficiency and time to market.

Having already established a track record as a strategic tech partner for Fabletics, they approached us to help resolve this gap and advance their vision. Our role: help evaluate which third-party tool would best meet their needs, then integrate and build upon it to deliver maximum value to Fabletics.

Fabletics CMS templates and custom component UI/UX design

Aligning business needs to the right tool for the job

We worked with the Fabletics team as a technical thought partner to determine which tool would best empower business users and dramatically reduce the time needed from Engineering to support content integration.

First, we aligned with the product and business teams on their needs, while also considering what would be optimal given the existing technology stack. Next, we evaluated different third-party options with Fabletics, then created prototypes with the top choices, and collectively reviewed these to drive the final choice.

Together, we determined that Builder was the best fit. It had enterprise-level performance and its highly visual, component-based toolset provided internal users with the flexibility and ease they needed. This component-based approach enabled us (and Fabletics in the long run) to develop reusable “building blocks” for Fabletics’ unique content needs. This in turn would empower the organization to create content-driven experiences more effectively - essentially bringing the value of no-code/low-code tooling to an enterprise environment.

We found a thought partner with Whitespectre. The level of structure, collaboration, and open communication they have is something you don’t typically see, but absolutely need to drive results. Their technical chops are light years ahead of others.

That’s why we were able to trust the team to help us make one of the largest decisions we’re going to make over the next couple of years- what Headless CMS to go with. I was super impressed with the set up they did on the Builder side. They helped us knock it out of the park.

Tim CollinsCTO, TechStyle & Fabletics

Bringing storytelling to the Fabletics product experience

One of Fabletics’ top use cases for their new CMS approach was enabling true ‘storytelling’ on their Product Detail Pages. Whitespectre collaborated with the Fabletics Product team during early hands-on sessions with Marketing and Merchandising to gather insights on what storytelling elements were most critical for them in terms of conversion and user loyalty.

Following these sessions, we worked with Fabletics to design the new components and content blocks for their Product Details Page templates and other places where this content could be used. These responsive building blocks were designed for maximum flexibility for both the content they could accommodate and how they could be arranged to form larger templates.

Some of the components we built to help drive conversion included "Complete the Look'' and product comparison units. We also customized and reused some of their existing React components, such as the product grid. This ensures consistency and ease of use for the future. The data integration work we did with the products microservice meant all product attributes could be displayed for any locale, and automatically updated when the catalog was changed.

Whitespectre software engineering tech partner and Builder.io headless CMS combination

Building with both the customer and business user in mind

It's important to note that while visual-building tools like Builder.io can be incredibly powerful, the sheer number of options and flexibility available to end business users can easily result in design and consistency issues.

A key principle in our integration approach was to prevent this scenario. We provided both pre-built components and template layouts to speed up the content creation process and ensure consistency. In addition, we established guidelines to reduce administrative errors and maintain consistency without being too restrictive and limiting the design's flexibility and usage.

Fabletics CMS product storytelling template

The Result: 75% more efficient workflows and a better customer experience

A tool is only powerful if the organization fully adopts it. That’s why once our development work was complete, we conducted targeted handover sessions with the wider Fabletics team to ensure seamless knowledge transfer and adoption.

Today, a

s a result of our successful partnership, Fabletics has a dynamic new CMS toolset, with custom components, a flexible PDP template, and reusability across their website and sister brands.

According to Tim Collins, Fabletics' CTO, "Our migration to Builder and the component-based CMS approach dramatically improved the way our teams operate. Our workflows are now 75% more efficient. We’re able to focus on our core competencies and create personalized experiences for our customers - all without having to spend excessive time editing and updating our website. Overall, everyone is super happy with this change."