Sector(s)
Visit the site
Visit the siteOrganizations Involved
Community contributions
- Hybris Drupal Integration module generously sponsored by Benefit Cosmetics. This module was built by Third & Grove and Benefit Cosmetics https://www.drupal.org/project/hybris
- A variety of improvements were made to Translation.com GlobalLink
- Core patches were created for including forms on every page of a site that is heavy edge cached
Ecommerce as Flawless as Foundation
Benefit Cosmetics is known for their colorful personality, irreverent voice, and unique dilemma based shopping experience. The beauty brand that has become every girl’s bestie needed a complete makeover of their e-commerce site. The team has an integrated, robust online store fulfillment process managed with Hybris, SAP’s enterprise ecommerce solution, but as the marketing department’s needs became more sophisticated, the content management system offered by Hybris was no longer able to adequately manage the store’s front end and content experience.
The Challenge
The team needed to seamlessly integrate their enterprise ecommerce solution Hybris, drive sales by enabling their tech savvy customers to shop on any device, and build a platform to power content and commerce stores in dozens of languages and international markets.
Our Approach
We focused on creating a dynamic experience for the flagship U.S. site while developing a hub and-spoke model, complete with translation workflow integration, for the international rollout. This translated to dozens of sites that would run stores in a variety of countries across the cosmetics-hungry globe.
Effortless Technology
Ecommerce
The Benefit team already had a robust online store managed with Hybris, SAP’s enterprise ecommerce solution, but as the marketing department’s needs became more sophisticated, the existing CMS was no longer up to the task. Enter Drupal…
Drupal
Benefit wanted a platform that would enable their marketing team to easily manage content, offer strong support for running sites in multiple languages, handle the peak traffic load of a major national cosmetics brand, and allow for heavy integration an enterprise back end system.
Custom Front-end
The site had to be responsive, flexible and interactive, and above all, provide a seamless shopping experience. Benefit’s marketing and content teams are now able to maintain the brand’s unique design aesthetic while customizing content for users’ needs.
Multi-site, Multi-Language
The new platform will eventually power commerce and content sites in over thirty countries. To ensure the sanity of the translations workflow, we completely rewrote the Translations.com Drupal module and contributed our work back to the community.
The Reveal
The new site launched in January 2016, with a beautiful blending of content and commerce: Drupal does what Drupal is great at doing (content and rendering) and Hybris does what Hybris is great at doing (ecommerce and back office integration). The site, built by Third & Grove, is heavy on features and sophistication, but works effortlessly for customers—similar to the beauty products created by the trusted, San Francisco-based brand.
About the project
A responsive front end
The Benefit Cosmetics brand has a unique look, and one of its major value propositions is its fun, personal engagement with its customers. The challenge of this project was to maintain Benefit's aesthetic while giving the marketing team more latitude to try out new approaches and, above all, to lead with content. The front end had to be responsive, flexible and interactive, while still allowing Benefit to showcase and sell its extensive line of products and services.
We created a set of custom content modules managed with Fieldable Panel Panes. Each type of module is designed to have a particular type of responsive design and serve a specific editorial purpose. The marketing and content teams are able to maintain the layering that is one of the cornerstones of Benefit’s design aesthetic while customizing content for users’ and marketers’ needs.
Multi-site, multi-language
The Benefit Cosmetics platform will eventually power commerce and content sites in over thirty countries and be managed by the central U.S. Benefit team with secondary teams in each geography downstream of the central brand. To ensure the sanity of the translations workflow, we completely rewrote the Translations.com Drupal 7 integration module as part of this project and contributed our work back to the community as a new module: Translations.com GlobalLink. The excellent Translations.com translation platform combined with Drupal’s Workflow modules make handling language translation work seamless.
Headless commerce
Benefit’s ecommerce platform was no longer able to keep pace with the growing needs of Benefit’s marketing team to leverage content to sell products. Fortunately, from our perspective, marrying Drupal CMS with a headless commerce platform like Hybris offers enterprise clients the best tools to do their job. In addition, a headless commerce approach requires that only one theme be written and maintained for a website, rather than having a theme for content and another for the commerce platform.
On BenefitCosmetics.com, Drupal sits in front of Hybris and handles all interaction with web visitors. Using a series of APIs and content imports for production information, Drupal communicates with Hybris in real time as needed. Akamai, Varnish, and Redis round out the additional caching layers in place for this high traffic site. For more details of how we integrated the Drupal and Hybris APIs, see our blog post.
Why Drupal was chosen
The Benefit team sought a market-leading content platform that would provide their marketing team with the tools they needed to manage content; offer strong support for running multiple sites with multiple languages; handle the peak traffic load of a popular national cosmetics brand; and be sophisticated enough, technically, to allow for heavy integration with an enterprise back end system. Drupal was chosen because it excels in all of these areas.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
With multiple sites in multiple languages, and more to come, the Benefit site is configured in a hub-and-spoke model, with a central Drupal site providing the main content platform that deploys content out to the individual country sites and through the translation engine (Translations.com). Some country sites will offer commerce and some only content, but they all have to be managed from the U.S. The improvements to Translations.com GlobalLink, working in concert with Drupal Workflow, allow the Benefit team to do just that.
Using Migrate, we were able to run the initial import of the products in Hybris with the majority of the desired copy from the marketing team. After the initial import, we were able to connect to Hybris APIs in order to sync inventory and price data. This allows the site to display prices that are up to date, and show when products are out of stock.
Drupal’s powerful Form API allowed us to create robust forms to capture appropriate customer data with a solid UX for customers. The forms were also flexible enough to merge seamlessly with Benefit’s site aesthetic.
We created the Hybris Drupal Integration module to connect the Drupal site to the Hybris instance. With this module, the integration enables products to be imported as standard Drupal entities, spreads product attributes between both systems and keep them synced, allows users to check out and manage their account all in Drupal, and uses Hybris as an identity provider for Drupal.
