We all know marketing campaigns convert best when we segment and personalize them – which is where geo-targeting can come into play. In fact, a whopping 74% of consumers get frustrated on sites where the content has nothing to do with their interests, and 86% of customers say personalization impacts their purchase decisions.
The good news is, today you can tailor almost every marketing experience to a visitor’s location and other identifiers to make offers feel more personal. So why do even the best of us continue to use blanket-style, default messaging for every visitor?
More than half of marketers struggle to execute personalized campaigns, and reasons range from not having enough data about TOFU prospects to know what to personalize—to having trouble securing the resources to execute.
But making sure everyone sees relevant, location-based offers on your website doesn’t actually need to be a huge production. In our experience, it’s way easier (and could do more for your conversion rates) than you might think.
Why geo-target website content — and the fastest way to try this
Like all forms of personalization, geo-targeting is about relevance. And I should clarify off the bat, I’m not talking about using “y’all” in your headline if you’re targeting Texans, or splitting hairs on “sneakers” vs. “tennis shoes” based on regional preference.
What I am talking about is getting way more creative and specific with your offers. If visitors see offers that feel like they’re just for them, they’re more likely to click through, and convert.
For example, imagine targeting only locals in Chicago, Philadelphia, and Seattle respectively with their own coupon codes and special hotel offers for your in-person event instead of blanketing your entire site with a generic message.
Now imagine if you didn’t need to rely on your web team to get those three offers up on the site and could do it yourself really fast?
One of the quickest ways to experiment with this type of personalization is website popups and sticky bars. The real key with these is understanding your options (and there are plenty of them!). Here are a few of my favourite examples to get you started:
Practical geo-targeting examples to try today
1. Experiment with seasonal offers by region
According to Steve Olenski of Forbes, “acknowledging [your] potential buyer’s location increases relevance, and the result is higher engagement that can translate into additional revenue.” It’s a quick win! And, with ecommerce in particular, there’s tons of opportunity to run promotions suited to specific locations.
As an example, if you sell sports equipment or apparel, you could run two or more different “winter sales” suited to the context of winter in different locations. Your ‘classic’ winter sale would appear in states like Colorado—and could feature an offer for 15% off ski gear, whereas your ‘Californian winter sale’ could showcase 15% off hiking gear.
An example of the two different “winter sale” popup offers by location.
Not only do you earn points by acknowledging your visitor’s location like this, but you also ensure each region sees an offer that makes the most sense for them. Running offers like this is wayyyy better than a single offer that’s less relevant to everyone and later wondering why it didn’t convert.
Recommended settings for this example: Frequency: Show once per visitor Trigger: On exit
2. Increase foot traffic with in-store promos by region
We’ve all seen the most common ecommerce discount popup on entry. You know the one — “signup for our newsletter for 15% off your first purchase”. And there’s a reason we’ve all seen it: it works. But, we can do better.
To take things a step further, you can target this type of offer by location. If you have physical stores in specific cities, you can offer an in-store discount in exchange for the newsletter sign up. Like this:
Example of a popup driving in-store visits, and potential for remarketing later
This can help you build foot traffic in different cities, and help you create location-specific mailing lists to promote more relevant in-store events, products, and sales to local shoppers.
Recommended settings for this example: Frequency: Show once per visitor Trigger: When a visitor scrolls 40% of the way down your page.
3. Target your event marketing to precise regions
If you’ve ever planned a party, you know how easy it is to fixate on details. Are three kinds of cheese enough? Is my Spotify Discover Weekly cool or do I need a new playlist?! None of this matters if nobody shows up. Marketing events are no different.
A well timed, geo-targeted popup or sticky bar can get your message in front of the people who will care most about your event. When you tailor event messages to your visitor’s location, you can include a more precise value prop. Targeting locals? Remind them how cost effective it is since they don’t have to travel. Targeting neighbors in a nearby state? Remind them that your conference can be a mini-vacation complete with conference-exclusive hotel discounts.
Recommended settings for this example: Frequency: Show on the first visit Trigger: Show after a 15-25 second delay on relevant URLs (you can use Google Analytics to determine the right delay for your site).
Tip: After triggering this popup on the first visit or two, set up a more subtle sticky bar for subsequent visits to keep the event top of mind, without overdoing it. You could even run the “maybe later” popup Oli Gardner’s a huge proponent of.
Hyper-personalize text on your popups
As a bonus: just as you can do with your Unbounce landing pages, you can also swap out text on your popups and sticky bars with Dynamic Text Replacement to match a prospect’s exact search terms.
This gives you a way to maintain perfect relevance between your ads and website popups in this case.
For example, you could choose to switch out the name of a product for a more relevant one in a popup. If someone searched for “House Prices in Portland”, you could automatically swap out the text in your popup to match exactly and maintain hyper relevance. You can read about a real Unbounce customer experimenting with DTR here.
On premium plans and above you can target Unbounce popups by country, region, and even city (which is wicked granular!). The possibilities for what you show, or how you show it, are nearly endless:
You can trigger: on exit, arrival, after a delay, on scroll, or on click.
And you can target: by location (geo-targeting), URL, referring URL, and cookie targeting.
The options you choose will come down to a few factors including your site, your buyers, ad standards you uphold for a great website experience, and testing.
Here’s how to setup popups and sticky bars on your site:
To get started:
Hop into your Unbounce account , and on the All Pages Screen, click “Popups & Sticky Bars” in the left menu.
In the top left, Select “+ Popup or Sticky Bar”.
Then, click “Create a Popup.”
Choose a Template (or start with a blank popup if you prefer), name your popup, and select “Start with this Template”.
Once you’ve created your popup, set your targeting, triggering and frequency. On your popup or sticky bar overview page:
Set the domain and URL paths where you want your popup or sticky bar to appear.
Choose your triggering option based on your engagement goals.
Set your frequency to choose how often your visitors will see your popup or sticky bar.
In the advanced triggers section, toggle location targeting on and choose which country, region or city you want to show (or not show) your popup or sticky bar.
For best results, personalize
As I hope I’ve illustrated, in the golden age of martech, it’s time to stop squandering valuable website visits on impersonal, generic experiences. You can now leverage useful information about where your visitors are coming from and, by extension, come up with creative offers that will be relevant for them. Small details significantly enhance customer experience, and I hope you can use the above three examples as a springboard for some experiments of your own.
Like any potions master would attest, the secret to a great elixir lies in the measured combination of its ingredients.
Over the years, Titan PPC, a full-service pay-per-click advertising agency based in Vancouver, has developed a “magic formula” for designing lead generation landing pages that convert at average of 15% or higher.
The secret ingredient? For company founder, Patrick Schrodt, it doesn’t boil down to just one.
Any smart marketer knows that when visitors reach a landing page, they won’t all have the same intentions for being there. Some may have clicked an ad looking for a plumber in West Seattle where others may have clicked one looking for a plumber in Capitol Hill.
But if your client is a plumbing company that serves the entire Seattle metropolitan area, your landing page should show both the visitors from West Seattle and Capitol Hill that you’ve got the service they need in the location they want it.
In other words, you want to use geo-targeting to make your landing pages especially relevant to your prospects. As Patrick explains:
There’s always been geo-based searches and there always will be. For our own campaigns, we’ve gone as targeted as including a map on every landing page. We highlight a visitors location on the map depending on the where their search is coming from — people go crazy for it!
And the conversion rates don’t lie.
Watch this clip to hear how Titan PPC used geo-targeting to increase a client’s on-page conversion rates from 6% to 33%, practically overnight.
Interview with Patrick Schrodt, founder of Titan PPC.
2. Use (awesome) images to break up your body copy
Never judge a book by its cover… right?
Well, fact is, when a prospect reaches your lead gen landing page, the first thing they’ll do is judge your offer or product by the way you’ve presented it to them. And they’ll do it within seconds.
That’s why you want to make sure it looks so good they won’t want to leave.
The key to keeping prospects interested? Great photography. According to Patrick:
Images help prospects get a clear picture of your client’s product or offer, and it shows them you’re a professional.
Titan PPC adds full-page horizontal image galleries throughout their lead gen landing pages.
It helps break up a visitor’s attention as they scroll by giving them something nice to look at.
But you can’t just slap a bunch of images into a gallery and hope that it all comes together.
If you’re going to source images for clients, you have to make sure you grab photos from a series. I’ve seen landing pages where it’s obvious that each image belongs to a different suite and it’s not coherent or nice to look at.
Check out this example of cohesive image galleries on one of Titan PPC’s lead gen landing pages for a lawn mowing client in Philadelphia:
Screenshot of cohesive image galleries, landing page designed by Titan PPC.
3. Remind visitors why they are on your page
Remember that bit about making sure your landing pages were super relevant to your visitors? Well, that sometimes means reminding them exactly why they are on your landing page.
Why? Because it brings a prospect right back to where you want them: the form.
It works because every time a visitor sees something visual and eye catching [like the image galleries], they’re then prompted to fill out the form.
4. Make the form match the offer
Speaking of taking prospects back to where you want them, the design of a form on your landing page should never be an afterthought. That means weighing, measuring and sifting every item from the questions to the CTA so it’s fully optimized to ensure a conversion.
It’s so key that the form matches the offer. Otherwise a prospect will just be turned off.
So if your client is offering a 100% free quote on plumbing services, then the form on your landing page should reiterate, loud and clear, that the offer comes at no price.
Sounds pretty straight-forward, doesn’t it?
But matching a form to an offer also means making sure you have a solid understanding of your target audience. As Patrick explains:
For real-estate clients, the CTA is always to download a free floor plan. But for clients that are service based, like plumbers or roofers, the CTA is always to get a free quote.
It all comes back to personalization: different types of prospects want to see different kinds of offers. According to Patrick, real-estate prospects want the feeling of exclusivity, whereas service-seeking prospects are probably just looking for the cheapest way to fix a runny faucet or leaky roof.
Titan PPC’s last tip for optimizing the form? Make the form catch your prospect’s attention.
We always put a starburst or icon in the corner of the form. It’s usually something like ‘100% free’ so it pulls a visitor in and reminds them why they want to fill it out!”
Here’s an example of what Patrick means:
Screenshot of a high-converting landing page form, designed by Titan PPC.
From showing your visitors ultra-relevant content to making sure that content has awesome design and flow, the landing page magic formula is all about giving prospects exactly what they’re looking for and expecting to see when they land on your page.
Care to try some of Patrick’s tricks yourself?
Sign up for a free 30-day trial of Unbounce and try the Hyperion template, a design inspired by Titan PPC’s powerful elixir for high-converting landing pages.
Did you know that by the time a teen in the US reaches 16 years of age, they are spending less than seven hours a week in nature, and these trends are worldwide. Parents are as concerned about their children not having time outdoors as they are about bullying, obesity and education. But they are unsure about what to do.
Parents have increased concerns for their children’s safety. They are less willing to let their children play outdoors without direct supervision. As a result, children spend most of their free time in organized sports, music and arts activities. This results in less time for unstructured play than in previous generations. Richard Louv, writer and nature-time advocate, describes this condition as a “nature deficit disorder.”
Digital experiences are emulating real life more and more every day. This may seem counterintuitive, considering the hate that rains down on skeuomorphic visual design, but there’s a lot more to emulating real life than aesthetics. Interface designers can emulate real-life physics and movement on a digital screen. This type of motion is becoming more common, which is why it’s becoming easier for people to understand computers. We’re not getting better, the interfaces are!
A quick and common example is how iOS opens and closes apps. The transitions are very subtle, but they’re realistic. Tapping an app icon doesn’t just snap a new app on to the screen. Instead, users see the app physically grow out of the icon. In reverse, pressing the home key shrinks the app back into the icon.
Those interactions are based on properties of the real world. The app appears to come from somewhere physical and disappear back to that place. The high quality and realistic transitions here go a long way toward helping the user understand what’s happening and why.
In this article, I’ll cover a little bit of the history of motion on the web, why that’s important, and what the future of motion on the web will look like. (Hint: motion is really important for usability, and it’s changing everything.) Then I’ll explain the CSS behind motion and how to use motion well.
The History Of Motion On The Web
It was only 2011 when all major browsers officially recognized CSS animation, and even now it requires browser prefixes to work everywhere. In large part, the push for CSS-driven animation was sparked by the death of Flash, where “movement was common” is an understatement.
In the days of Flash, some websites were basically movies. There was a lot of movement and animation, but most of it was unnecessary to navigate and absorb the content. It was for wow effect at best.
Flash was eventually forced out of the picture, but designers and developers were left without any really good tools for movement and animation on the web.
It wasn’t long before the CSS3 animation and transitions specs were accepted and implemented by modern browsers.
Designers now have the ability to take advantage of hardware acceleration and can control movement with their style sheets, further separating content and visual markup. In addition, today’s average computers are more than capable of rendering complex animations, and even phones are powerful enough to process an impressive amount of movement.
The Future Of Motion On The Web
The combination of capable machines and evolving CSS specs means things are going to change in interface design. Websites and apps are going to start taking advantage of motion and what it can do for usability. It’s already happening in a lot of ways, but here are some examples to look out for.
Layers are everywhere in modern web and app interfaces. Apple really pushed the concept of layers with iOS7. An example is the Control Center, which slides up from the bottom as a new layer that partially covers whatever’s on the screen.
Although layers aren’t movement in themselves, they go hand in hand because they work best when they animate in and animate out.
Layers are important because designers can keep information hidden on another layer until it’s called on, instead of refreshing the entire page to display large amounts of new information. This allows users to think less and understand more. It gives them context, which is the next thing you’ll start to see a lot of with motion.
Context is a broad term. For this discussion, I use it to refer to elements and pages that don’t just snap from one state to another without showing where they came from and why. Context helps us remove the digital mystery and therefore it helps users’ brains focus less on interpreting the interface and more on the content and their goals.
To illustrate how transitions can convey context, take a look at the Instacart iOS app. Tapping on an item to see more detail about it doesn’t just snap open a new view with the item details.
While that would likely be understood by most users, take a look at the GIF below to see what happens instead. We see the item’s picture move from its current position to a new position above the details view. We completely understand what happened and how it relates to the previous view. In fact, this doesn’t even feel like we’re switching from one view to another. This seems much more natural than that.
The effect is subtle, but it has huge usability implications. Another example is the newly popular drawer menu, where clicking a hamburger icon reveals a full menu.
If the user taps the icon and their entire screen is instantly replaced by the menu, they have no context as to where that menu came from and why. It won’t completely derail anyone, but it’s not a good user experience.
All it needs is to slide in from the left and suddenly the user has context for what’s happening: “Oh, the menu was just sitting offscreen, waiting to be called.”
You can see a drawer menu example in almost every popular app these days and on most mobile versions of websites. The GMail and Facebook apps are both excellent examples of this concept.
The Single Page Application
The next trend we’ll see are single page applications (SPAs). As we add motion and transitions to parts of our user interfaces, we’ll start to want more control of the interface as a whole (not the interface within each page). Websites can now handle all kinds of transitions from state to state within a page, but what about the transition from page to page? Any small gap when the screen goes white or shifts content around hurts usability.
That explains the rising popularity of the single page application. Right now, there are a lot of popular frameworks to build SPAs, and they’re more like native mobile applications than webpages (at least in some ways).
The result is a smooth, fast and logical transition from one screen to another. Once you sign in to the app, the entire experience is treated the same way. All the movement and transitions are driven by logic and context, and they make this web application feel more like a native application than a website.
How To Do CSS Motion
Single page applications present a good opportunity to take advantage of CSS motion, but there are plenty of other places to use it, including potentially every element on every website you make from now on. But how do we actually do it? What does the CSS look like?
To understand the basics of CSS motion, it’s important to start simple. What follows are explanations with examples, but they’re definitely minimum viable examples. Follow some of the links to learn much more about the in-depth aspects of each type of CSS motion.
There are many times when a little transition can go a long way. Instead of changing properties of an element in a split second, a transition gives the user some real context and a visual clue as to what’s happening and why.
This helps usability because it removes the mystery behind digital state change. In real life, based on physics, there is always a transition from any one thing to another. The human brain understands this, so it’s important to translate that visual information into our interfaces.
To start explaining CSS transitions, let’s first look at a state change without any transition.
Here’s that demo4. This example looks nice and natural. There’s probably little reason to animate the margin-left property of a button. You can imagine how this can apply to many different circumstances.
When we talk about the hover state, it’s easy to see how CSS transitions apply, but also consider triggering transitions by adding an additional class to an element. This trick will come in handy. How the class gets added has to do with your implementation, but any time a class is added or removed, it will trigger the CSS transition.
The basic CSS for an animation is a little more complicated, but it’s similar to CSS transitions in a lot of ways.
The reasons to use CSS animations are also similar to transitions, but there are some different applications. We want to emulate real life as much as possible so that human brains can do less work to understand what’s going on. Unlike transitions, however, animations can be looped and can move independently of user input. Therefore, we can use animation to draw attention to elements on a page. Or we can add subtle movement to illustrations or background elements to give our interfaces some life.
Animation benefits may seem less tangible, but they’re equally as important. It pays to add some fun to our interfaces. Users should love to use our products, and animation can have a big impact on the overall user experience.
Here’s a shorthand example of a CSS animation. We use a block of CSS keyframes and give it a name, and we assign that keyframe animation to an element. Again, since browser prefixes add a lot of code, I didn’t include them. I did, however, include them in the demo, because, unfortunately, we still need to include all browser prefixes in the real world.
To break it down, there are really only two things going on here.
First, there’s the animation property itself. It’s very much like the transition property, but it has a lot more that we can control. I used the shorthand version in my example, but just like the transition property, each part can be controlled as a separate CSS property (you probably do this with background all the time).
The shorthand animation property breaks down like this:
animation: [animation name (from keyframe block)] [duration] [timing function] [delay] [number of times the animation repeats] [animation direction] [fill mode]
The second thing going on is the keyframes block. At a very basic level, this is self explanatory. Set any number of percentages from 0–100 to represent how far through the animation we are from start (0%) to finish (100%). Then add any styles for that stage of the animation. When the animation runs, all styles will animate between the values you specify at each percentage number.
Again, not all properties animate, but as times goes on, we’ll be able to do more and more.
How To Do CSS Motion Well
Now that you know how to write the CSS for motion, it’s time to think about using motion well. All of the concepts here will fail if executed improperly. Transition and animation need to feel real. If they don’t, they’ll be surprisingly distracting, and the distraction will actually hurt usability.
The trick to making motion look natural is two-fold: easing and object weight.
You may have noticed the easing part in the code examples. In real life, objects start moving gradually and slow to a stop. Things don’t just start moving at 100% speed. That’s where the third property for the transition style comes in from the examples: ease-out or ease-in. Sometimes, your best bet is actually ease-in-out (here’s a list of all the possible easing (timing) functions8).
Weight, on the other hand, is not a specific property of the transition or animation style. Weight mainly affects motion speed, and the basic concept is that smaller objects would have less physical weight in real life, so they’d move faster than larger objects. That’s why we increased the transition speed on the button from the second to the third example above. A small button seems really slow when it takes 1 second to move 10 pixels. A quarter of a second seems much more natural. (You can also use milliseconds, as in the example below.)
transition: margin-left 250ms ease-out;
A Tip If You’re Just Getting Started
This all may seem like a lot. If you’re new to CSS transitions and animation, I’d recommend one important thing. Build in steps. If you write an entire, complex keyframes block in one shot and then add timing, easing and looping into the animation property, you’ll find out very quickly that you’re confused. It will be hard to tweak and edit that animation. Start simple, and build the animation up by testing and iterating.
Coming Full Circle
When you’re up and running and using CSS motion, you’ll start to notice all kinds of different uses for these techniques. In most cases, it’s much more than a bell and whistle or a superfluous add-on. Movement is a tool, and it conveys context, meaning, importance and more. It can be just as important as any other usability technique that we use today.
As interface designers take advantage of motion, and as interfaces start to behave more like objects and environments in the real world, usability and user experience will improve as well. Humans will have to think less about computer interfaces and therefore the interfaces will be easier to learn and easier to use. Users may feel like they’re getting smarter or more tech savvy, but really, the interfaces are just conforming more to the ideas and concepts they’re already familiar with in real life.
So take advantage of CSS motion as a usability tool. Help your users by giving them realism and context. The world on the small screen doesn’t have to be so different from the real world around us, and the more similar it is, the easier it is for users to understand it.
It’s that time of year again: graduation, when students transition away from the classroom to what will hopefully be a long and successful career in their chosen industry. I recently said goodbye to some of my own website design and development students. Instead of teaching lessons in design principles or responsive websites, I spent our final evening together answering their questions. One of those questions was, “What is the best career advice you’ve ever received?
College and university websites have a lot of roles to fill. They need to provide information for prospective students (both new and transfer), parents of students and prospective students, current students, and alumni. In many cases, they’re also the gateway to the school’s intranet and the public face for both academics and athletics. They often need to include reams of information in a way that makes everything easy to find.
It’s important to promote your design business. This is especially true when economic times are challenging, you’ve got news to announce, or you’re simply hungry for growth. Many forms of promotion are available to the modern designer – with banner ads and Google AdWords among the most popular. In this digital age, it’s easy for web and graphic designers to overlook one of the most effective and fun forms of promotion: the mail campaign.
Photoshop and Illustrator, as we’ve all come to realize, have revolutionized contemporary design and illustration, unleashing the creative potential of artists the world over. Through this tutorial, we’ll take you through process and technique, from sketch to Photoshop to Illustrator, so that you can learn skills to complement your ample creativity! [Updated May/02/2017]
Further Reading on SmashingMag: Beautiful Photoshop Illustrations By Artists Around The World Photoshop Techniques And Professional Tutorials 40 Excellent Adobe Illustrator Tutorials Tribute To Graffiti: 50 Beautiful Street Artworks Final Preview