Combining Progressive Web Apps with Experience Composition

Kartsten Reuter, SVP Product Management

Karsten Reuter

Imagine your task is this: implement a best-in-class eCommerce experience that is mobile-first, features stellar performance, and combines eCommerce functionality with inspirational content in a way that's also easy to use – enabling your marketing team to manage dozens (if not hundreds) of campaigns and promotions internationally at the same time.

The Mobify and CoreMedia team recently completed an exercise to do just that, by combining Mobify’s Frontend as a Service (FaaS) – designed to help teams craft amazing shopping experiences using progressive web applications – and CoreMedia’s Content as a Service (CaaS).

The Exercise: Combining Mobify & CoreMedia

We used the out-of-the-box configuration for this exercise, which made it easy for the Mobify platform to access the navigation structure, page layouts, and embedded content items like articles or collections, along with all required data.

Under the hood, Mobify uses React.js, an open source library, to compose user interfaces out of components. Leveraging that, we created a <CoreMedia> React component with three responsibilities:

  1. Fetch data from CoreMedia’s CaaS
  2. Map the CaaS data to Mobify’s optimized React component library
  3. Render the React components to the page

The second responsibility is the most interesting. The <CoreMedia> React component iterates through the CaaS JSON response, mapping CaaS elements to other React components. Each element’s data is then mapped to the React component’s props.

This mapping allows marketing teams to effortlessly compose content in CoreMedia that will be rendered as part of Mobify’s progressive web app. And with Mobify’s optimized library of components that cover a wide variety of eCommerce use cases, it’s easy to get started.

Experience Composition

CoreMedia’s experience composition seamlessly integrates inspirational content created and managed within CoreMedia and product catalogues, and the eCommerce functionality provided by a platform like Salesforce Commerce Cloud.

The CoreMedia Studio makes it easy to mix and match content with products, assign them to a page, and select a suitable look and feel.

Screenshot Studio Salesforce

Screenshot Studio Salesforce

Once a page is ready, it can be submitted for approval, translated into multiple languages, and scheduled for publication. The page can be reviewed at any time with the integrated omnichannel preview, and a marketer can review the page at specific points in time or for different target groups via time-travel and personas.

The key advantages of CoreMedia CaaS are:

  1. Content is provided in an easy-to-consume JSON format
  2. It's easy to define which data is exposed to reduce overhead
  3. Data from multiple embedded content items can be aggregated to reduce the number of requests and increase performance
  4. It provides a customizable business layer to adapt responses to business needs

A Powerful Pair

As CoreMedia Content Cloud is truly omnichannel, it’s easy to integrate the Mobify Platform as the frontend experience. With CaaS, CoreMedia provides the ideal component to supply Mobify’s FaaS with the content and layout configuration.

Stage 1: Fragmented: Multiple Channels

You’re a digital dinosaur!

You have a beautiful website, but with fragmented digital experiences, you run the risk of extinction.

It’s time to evolve.

Your audiences want a seamless experience, no matter what's happening behind the scenes. When your experience is different or difficult, it’s important to start with the basics, such as cultivating a holistic approach to online digital experiences. Realign your teams, platforms, processes, goals, and metrics around a comprehensive view of the online experience. Focus on the end-to-end customer journey cutting across channels, desktop and mobile.

separate channels animation circle t-rex dinosaur square
Stage 2: Integrated: Multiple channels

You’re a fish!

Signs of exciting life are starting to form. Your DX is responsive and adaptive but it’s not quite personalized yet.

Keep swimming!

The integration of your brand content across every touchpoint (website, online store, social media, emails, apps, point of sale) creates immersive experiences. These flagship sites combine content-rich brand experiences with immediate conversion capabilities. Business teams and marketing are closely aligned. However, while the digital experience is responsive and adaptive, it’s not yet personalized.

Connect with an expert
Stage 3: Instant: Global expansion

You’re a crocodile!

You’re taking it global. Speed and scalability are key and just like a crocodile, you’re fast…but you’re clumsy.

Oh snap!

In this stage, the online digital experience becomes completely dynamic. You need content that is global, yet relevant, with plenty of local insights: Who is the user? Are they using a mobile phone? Is it raining where they are? Is it snowing? If it is, maybe they need warm, waterproof boots. All of this contextualized information creates a better user experience. With one global orchestration, you’re able to adapt everything, in whatever country or language you choose – while keeping turnaround times low. So keep evolving.

Connect with an expert
Stage 4: Dynamic: Real time personalization

You’re a lion!

You’re reaching more customers in more countries and languages than ever before, and now you’re finally hunting and collecting info with precision.

But you can do more to keep your brand roaring!

As you graduate to the Instant level, you’re able to rapidly update everything - not just in one language and for one country, but in 20 languages and for 100 countries. Speed and scalability are key, driven by the need to roll out global campaigns in all languages and all touchpoints and make updates in minutes or hours, not weeks. But there’s still more to do to reach nirvana.

Connect with an expert
Stage 5: Immersive: Elevated experiences

You’re Captain Content!

You’ve done it! You have opposable thumbs AND you’re saving the world with your seamless, elevated customer experiences.

You're a superhero in the digital space.

Your digital world and your physical world are blending together in the most complementary way possible. When shoppers visit your store, they’ll be greeted with their pre-selected products. Language changes dynamically depending on country of origin – it's like the whole store was set up just for your one specific customer.

In this final stage, your customer experience is truly immersive and superior, and your flagship store merges your physical and digital world into one, with a truly personalized individual experience.

Connect with an expert