Ecommerce Replatforming
for a Global Social Retail Brand

Discovering the Connection

Modere is an innovator in the health and wellness space. They’re driven by a research-based mindset, and yet they speak passionately about the idea of “unrealistic perfection” and encourage their customers to think more about personalized goals and achieving the happiest and healthiest versions of themselves. Their “Live Clean” philosophy flows directly from this, as does their “Transparency Trust,” which is their commitment to go above and beyond regulatory requirements and share information about the ingredients they use in plain language.
 
Not only are their products forward-thinking, but their business model is, too. They define it as “social retail,” or retail powered by people. They’re a direct-to-consumer (DTC) company and sell via ecommerce, yet they’ve taken the idea of using referrals as a business driver to the next level. Working with a committed set of influencers – or “Social Marketers” as they refer to them – Modere created its own revenue-sharing system, while getting targeted feedback from their client base and putting it into action for continuous improvement.
 
It's a complex business, and a worldwide one, with seven distinct markets. Modere operated it on a legacy ecommerce platform, and knew the site’s performance was not helping with client acquisition or retention, to say nothing of the SEO cost of running at slower speeds. Migration was a necessity, and they selected BigCommerce as their new platform. But the intricacy of their business rules would require a lot of patience and planning before they could make the move.
 
Modere initially enlisted Guidance for a technical validation process – to see what Modere had done so far in migration preparation, and determine how to translate their business rules into technical requirements. Once Guidance had demonstrated how well they understood what Modere was asking for, and what they really needed, Modere engaged Guidance for both a technical implementation process with BigCommerce, and a customer experience engagement that included a modernized redesign of their websites.

Solving for Global Complexity

After the technical validation and discovery process, Modere and Guidance agreed on a headless commerce implementation. The challenge in doing so? Modere operates in seven markets worldwide. Although there’s some overlap, each market generally features a unique set of products, content, business rules, technologies, and regulatory requirements. As a result, Modere needed seven separate instances of BigCommerce for the back end, and seven instances of Contentstack as a headless CMS for the front end. The varying requirements of so many markets are difficult for any platform to handle.
 
To solve this, Guidance used Next.js for the headless framework and MuleSoft for the middleware platform to create an abstraction layer between the ecommerce back end and the website front end. The custom solution they built allows for multi-site management capabilities, despite the different configurations and back ends per domain. The abstraction layer also handles a full complement of support services for Modere, including Exigo, the software platform they use for back-office operations including user management, order history, commission payments, and more.

The unique back-office complexity doesn't end there; we architected a custom tax wrapper designed to break apart product bundles, ensuring taxes were calculated properly at the often disparate rates of the child products before being recombined for display while leveraging Avalara for accurate rates and component level calculation.

Going Asymmetrical

With a brand that presents as experts in their field, backed by science, the overall look and feel of Modere’s front-end website would need to be clean, modern, and uncluttered. Modere’s style guide, with white and black as their primary colors and teal as a secondary color, lent itself well to a minimalist presentation style. But Modere went a couple steps further, asking for the design to be uniquely asymmetrical, with dynamic content areas, deviating from the default centered pattern, often overused in ecommerce.
 
Guidance rose to the challenge and created a set of completely custom-designed patterns for Modere’s content modules. All these modules could be customized and deployed through the new Contentstack CMS Guidance put in place – which, like BigCommerce, required a unique instance in each market where Modere operates. The solution improves management and translation capabilities and allows Modere to publish and view new content immediately.

Creating a modular design approach empowered Modere to have a library of modules that are visually cohesive, allowing them to create hundreds of new combinations to keep their new pages fresh and interesting, without being beholden to static page templates.
 
Modere’s future stewardship of the website, the CMS, and the content modules was top of mind for Guidance throughout the development process. They collaborated on page templates to understand the variations of each module that could be deployed; how that would change what could be done with a given page; and how to balance modules against each other so they’d maintain a professional appearance in any configuration. Modere also has control of background color panels and dividers now, to create manual groupings of related modules on a page.

The Curated, Shareable Cart

Modere keeps its focus on two types of personas – a Shopper and a Social Marketer. A Shopper is someone who comes to the website and makes purchases for themselves. Social Marketers do this as well, but they can also act like brand ambassadors, with the potential for much greater involvement in the sales funnel.

For example, a Social Marketer can have a roster of clients and make tailored Modere product recommendations for each of them. To help Social Marketers work efficiently, Modere wanted them to be able to create curated, shareable shopping carts for their clients (who would fall under the “Shopper” designation in Modere’s reckoning). With the selected products already in the cart, a Social Marketer would send a cart link to their Shopper client, who would complete the purchase themselves.

This is a unique part of the customer experience, and it needed to be as frictionless as possible – making it so the Shopper could receive the handed-off cart and complete their purchase easily, without re-involving the Social Marketer in the process. Guidance built the cart and checkout process to enable this, with an additional layer of flexibility. The carts are not fixed pages with a binary “order everything as is, or don’t order anything at all” choice. Instead, shoppers receiving these curated carts can change quantities, change subscription options, or even substitute other products in place of the recommended ones, before completing their purchases.

These shareable shopping carts also fulfilled another need for Modere and their Social Marketers. Information about purchases made is shared through the abstraction layer to Modere’s back office direct sales platform, allowing them to track commissions, rewards points, and other benefits that inspire Social Marketers to keep playing that vital role in Modere’s success.

Building a Bespoke Promotion Engine

All ecommerce platforms are built to handle a variety of promotions that might be offered by a business. But the kinds of promotions Modere rolls out far exceed what ecommerce platforms are designed to do out of the box. For example, a promotion defined as a certain dollar amount off a purchase may be limited to certain territories; apply only to certain types of orders (like subscriptions); require a minimum purchase amount to trigger the promotion; and require a change in the way reward points for purchases are earned and awarded to either Shoppers or Social Marketers.
 
Because these requirements far exceeded the typical promotion functionality of an ecommerce platform, Guidance’s designers and developers built a brand-new promotions engine and management interface from the ground up, and leveraged BigCommerce's flexible and open API base to integrate it with all of the global BigCommerce instances. They partnered with Modere to develop a system that would allow more flexible promotions, with new conditions and action types, that could be easily managed by Modere’s internal team without outside programming assistance.

PDP Complexity

All the intricacy of Modere’s business rules, combined with the minimalist and design updates to their customer experience, meet in the most important places on the site – the product detail pages (PDPs). Because they’re a science-backed brand, Modere wanted to present as much information as possible for potential customers, to support their purchase decisions.
 
Guidance implemented a clean, high-level presentation for their products at the top of their PDPs, with tabbed modules below for deeper product details, ingredients, and FAQs. Guidance also built the PDPs to handle a wide range of customer journeys, directly from the PDP. Each PDP supports the ability to make a one-time or subscription purchase, and to modify subscriptions as part of a transaction.

Due to stringent regulations, Modere had many rules they had to meet on specific products, and we helped them meet those legal requirements by folding those variants into the design, allowing them to feel confident that their new site was federally compliant.

The Customer Experience Collaboration

Making the decision to move from a legacy ecommerce platform, and deciding to update the front-end presentation, also created the opportunity for Modere to reimagine the customer experience. Throughout the Guidance customer experience discovery process, Modere was very clear about their audience, and how they wanted to differentiate Modere in the market.

At the highest level, it demonstrated a unique level of emotional intelligence. Modere is keenly aware that their clients are noticing changes in their health and appearance, and their mission is to help. At the same time, Modere strongly promotes a science-backed, clean-living-based approach to their products – a non-judgmental, straightforward presentation that differs from a more spa-like health and wellness brand.

Guidance translated all of this into an experience that’s modern, clean, and confident – one that’s welcoming to visitors, demonstrating expertise but never overwhelming, and with robust search, filtering, and recommendation capabilities. They also made it easier for Modere to take advantage of user behavior, creating new categories and collections based on what their customers are telling them through emerging patterns in their purchases.