Introducing Variants

#Deliver Tailored Experiences: Introducing Hygraph Variants

In today's digital landscape, a one-size-fits-all approach to content is no longer sufficient. Customers expect experiences that are relevant to their needs and context. Research indicates that 89% of business leaders consider personalization crucial to success, and 76% of consumers expect to receive personalized communications. Companies have seen up to 30% lift in conversion rates from behaviour-based content.

Delivering this level of personalization, however, has traditionally presented a significant challenge for content teams: managing numerous duplicate pages for different audiences, resulting in content sprawl and maintenance headaches.

We're excited to introduce Hygraph Variants, a powerful new way to create and manage personalized content at scale, directly within your content schema. With Variants, you can build tailored experiences for different user segments without cluttering your content repository, empowering your team to work faster and deliver more impactful content that drives conversions.

#What are Hygraph Variants?

Hygraph Variants enable you to create multiple versions of content within a single, centralized content entry.

Instead of cloning an entire page to create a special offer for VIP customers, you can simply create a "VIP" variant of a specific component, like a hero banner.

This approach is built on a simple but powerful principle: focus on variants, not duplicates. Your content teams manage a single source of truth for each piece of content. At the same time, developers have the flexibility to request the appropriate variant via our GraphQL API based on user data, behavior, or context.

This unlocks several key benefits:

• Work faster:
  Empower marketing teams to create and test personalized campaigns without relying on developers to clone pages or components.
• Maintain consistency:
  Update core content in one place and ensure it is reflected across all variants, thereby eliminating the risk of inconsistent information.
• Reduce clutter:
  Keep your content repository clean and manageable by avoiding the endless duplication of entries for each campaign or audience segment.

#How to implement Variants for Personalization

Getting started with Variants is a straightforward process that integrates directly into your existing schema workflow. While the exact implementation will depend on your frontend setup, the core logic inside Hygraph remains simple.

1. Enable Variants on your Model:
   In the Schema builder, select the model you wish to personalize, such as a "Page" or a "Hero Banner" component. You can then enable Variants for each field in this model, which allows you to create different targeted variations of its content entries.

2. Create Content with Variants:
   In the Content editor, open an entry for your variant-enabled model. On the sidebar, you can now add and name new variants, such as "new visitor" or "returning customer." Content editors can then populate each variant with tailored text, images, or other content. Once you have created your content Variant, you assign it to one or multiple pre-defined Segments.

3. Fetch Variants in your Frontend:
   Your frontend application will handle the logic for determining which variant to show. Based on user data (e.g., a cookie or login status), you make a GraphQL API call to Hygraph requesting the specific variant for that user Segment.

For a hands-on look, check out our Variants code example to see how you can build this logic into your application.

#How do Variants scale with your Personalization strategy?

Variants are designed to grow with your personalization maturity. You can start with a simple setup and scale up to a sophisticated, omnichannel solution as your needs evolve.

• Phase 1: Native Logic
  Initially, you can build the personalization logic directly into your frontend application. This is ideal for rule-based personalization, such as displaying different content based on context or user data. You could target people based on UTM tags coming from a specific campaign, by date and time, or differentiate between new and returning visitors. Alternatively, use the user profile data already available to your application's backend.

• Phase 2: Composable Stack
  As you scale, you can integrate best-of-breed tools. Add a Customer Data Platform (CDP) to create unified user profiles and an external Personalization Engine to manage complex rules and A/B testing. Hygraph remains your central content hub, serving the correct variant as directed by your personalization engine.

#How are Variants different from Localization?

It's common to wonder how Variants differ from our existing Localization feature. While both allow you to create different versions of content, they serve distinct purposes:

• Localization is the process of adapting content for different languages and regions (e.g., displaying content in en-US vs. de-DE). It's about translation and cultural adaptation.

• Variants are for tailoring content for different audience segments within the same locale (e.g., showing different promotions to “new-users” vs. “high-value-purchasers” in the US). It's about personalization.

The two can work together powerfully. For example, you could have a "New Year's Sale" hero banner with a German locale that has two variants: one for new customers and one for existing ones.

#Interested in learning about real-life implementations?

Check out the blog posts from our guest authors

• The goldilocks principle: Getting personalization just right
• Headless personalization: Get it right, get it real

Or watch our webinar with a panel discussion

• Personalization Tech Trap: Is Your Stack Setting You Up to Fail?
  (Note: Email registration required)

#Getting started

Ready to create more engaging experiences for your users?

Explore our documentation to learn more about Hygraph Variants.
We’d love to hear your feedback in our community Slack channel!

You can also try our interactive demos on our website, or watch a recorded demo of our Variants Coffee example.