How Would We Personalize the SumUp's Landing Page for Display and Social Ads
How Would We Personalize the SumUp's Landing Page for Display and Social Ads
Landing pages are the first impression your customers have on your website
SumUp
SumUp is a leading financial technology company operating across 32 markets on three continents.
SumUp empowers business owners by enabling them to accept card payments in-store, in-app and online, in a simple, secure, and cost-effective way. Today, their card readers are used by over 2 million merchants around the world.
The Challenge
The purpose of a landing page is to convert visitors into leads by focusing on one offer and ensuring that the user experience is tailored to their wants and needs.
Although the needs and wants are different from one customer to another, every visitor sees the same landing page.
Landing pages are the first impression your customers have of your website, and as such, it needs to be perfect.
However, it's not the case for most of the landing pages.
The Solution
Personalization is a powerful tool that gives the landing page a competitive advantage.
The more personal the connection between your landing page and your customers, the more likely it is to convert.
What's better?
You don’t need any psychic powers or guesswork to personalize your landing page because all this information is just waiting to be tapped into from existing sources like social media posts, past purchases, emails received, page viewed, etc.
How Would We Personalize the SumUp’s Landing Page for Display and Social Ads
Step 1: Defining Audiences
Before diving into the personalization, first, we need to define whom SumUp is going to personalize for.
In this step, we determined the customer segments of SumUp based on their Facebook Ads:
From these ads, we identified that SumUp has five different major customer segments based on their industry:
Freelancers (Photographers, Videographers, Accountants, etc.)
Drivers (Taxi Drivers, Private Drivers, VIP Drivers, etc.)
Restaurants & Cafes
Beauty Salons (Hair Salons, Nail Salons, Makeup Salons, etc.)
Other Small Businesses (Mechanic Shops, Florists, etc.)
Ps.: Although each one of these small businesses can be defined as a customer segment group, we grouped them as “other small businesses” to keep audience groups simpler.
Step 2: Choosing Components to Personalize
After defining the audiences, it’s time to choose which components to personalize on the landing page. By default, SumUp’s landing page has the following elements:
Title
Subtitle
CTA
Hero Visual
Features
Products
Features
2nd CTA
Social Proof
Newsletter CTA
In our personalized landing page variations, we’ll personalize the following components:
Title (Title based on location and industry)
Awareness Stage → Learn How [Berlin] [Drivers] Use SumUp
Consideration Stage → [Berlin] [Drivers] Increased Their Revenue by 30% with SumUp
Decision Stage → Start Accepting Payments Now with SumUp to Increase Your Earnings
Subtitle
CTA (CTA based on funnel stage)
Awareness Stage → Learn More
Consideration Stage → Read Case Studies
Decision Stage → Start Accepting Card Payments
Hero Visual (Variations based on industry)
Features (Feature emphasis based on industry needs and wants)
Product(s) (Product recommendations based on industry needs)
2nd CTA
Social Proof
Blog Posts (Industry related blog post recommendations)
Step 3: Choosing Personalization Parameters and Creating Variations
For personalization variations, we’ll use three parameters for SumUp’s landing page:
Industry (Transportation, Freelancing, Restaurant/Cafe, Beauty Salons, and Small Businesses)
Funnel Stage (Awareness, Consideration, Decision)
Location (Berlin, and Others)
Ps.: Although we kept the personalization for SumUp simple, you can increase the number of parameters for segments (and also for personalization). You can add parameters like:
Technology → User's device type, operating system
Behavior → User interactions
Explicit Data → Previous collected CRM data
Time → Days, time
Current Page → The type of page a user lands on
Step 4: Attaching Audiences to Variations
After defining which components to personalize and creating variations for these components, it’s time to attach audiences to these variations.
Since our landing page variations are for a driver in Berlin who doesn’t know anything about it, our audience will look like this:
In our case, we'll use Berlin as our location:
Location Then it’s time to define the industry. To determine the industry, we'll use campaign data because each Facebook ad is targeted to a specific sector:
Industry Lastly, we need to define the funnel stage. Since the landing page is for the awareness stage, we can say that visitors who haven’t visited our page is our target group:
Funnel Stage
The Result: Before vs. After
After defining the audiences and landing page components to personalize, creating variations of components, and attaching audiences to these variations, we’ll have “n” number of automatically generated personalized landing pages.
n = (Number of Locations) x (Number of Industries) x (Number of Funnel Stages) x (Number of Parameter 4) x …
Instead of creating n number of landing pages manually (one by one), SumUp can create these pages automatically by creating variations on Contentful with Ninetailed.
After attaching audiences to variations, the experience of the landing pages will be automatically personalized. To understand it better, let’s look at the final result of our sample personalized landing page.
Our sample personalized landing page is for:
Industry → Drivers
Funnel Stage → Awareness
Location → Berlin, Germany
A driver located in Berlin clicks the Facebook ad who doesn't know anything about SumUp:
After creating the variations and audiences, website visitors can see a personalized page based on their:
location
job
funnel stage
instead of seeing the same landing page for every single visitor.
By personalizing the landing page experience:
→ Title changes automatically based on visitors location and industry,
→ CTA automatically adjusts based on the funnel stage,
→ Hero Image changes based on the industry.
In addition to changes in “Title, CTA, and Hero Image,” other components are also automatically personalized - “Features, Products, and Blog Posts” - based on the predefined variations and audiences.
The Bottom Line
In websites with many components, such as Sumup, it is critical to start with simple cases and iterate. Through continuous learning and experimentation, this strategy enables various teams
content creators,
growth,
product management, or
development
to create meaningful personalization experiences.
The outcome is that all teams can launch the first personalization experience in a single sprint and iterate based on the results and learnings. To create a personalized experience on the landing, all they need is the following tech stack:
The Tech Stack You Needed
In order to successfully create the personalized experience, SumUp needs the following tech stack:
Contentful
Next.js
Google Analytics
Facebook Pixel
Time to Experience the ‘Personalized Experience’
So far, you’ve read which components to personalize, how to personalize components, how to attach audiences to personalized variations.
Although there are screenshots of the personalized components, they cannot replace the real experience. As Albert Einsteins says, “The only source of knowledge is experience.”
Now, it’s time to experience the personalized landing page in action.
When you go to this landing page now, you’ll see that the page will be automatically personalized for you 😊