UX Personalization for Ashburn

From 🇺🇸 United States? - Personalization in UX is a good idea to go to the next level in the customer experience. Learn how to use user data, machine learning and best practices to create a personalized user experience.

Great example: Latest trends in Ashburn

“UX designers love dynamic personalization for their target audience!” - Nielsen Norman Group reader in Ashburn 🇺🇸 United States

How to personalize your website with geolocation in Next.js and Vercel

It couldn't be easier to implement personalization and geolocation with Next.js and Vercel. Let's start with some examples to show you how.

1. Geolocation in Marketing: Update metadata and title

Here is an Next.js 13 App Router example how to use the headers from Vercel and geolocate the user by country and city. This is how the above titles and content is made!

import { ArticleLayout } from '@/components/ArticleLayout'
import { generatePageMeta } from '@/core/seo'
import { headers } from 'next/headers'

// Show the city, the ISO country code or a fallback
const getCity = () => {
  const headersList = headers()
  return (
    headersList.get('x-vercel-ip-city') ??
    headersList.get('x-vercel-ip-country') ??
    'your city'
  )
}

export function generateMetadata() {
  return {
    title: 'Personalization: How to engage customers in ' + getCity(),
    description: `Personalization in UX...`,
  }
}

// Use the edge runtime for better speed
export const runtime = 'edge'

export default function Page() {
  const city = getCity()
  return (
    <div>
      <p>
        Personalization in UX is all about creating a tailored experience for
        your users. Learn how to use personalization to boost engagement and
        conversion rates.
      </p>

      <h2>What people in {city} are saying</h2>
      <p>
        “I love this article! It’s so helpful and informative. I can’t wait to
        read more from you.” <br />
      </p>
    </div>
  )
}

2. Unsplash API: Free GeoIP images

Continuing with the example above, let's create a localized header image that we source from Unsplash. It's the first image in this article.

async function getPicture() {
  try {
    const city = getCity() // from the code above

    const p = new URLSearchParams()
    p.append('query', `${city} city architecture building`) // insert our city keyword here
    p.append('per_page', '1')
    p.append('content_filter', 'high')
    p.append('orientation', 'landscape')

    const headers = {
      // get the Unsplash API key first
      Authorization: `Client-ID ${keys.key}`,
    }

    const _url = 'https://api.unsplash.com/search/photos'
    const url = `${_url}?${p.toString()}`
    const res = await fetch(url, { headers })
    const results = (await res.json()).results

    for (const result of results) {
      return result.urls.regular as string
    }
  } catch (e) {
    console.error('failed to getPicture', e)
  }

  return '' // empty string on failures
}


export default function Page() {
  const img = await getPicture()
  return (
    {img && (
      <Image
        src={img}
        alt={`A picture of a ${city} building`}
        width={800}
        height={600}
      />
    )}
  )
}

3. Geolocation Country Flag Emoji

To show an emoji for the user's country 🇺🇸 United States, create a small Flag component. First we'll need a list of countries.

1. Copy this to countries.json: https://github.com/risan/country-flag-emoji-json/blob/main/dist/by-code.json
2. I removed the unicode and image fields to make it lighter
3. Create the component below

import { emojis } from './by-code' // the list you copied, I changed it to typescript

const Flag = () => {
  const headersList = headers()

  const _country = headersList.get('x-vercel-ip-country') ?? 'US'

  const country = emojis[_country] ?? {
    emoji: '🇺🇸',
    name: 'United States',
  }

  return (
    <span className="font-bold">
      <span role="img" aria-label={country.name}>
        {country.emoji}
      </span>{' '}
      {country.name}
    </span>
  )
}

export default function Page() {
  return (
    <div>
      You are from <Flag />
    </div>
  )
}

How Personalization affects UX

Personalization based on geolocation involves tailoring a website's content, design, and functionality according to the user's location. This can significantly impact user engagement, conversion rates, and overall user experience. It's just a great way to focus on user behaviour and individual needs for a personalized experience.

Benefits of Geolocation-Based Personalization

1. Increased engagement: By providing relevant content based on users' locations, you can create a more engaging experience for your audience.
2. Higher conversion rates: Personalized content can lead to higher conversion rates, as users are more likely to engage with content that is relevant to their needs and preferences.
3. Improved customer satisfaction: Personalization can help you stand out from the competition and increase customer satisfaction by meeting their expectations for tailored experiences.
4. Better targeting: Geolocation-based personalization allows you to target specific audiences based on their location, which can lead to more effective marketing campaigns and better return on investment.

UX Personalization Examples That Work in 2023

1. Changing headlines: Personalize headlines based on the user's location to make the content more relevant and engaging.
2. Adjusting hero images: Tailor hero images on the homepage to reflect the user's location, making the website more visually appealing and relevant.
3. Promoting local events: Showcase events happening in the user's area, increasing the likelihood of their participation.
4. Offering location-specific products or services: Display products or services that are relevant to the user's location, such as winter products for cold regions or summer products for hot areas.
5. Onboarding: Personalize the onboarding experience based on the user's location to make it more relevant and engaging. Prefill data.
6. Using AI: Write different copy for different locations. For example how we did it for MagicBuddy.chat. Note the different examples.

More reading

• Vercel: Headers included with deployment
• Vercel: Geolocation in Edge Middleware, Learn how to use visitor's location at the edge.

Grow your business with personalization

Want us to help you personalize your website? Get more traffic? We will help you get more traffic and more conversions with personalization.

Get Offer