Headless Commerce Implementation for the Top 250 Cosmetics Brand

Technologies: SAP Commerce Cloud, Spartacus

Client

Our client is a leading luxury cosmetics and perfume brand, operating in 8 European countries. Ranked among the top 250 cosmetics brands globally, they sell products both online and in the stores.

Need

The company turned to Expert Soft when maintaining a unified and responsive customer experience across multiple touchpoints became costly. Their existing system was becoming cumbersome, slow, and resource-intensive for both back-end and front-end teams. Additionally, the company faced scalability issues during peak traffic periods, which hampered growth.

Solution

To tackle these challenges, the client, supported by Expert Soft’s headless commerce website development services, analyzed the current platform and decided to transition from a monolithic structure to a headless architecture. This approach separates the front-end from the back-end, allowing independent updates to the user interface without disrupting the server-side operations. It also enhances scalability, speeds up page loads, and improves overall performance, which is crucial for the e-commerce domain.

Back-end development

The back-end team focused on decoupling the business logic from the front-end, adapting the existing API specification used by the brand’s mobile app. This allowed the front-end team to operate independently, fetching necessary data through the self-contained API specifications. Key processes, such as authentication and authorization, were re-implemented using an off-the-shelf framework, to enable smooth API integration.

Front-end development

Initially, the front-end was rewritten using a custom framework with Redux storage on the browser side and a custom approach to creating a single-page application (SPA). However, because the initial page loading was still partly done through the back-end and partly through front-end components, this didn’t provide a fully headless approach.

Recognizing the need for improvement, we transitioned to Spartacus, SAP’s headless storefront framework. Using Spartacus, our team built the front-end with both predefined and custom components, enabling on-page interactions to occur through the API.

With the framework, our team also reduced back-end requests by taking advantage of the front-end’s storage. The data stored on the front-end could be used across different pages without revisiting the back-end, significantly enhancing platform performance.

Challenges

Infrastructure synchronization

After separating the back-end and front-end, maintaining synchronization between them for API testing and deployment was crucial to ensure consistent and reliable performance.

Optimizing website pages for search engines

A single-page application, with which the new front-end was implemented, is not very search engine friendly. To avoid SEO challenges and ensure proper indexing, our experts adapted the logic to serve HTML queries in a standard form.

Cache management

The separation of the front-end and back-end created distinct caches for each system, requiring the team to adapt caching techniques to ensure the correct display of content for users.

Outcome

Consistency across all touchpoints

With the ability to change user interfaces for various devices independently, the client can update multiple touchpoints simultaneously, ensuring a consistent user experience across all devices.

Increased team focus

As back-end and front-end teams become more independent, they can focus solely on their tasks and complete them faster with minimal dependency on other specialists. This provides easier team management and more efficient resource allocation.

Improved performance

With a dedicated repository, the back-end handles fewer requests, preventing overload, while the front-end generates pages faster without waiting for back-end responses.

Enhanced front-end team efficiency

The transition to Spartacus has made the front-end team more efficient and motivated, enabling them to solve critical e-commerce tasks more quickly and effectively.

01 / 02

Bringing Expert Soft into the global team, the customer smoothly transitioned to the headless architecture, overcoming all the related challenges. The migration greatly enhanced the platform’s performance and enabled the customer to make front-end adjustments faster, meeting end-users’ needs.