If we asked you to describe an effective digital marketing campaign, you might tout the value of strong design, ad targeting, or the benefits of conversion optimization. But even if your web and landing pages are aesthetically on point, it can mean nothing if you haven’t considered page speed. For context, if it takes more than three seconds for a page to load, just over half of visitors will leave it. Put another way, for every second of impatient agony you’re causing visitors with slow load times, you’re losing conversions and profit.
Beyond your bottom line, page speed also influences how your content ranks with Google. In July of this year, the search engine announced that speed will have a more prominent effect on the ranking of mobile searches. So if you want your landing pages and web pages to appear in the SERP (paid or search), you need them to be lightning-fast.
To paint a picture of why load time is so essential, we’ve collected seven stats about page speed. We’re currently doing some original research of our own on this, but for now, read on to learn why slow and steady doesn’t win the digital marketing race and use these fast facts to make the case for speeding up your landing pages.
When creating a landing page, you consider several factors (layout, content hierarchy, visuals, CTA, and more). But as Google encourages, page speed needs to be a priority too. Your visitors don’t like waiting—and their frustration has only grown since the 2015 survey linked above—so always consider load time (regardless of device) just as much as traditional design elements. Watch your image sizes and compress any that are borderline too heavy. Anything above 800kb is pushing your luck in the speed department.
(And that’s on simulated 4G and everything!) But that’s also just accounting for mobile—in general, pages can load much faster on desktop. According to the latest from Pingdom, for example, most web pages load in just 3.21 seconds. At a minimum, you should aim for a load time of three seconds or less—especially if you want to boost conversions.
When Akamai studied how mobile load times affected a client’s conversions, they discovered that 2.4 seconds was the sweet spot, averaging a peak mobile conversion rate of 1.9% during a 30-day span. On the flipside, when their client’s site loaded in 4.2 seconds, the average conversion rate dropped below 1%.
Ultimately, aiming for anywhere between 2.4 to 3 seconds on mobile and desktop is a smart move.
While you can definitely aim for quicker than five seconds, the point here is that the longer people spend on your pages, the more time they have to consume your content and actually convert. You work hard to build persuasive offers—so keep visitors on your landing pages by ensuring that they load quickly enough for them to actually see (and understand!) your key messaging.
Similar to Google’s stat about conversions dropping by 12% for every second of load time, Akamai comes to the table with another time-is-money figure. According to their research in 2017, one full second can decrease conversion rates by 70%! So, in addition to losing visitors, page speed is directly tied to losing a lot of potential revenue—something Mobify discovered when they decided to examine the effects of homepage load time. In its 2016 Q2 Mobile Insights Report, the online shopping platform revealed that every 100-millisecond decrease in load time worked out to a 1.11% increase in session-based conversion.
Hey, we’ve all been there. Even though faster speeds are constantly being offered to visitors (via telecom ads, internet providers, etc.), many websites still aren’t loading fast enough. That’s bad news for visitors, but great news for you in that there’s an opportunity to stand out if you speed up. SEMrush reports that “if your site loads in 1.7 seconds, it’s faster than approximately 75% of the web.” Use this as an opportunity for your brand to make a competitive move with websites and landing pages that load faster than most. It’s time to make speed a priority.
The online shopping experience isn’t just about website aesthetics or customer service; it’s about overall performance, which includes page speed and responsivity. This stat shows that something like a slow loading site can easily turn visitors away—sometimes for good.
A high bounce rate indicates visitors aren’t staying on your website for very long—I mean, sure they’re landing there, but they’re not consuming more content than the page they’re on right at that moment. And who knows how much of it?! This can mean they’re not clicking your CTA to a next step, nevermind learning about your key value prop.
It can be difficult to determine why, exactly, someone has left your landing page—poor audience targeting? Uninteresting content? Not enough multimedia? And if page speed is affecting bounce rate, you might begin to second guess your content. Save yourself some time (and confusion) by prioritizing page speed via solutions like Accelerated Mobile Pages (AMP).
Are slow loading pages affecting your digital marketing campaigns? Join our AMP beta and be one of the first to give your visitors a near-instant mobile experience.
Now, returning to our question about the most important thing to consider when designing a digital marketing campaign? Hopefully, with all of these stats in mind, you have a new perspective. Page speed is one of the first things visitors experience when they arrive on your site or landing page, and as load time continues to become a priority (for both mobile and desktop environments) it will only be more integral to the success of your online strategy—so you gotta hurry up!
Over 85% of online consumers these days are engaging with brands locally, whether through local listings, local sites, or search results. So you can’t be blamed for thinking that geo-targeting and running local PPC campaigns in Google Ads make a whole lot of sense.
The only problem? If you work at a multi-location franchise or company with multiple offices, local PPC at scale can be very messy.
First of all, it eats up a lot of resources to set up and maintain. And, second, when you’re trying to appeal to prospects in many locations with different ads and landing pages, mistakes and resource costs can easily kill your Google Ads campaign profitability.
The good news, however, is that—by using smart strategies and tools—you can scale your local PPC campaigns and target several locations at once without too many headaches.
Let’s explore this process.
Scale Local PPC Campaigns with Flexible Structure
First of all, scaling can be messy without proper Google Ads campaign structure. Good structure keeps things clean—and keeps you sane in the process.
I have two rules when it comes to structure for scaling local campaigns:
Rule #1. Have a keyword theme for each campaign.
Rule #2. Break your campaigns down into geo-focused ad groups.
Rule #1. Have a keyword theme for each campaign.
Your goal in establishing keyword themes is to match your paid audience with the message that is most relevant to their search intent.
This means that each theme should represent a specific stage in the Buyer’s Journey, so you know how it fits into your overall PPC Strategy.
For instance, if you’re running campaigns for an interior design studio, your campaigns would break down into the followings stages:
Decision stage. Targeting people who know what they the want (ie. “kitchen remodeling”) and have already decided on it.
Consideration stage. Targeting people who are considering an action (“should we remodel our kitchen?”) but haven’t decided yet.
Awareness stage. Targeting people who may be DIY-types or people who are starting their research (“what’s involved in kitchen remodeling?”) related to the services your company offers.
Once you’ve organized your campaigns into keywords themes in this way, you’ll need to figure out the ad groups they contain.
Rule #2. Break your campaigns down into geo-focused ad groups.
Rule #2 is about creating geo-focused ad groups. That is, you should break your campaigns down into ad groups that are location specific.
Why is this important?
Not surprisingly, different types of location searches perform differently. Segmenting them helps you to see the big picture, prioritize the optimization efforts, and finally scale to suit your needs.
To explore this idea further, we analyzed a few client categories, such as construction, legal, real estate, and interior design with over $10,000 in local PPC ad spend. Our research showed that searches with location performed better than general searches.
Our results show better performance when location is mentioned in search terms (via SCUBE Marketing)
Knowing this, I like to segment campaigns into four types of geo-focused ad groups:
Location SKAG (single keyword ad groups)
Doing so helps create unique ads that are most relevant to prospects for each type of ad group at scale. Here’s a bit of information on each, with examples to make things clear:
Non-Location ad groups represent general theme-based searches with no location modifier. Here is an example of what this ad group looks like:
Example of Non-Location
Pro Tip. If search terms with locations are accidentally triggered in this ad group, use negative keywords to exclude them. You can then add the relevant keywords in the SKAG or Other Locations ad groups.
The number of “near me” searches has been growing (as a result of increased use of mobile devices and voice search) over the past five years. This type of search represents Google’s Micro-Moments philosophy, where you have to “Be There,” “Be Useful,” and “Be Quick” in order to stay relevant to consumer behavior.
Near Me search term interest in the past five years (via Google Trends)
Because of the increased importance of this type of search, you should keep “near me” in an ad group separate from the others. See the example below:
Example of Near Me
You may already be familiar with single keyword ad groups (SKAG). As the name suggests, they’re ad groups dedicated to just one keyword. For local PPC campaigns, you can use Location SKAG to separate locations with enough traffic, when it makes sense to track separately.
Here’s an example:
Example of Location SKAG
Finally, Other Locations ad groups represent all locations you are targeting except the ones in Location SKAG. The benefit of this is that you won’t need to create hundreds of ad groups that generate little traffic but require a lot of management time.
This ad group is the place for location-based keywords unless (or until) they get enough traffic to split them into their own Location SKAG.
Example of Other Locations
Remember, once locations within this category become significant, you will want to promote them to separate Location SKAG.
Pro Tip. Don’t overdo the number of keywords you use. Google has extended its exact match keyword to cover not only plurals and close variants but also word ordering and function words in exact match keywords. Simply put, this means you don’t need as many keywords, and including too many will make your life harder.
Maintaining separate ad groups helps you prioritize optimization and testing efforts so you can have an impact and stay efficient with your time.
At this point, you may be asking:
But Tom, how can you have a message match between location search and your ad headline when you have many keywords in the ad group?
The short answer is Ad Customizers…
Scale with ad customizers
Message match is all about making sure your prospects’ keywords, your ads, and your landing pages are all consistent. It can have a significant effect on your conversions.
For good message match when scaling your local PPC campaigns, your ad has to match search terms with locations. This is why locality elements such as City, State, or even the word “local” (literally) matter a lot in your local PPC ad campaigns.
For most campaigns, creating unique ads for Non-Location, Near Me, or Location SKAG is manageable. But, when you get into the “Other location” category, creating relevant ads without the dedicated ad groups can be tough.
That’s why ad customizers are your best friend when scaling local PPC campaigns:
Ad customizers adapt your text ads to what someone is searching for, which device she’s using, where he’s located, or even the date, time of day, or day of the week. They can insert a price, the time left before a sale ends, and any other text that you define.
You need two things to make ad customizers work:
A dataset with attributes to use in your ads
Ads to present the attributes
Let’s start with the dataset. All you will need is a simple spreadsheet that you can upload to the Business Data section in Google Ads. The spreadsheet will contain two types of data for your ads:
Attributes: In other words, what you want to customize in your ad. This can be text, price, number, or date.
Targeting: These signal when the attribute becomes active. There are seven targeting attributes. For local campaigns, however, location of interest and physical location targeting are the most useful.
Ad customizer data
In the example above, we automatically include “In Chicago” in the ad text when the person searching is physically in Chicago.
Pro Tip. Remember the name of the dataset (a.k.a. the spreadsheet) because you will need to reference it in the ads. See the example below:
Using the name of the dataset
Once you have your data, apply it in your ads. Whether you’re creating a new ad or editing an existing one, define the dataset and attribute you want to use in it. It will look like the example below:
Ad customizer data
Once the conditions are met, the ad will automatically show the attribute defined in the dataset.
The final result will look like the example below, where the location name we defined (“In Chicago” in this case) will dynamically show up when the searcher is physically located in our defined location (Chicago).
Ad customizer data
Pro Tip. Always keep one default ad without ad customizers for cases in which the conditions are not met. Otherwise, the ad group will not serve, and you’ll miss out on potential traffic.
Scale Landing Pages for Local PPC Ads with Dynamic Text Replacement (DTR)
To create a local experience for visitors searching for local products or services, you need to emphasize location on your landing pages.
To do this, you could create hundreds of landing pages using your CMS. While this approach will get the job done, it’s convoluted and extremely slow.
Alternatively, you could custom code a template connected to a location database and automatically create hundreds of landing pages.
With both of the above options, though, you end up managing hundreds of landing pages, which will create issues.
No matter the approach, the ramp-up time for developing new landing pages can take weeks. Landing page customization usually takes us 3 to 4 hours per location. It’s not an efficient way, especially if you planning A/B testing and updates.
With efficiency in mind, how do you get the job done faster?
Here’s a real-world example. The landing page below has a unique headline for keywords representing different locations, so a visitor in Houston will see a different headline than a visitor in San Antonio.
Keyword insertion using Dynamic Text Replacement (DTR)
Fortunately, DTR is easy to implement. You need just three components to swap out this location keyword dynamically:
Keywords, which will affect the URL
A URL tracking template, which will use the triggered keyword in the URL
And a landing page with Dynamic Text Replacement, which will read the URL and change the content based on the keyword in the URL
First, use the keywords from the campaign structure I covered above. You will find this feature especially useful for Location SKAG and Other Location ad groups.
Second, set up a URL template with ValueTrack parameters. The tracking template must have keyword parameters in order to work. You can see an example of this below:
URL template example
Finally, set the content to change when the URL triggers the keyword defined in your tracking template. Don’t forget to set the default text, in case the URL doesn’t have a keyword.
The example below displays the how Dynamic Text Replacement looks in the Unbounce Builder, which you can use to accelerate the creation of your landing pages:
Dynamic Text Replacement (DTR) in Unbounce
Pro Tip. If you want more detailed instructions on how to set up Dynamic Text Replacement in Unbounce, take a look at the “How To” guide to learn the ins and outs of implementing it with Google Ads Keyword Insertion.
To summarize, you can scale local PPC campaigns with minimal pain by focusing on campaign structure, ad customizers, and dynamic text insertion from ad to landing page. Investing the time to implement these strategies early on in your scaling efforts will pay off in the long run.
How are you scaling your local PPC campaigns? Have any hot tips that I missed? Let’s discuss your methods in the comments below.
Next, we’ll use the “Audits” panel (Lighthouse) from Chrome DevTools to analyze our web application against the core tenets of PWAs. Finally, we’ll explain and add the PWA features to our web application according to the “Progressive Web App” section in the Lighthouse report.
Before we start implementing our PWA, let’s first introduce PWAs and Lighthouse.
A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set of essential requirements that we’ll see next. PWAs are similar to native apps but are deployed and accessible from web servers via URLs, so we don’t need to go through app stores.
Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
Fit any form factor, desktop, mobile, tablet, or whatever is next.
Enhanced with service workers to work offline or on low-quality networks.
Use the app-shell model to provide app-style navigation and interactions.
Always up-to-date thanks to the service worker update process.
Served via HTTPS to prevent snooping and ensure content has not been tampered with.
Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Make re-engagement easy through features like push notifications.
Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Easily share via URL and not require complex installation.
Lighthouse is an open-source auditing tool created by Google which can be used to audit websites and applications for accessibility performance, SEO, best practices and PWA features.
You can access Lighthouse from the Audit tab in Chrome DevTools as a module in Node.js or as a CLI tool. You can use Lighthouse by providing an URL and then running the audits which will provide you with a report containing the auditing results which are basically suggestions on how you can improve your web application.
Installing Angular CLI v6 And Generating A Project
In this section, we’ll install the latest version of Angular CLI then we’ll use it to create a new Angular 6 project.
Angular CLI requires Node.js >= 8.9+ so first make sure you have the required version installed by running the following command:
Now, you can go ahead and install the latest version of Angular CLI by running:
$ npm install -g @angular/cli
Note: Depending on your npm configuration, you may need to add _sudo_ to install packages globally.
You can generate your Angular 6 project by running the following command in your terminal:
$ ng new pwademo
This will create a project with a structure that looks like:
Most work that’s done will be inside the src/ folder that contains the source code of the application.
Creating The Angular Application
After generating a project, we’ll build a web application that consumes a JSON API and displays the items on the home page. We’ll use the HttpClient service for sending HTTP requests and Angular Material for building the UI.
Adding Angular Material
Thanks to Angular CLI v6 and the new ng add command, adding Angular Material to your project is only one command away. You just need to run the following command from your terminal:
$ cd pwademo
$ ng add @angular/material
You can see from the screenshot that the command installs the required package from npm and update a bunch of files for setting up Angular Material in your project which previously needed manual updates.
Setting Up HttpClient And Consuming The JSON API
Now, let’s setup the Angular project to use HttpClient for sending HTTP requests. First, you need to import the HttpClientModule module in the main application module in the src/app/app.module.ts file:
That’s it. We can now inject and use HttpClient in any component or service that belongs to the main module.
Let’s create a service that interfaces with the API. Inside your project folder, run:
$ ng g service api
This will create a service called ApiService in the src/app/api.service.ts file.
Now open the src/app/api.service.ts file and update it to reflect the following changes:
We first imported the HttpClient and Observable classes then injected the HttpClient in the constructor as httpClient and added a fetch() method which calls the get() method of HttpClient (for sending an HTTP GET request to our JSON endpoint) and returns an Observable that we can subscribe to later.
We also declared an Item interface which represents a single item of the returned JSON data.
Next import this service from the application component. Open the src/app/app.component.ts file and add:
import Component, OnInit from '@angular/core';
import ApiService from './api.service';
import Item from './api.service';
export class AppComponent implements OnInit
title = 'pwademo';
constructor(private apiService: ApiService)
this.items = data;
We import the ApiService that we created before and we inject it as apiService, we also import the Item class which represents a single item of our JSON data and we declare the items variable of type Array<Item> which will hold the fetched items.
Next, we add a fetchData() method which calls our fetch() method that we defined in the ApiService which returns an Observable. We simply subscribe to this observable in order to send a GET request to our JSON endpoint and get the response data that we finally assign to the items array.
We call the fetchData() method in the ngOnInit() life-cycle event so it will be called once the AppComponent component is initialized.
Adding The Application UI
Our application UI will consist of a navigation bar and the skeleton of the page which will be created with Angular Material.
Before using an Angular Material component, you’ll need to import its module. Each Material component belongs to its own module.
Open the src/app/app.module.ts file and add the following imports:
import MatToolbarModule from '@angular/material/toolbar';
import MatCardModule from '@angular/material/card';
import MatButtonModule from '@angular/material/button';
export class AppModule
We import modules for toolbar, card and button components and we add them to the imports array of the AppModule.
Next, open the src/app/app.component.html file, delete what’s in there and add:
We use Material components to create the UI. The <mat-toolbar> component is used to create a Material toolbar and the <mat-card> component is used to create a Material card etc.
We iterate over the items array which gets populated by the fetchData() method when the component is initialized, and display items as Material cards. Each card contains the name, description and a link for more information (The link is styled as a Material button using the mat-raised-button directive).
This is a screenshot of the application:
Building The Application For Production
Typically, when checking your application for PWA features you should first build it for production because most PWA features are not added in development. For example, you don’t want to have service workers and caching enabled in development since you will periodically need to update the files.
Let’s build the application for production using the following command:
$ ng build --prod
The production build will be available from the dist/pwademo folder. We can use a tool like http-server to serve it.
First, install http-server using the following command:
$ npm i -g http-server
You can then run it using the following command:
$ cd dist/pwademo
$ http-server -o
The -o option will automatically open the default browser in your system and navigate to the http://127.0.0.1:8080/ address where our web application is available.
Analyzing The Application Using Lighthouse
Let’s now analyze our application using Lighthouse. First, launch Chrome and visit our application address http://127.0.0.1:8080/.
Next, open Developer Tools or press Ctrl + Shift + I and click on the Audit panel.
You preferably need to set the Emulation to Mobile instead of Desktop to emulate a mobile environment. Next, click on Perform an audit… blue button. You’ll have a dialog opened in which you need to choose the types of the audits you want to perform against your web application. Un-check all types but Progressive Web App and click the Run audit button.
Wait for the Lighthouse to generate the report. This is a screenshot of the result at this stage:
Lighthouse performs a series of checks which validate the aspects of a Progressive Web App specified by the PWA Checklist.
We get an initial score of 36⁄100 that’s because we have some audits passed.
Our application has 7 failed audits mainly related to Service Workers, Progressive Enhancement, HTTPS and Web App Manifest which are the core aspects of a PWA.
Registering A Service Worker
The first two failed audits (“Does not register a service worker” and “Does not respond with a 200 when offline”) are related to Service Workers and caching. So what’s a service worker?
A service worker is a feature that’s available on modern browsers which can be used as a network proxy that lets your application intercept network requests to cache assets and data. This could be used for implementing PWA features such as offline support and Push notifications etc.
To pass these audits we simply need to register a service worker and use it to cache files locally. When offline, the SW should return the locally cached version of the file. We’ll see a bit later how to add that with one CLI command.
The fourth failed audit (“Does not redirect HTTP traffic to HTTPS”) is related to HTTPS which is also a core aspect of PWAs (service workers can be only served from secure origins, except for localhost). The “Uses HTTPS” audit itself is considered as passed by Lighthouse since we’re auditing localhost but once you use an actual host you need a SSL certificate. You can get a free SSL certificate from different services such as Let’s Encrypt, Cloudflare, Firebase or Netlify etc.
The Web App Manifest
The three failed audits (“User will not be prompted to Install the Web App”, “Is not configured for a custom Splash Screen” and “Address bar does not match brand colors”) are related to a missing Web App Manifest which is a file in JSON format that provides the name, description, icons and other information required by a PWA. It lets users install the web app on the home screen just like native apps without going through an app store.
You need to provide a web app manifest and reference it from the index.html file using a <link> tag with rel property set to manifest. We’ll see next how we can do that automatically with one CLI command.
Implementing PWA Features
Angular CLI v6 allows you to quickly add PWA features to an existing Angular application. You can turn your application into a PWA by simply running the following command in your terminal from the root of the project:
$ ng add @angular/pwa
The command automatically adds PWA features to our Angular application, such as:
A manifest.json file,
Different sizes of icons in the src/assets/icons folder,
The ngsw-worker.js service worker.
Open the dist/ folder which contains the production build. You’ll find various files but let’s concentrate on the files related to PWA features that we mentioned above:
A manifest.json file was added with the following content:
As you can see, the added manifest.json file has all the information required by a PWA such as the name, description and start_url etc.
The manifest.json file, links to icons with different sizes, that were also added automatically in the assets/icons folder. You will, of course, need to change those icons with your own once you are ready to build the final version of your PWA.
In the index.html file, the manifest.json file is referenced using:
<link rel="manifest" href="manifest.json">
The ngsw-worker.js file, was also automatically added, which contains the service worker. The code to install this service worker is automatically inserted in the src/app/app.module.ts file:
Another file src/ngsw-config.json is added to the project but It’s not a required file for PWAs. It’s a configuration file which allows you to specify which files and data URLs the Angular service worker should cache and how it should update the cached files and data. You can find all details about this file from the official docs.
Note: As of this writing, with the latest 6.1.3 previous ng add @angular/pwa command will fail with this error: Path “/ngsw-config.json” already exists so for now the solution is to downgrade @angular/cli and @angular/pwa to version 6.0.8.
Simply run the following commands in your project:
$ npm i @email@example.com
$ ng i @firstname.lastname@example.org
$ ng add @angular/pwa
Now let’s re-run the audits against our local PWA hosted locally. This is the new PWA score:
Next, rebuild your application and re-run the audits. This is the result now:
In this tutorial, we’ve built a simple Angular application and have turned it into a PWA using Angular CLI. We used Google’s Lighthouse to audit our application for PWA features and explained various core tenets of PWAs such as Service Workers for adding offline support and push notifications. The Web Manifest file for enabling add-to-home-screen and splash screen features, Progressive Enhancement as well as HTTPS .
You may also need to manually check for other items highlighted (under the “Additional items to manually check” section) but not automatically checked by Lighthouse. These checks are required by the baseline PWA Checklist by Google. They do not affect the PWA score but it’s important that you verify them manually. For example, you need to make sure your site works cross-browser and that each page has a URL which is important for the purpose of shareability on social media.
Since PWAs are also about other aspects such as better perceived performance and accessibility, you can also use Lighthouse for auditing your PWA (or any general website) for these aspects and improve it as needed.
As a marketer, there are only so many conferences I can attend in a year — and this year all three happened to fall within two weeks of each other. By far the best one I attended was Klaviyo: BOS, a two-day summit focused on growth tactics and business strategy for online merchants and ecommerce brands. By the end of Day 1 my notebook was swimming with underlines, stars, and arrows with multiple circles around ideas and topics I wanted to explore once I got back to my co-working space. By the end of Day 2 I was so inspired…
Have you ever faced down a giant table or spreadsheet of data and thought, “I have no idea what to do with this”? As marketers we’ve all probably had those deer-in-the-headlights moments once or twice, where we’ve floundered to figure out what the hell we’re looking at. Crazy Egg was built on the premise of simplicity and ease of use, for those that I fondly like to call “Google Analytics-averse” – but there’s always room for improvement when it comes to helping folks switch from analysis to action mode. Whether you’re a UX designer, small business owner, SEO expert or…
We live in a fast-paced world. People want things as quickly as possible — and they’re unhappy when something takes too long. Website speed optimization takes away one barrier between you and your audience. Think about the last time you encountered a slow-loading website. You might have closed out the browser tab entirely or felt less inclined to patronize the site once it finally loaded. Google understands that consumers want fast access to information, products, and services. Consequently, it rewards websites that load quickly. Let’s take a look at a few ways in which you can use website speed optimization…
Get Your Mobile Site Ready For The 2018 Holiday Season
After reading the title of this article, it might seem like it’s jumping the gun, but with retailers turning on holiday music and putting out holiday-related displays earlier and earlier every year, your consumers are primed to start thinking about the holidays earlier, too. In fact, a study done by the Tampa Bay Times revealed that in-store shoppers were exposed to holiday music as early as October 22 in 2017.
Of course, e-commerce handles the holiday season a bit differently than brick-and-mortar. It’s not really necessary to announce promotions or run sales in late October or early November. However, that doesn’t mean you should wait until the last minute to prepare your mobile website for the holidays.
In this article, I’m going to give you a quick rundown of what happened during the 2017 holiday sales season and, in particular, what role mobile played in it. Then, we’re going to dig into holiday design and marketing tactics you can use to boost sales through your mobile website for the 2018 holiday season.
Before we get started, I want to quickly add a disclaimer:
This particular section focuses on e-commerce statistics because this kind of data is readily available. Something like the total number of page visits, subscribed readers, and leads generated… well, it’s not.
So, although I only use data to express how important mobile was to 2017 holiday sales, keep in mind that the tips that follow pertain to all websites. Even if your site doesn’t expressly sell goods or services, blogs and other content-driven sites can take advantage of this, too!
Now, let’s take a look at the numbers:
Total Retail Sales
The National Retail Federation calculated the total amount of retail sales–online and in-store–to be $691.9 billion between November and December, a 5.5% bump from 2016.
Total e-Commerce Sales
Adobe put the total amount of e-commerce sales during that same timeframe at $108.15 billion in 2017.
e-Commerce Sales By Device
Adobe takes it even further and breaks down the share of revenue by device:
e-Commerce Sales vs. Traffic
While smartphone and tablet sales still trail those on desktop, there are a couple interesting things to note here. For starters, desktop revenue has mostly flatlined year-over-year whereas mobile continues to grow. In addition, there’s an interesting disparity between how much traffic comes from each device and what percentage of revenue it generates:
Pay close attention to desktop and smartphone. As you can see, more visits stem from smartphones than any other device and, yet, desktop leads the way in conversions:
Is this indicative of a lack of trust in smart devices to handle purchases?
In all likelihood, it probably isn’t. Data from other sources indicates that on holidays, in particular, mobile reigns supreme in terms of visits and conversions:
Thanksgiving Day: 62% of traffic / 46% of purchases.
Christmas Day: 68% of traffic / 50% of purchases.
Also, let’s not forget to take into account the strengths of mobile devices within the shopper’s experience. According to the four micro-moments as defined by Google, a large number of mobile users commonly search for the following:
“I want to know.”
“I want to go.”
“I want to do.”
“I want to buy.”
The second and third are clearly indicative of a searcher’s desire to find something outside their devices (and their homes) to spend money on. That might even be so for the fourth, though it could also be an indication that they want to do their research on mobile and complete the purchase on desktop.
Either way, we know that smartphones tend to be a primary facilitator in the customer’s journey and not something that’s putting an end to the shopping experience as a whole.
5 Tips To Prepare Your Mobile Site For The 2018 Holiday Season
While the overall numbers indicate that desktop is the leading platform for holiday sales, it’s not a universal rule that can be applied to each and every day in November and December. This is why your own data will have to play a big role in the design choices you make for your mobile site this season.
You have to admit, no matter how stressed or unhappy you might feel around the holidays, there is something nice about encountering just the right hint of holiday “cheer”. And that’s one of the keys to doing this right: finding the right amount of holiday flavor to infuse into your website.
Before we get into what you can do to spruce up your mobile web design, I want to remind you that security and speed are critical elements to check off your list before November gets here. These might not be in your realm of responsibilities, but that doesn’t mean you shouldn’t keep an eye on them.
If you’re doing all this design work in anticipation of boosting conversions over the holidays, don’t let it all be for nothing by forgetting about performance and security essentials. To protect your site from potentially harmful traffic surges, start with this front-end performance checklist. With regards to security, you can use these security improvement tips.
Now, let’s talk about the five ways in which you can prepare your mobile website for the 2018 holiday season:
1. Study Last Year’s Data
If your website has been live and actively doing business for more than a year, you need to start with the data from 2017. Using Google Analytics and your CRM platform, locate answers to the following questions:
What was the prominent device that generated traffic? Sales?
Google Analytics allows you to divvy up traffic based on technology in a number of ways:
Under Browser & OS, you can sort visitors by browser:
There is a small tab at the top of the table for “Operating System”. Click that to reveal which OS were used:
You can use the Mobile → Overview tab to look at the simple breakdown between desktop, mobile, and tablet users.
Really, your goal here is to weed out desktop users so you can focus strictly on mobile traffic as you assess the following data points.
When did your site experience an increase in traffic in November or December?
Every website’s holiday traffic history will look a little different. Take mine, for example:
My business really isn’t affected by the holidays at all… except that I know things are going to be super quiet on and around Thanksgiving and the major holidays in December. This is still important information for me to have.
For businesses that directly sell products or services through their site or content-based sites that plan publication schedules based on traffic, you’ll likely see a different trajectory in terms of highs and lows.
When did sales start to increase (if they don’t coincide with traffic)?
Again, for some of you, the matter of sales is irrelevant if you don’t offer any through your site. For everyone else, however, use the Google Analytics Conversions tab along with sales logged through your payment gateway or CRM to check this number.
Just remember that you have to activate the Conversions module in Google Analytics if you want it to track that data. If you didn’t remember last year, put it in place for this year.
Did the holiday uptick remain consistent until the end of the season or were there temporary dropoffs?
Much of this has to do with how you promote holiday-related events, promotional offers or content through your website. If you consistently market around the holidays from November 1 to the end of the year, you should see relatively steady traffic and sales.
Some days, of course, may be slower than others (like during workdays or earlier in the season), so it’s good to get a sense for the ebb and flow of your site’s holiday traffic. On the other hand, your website might be a major draw only on special sales days and the holidays themselves, so you can use this data to harness your energy for a big push on the days when it’ll have the greatest impact.
Try to identify patterns, so you can plan your design and marketing strategy accordingly.
When did traffic and sales return to their usual amount?
At some point, your site is going to see a dip in activity. There are some businesses that embrace this.
Let’s use Xfinity as an example. Around mid-November of last year, this is the holiday-centric message the top of the home page was pushing:
A month later, on December 9, any mention of the holidays was gone and replaced by a promotion of the upcoming Olympic Winter Games.
One can only assume that a major sporting event like the Olympics helps Xfinity sign more subscribers than trying to capture last-minute sales for the holidays.
Logically, this makes sense. December is a busy time for families. They’re planning travel, purchasing gifts and running around town in preparation for the upcoming celebrations. Most people probably don’t have time to set up a new cable or Internet package and wait around for Xfinity to configure it then.
Bottom line: it’s okay if your holiday-related traffic and sales drop off earlier than December 31. Study your data and let your user behavior guide you in your mobile design and promotion strategy.
What were the most popular sources for mobile traffic?
It’s actually not enough to identify the most popular sources of mobile traffic for your site. Sure, you want to know if organic SEO and social media promotional efforts worked to bring traffic to it… but it won’t really matter if those visitors abandoned the site without taking action.
When you start digging through the ways in which you acquired mobile visitors, make sure to review the sources and keywords used against other telling metrics, like:
Time on site
This will give you a good sense for what sources — e.g. keywords, PPC ads, social media content, promotional backlinks from other sites — that attracted high-quality leads to it during the holiday season.
What were the most/least successful promotions?
One more thing to look at is what exactly performed the best between November and December with mobile visitors.
Did you run a pop-up promoting free shipping that was dismissed by most mobile visitors, but greatly taken advantage of by those on desktop? Did your custom home page banner touting an upcoming Black Friday sale get more clicks than the home page banner otherwise does at other times of the year? And what pathway resulted in the most conversions?
Dig into what exactly it was that appealed to your mobile visitors. Then, as you work on this year’s plan, focus on reproducing that success.
2. Assess The Navigation
The navigation plays two important roles on a website:
High-level tabs inform visitors on what they’ll find on the site; essentially answering the question, “Is this of relevance to me?”
The navigation itself provides visitors with shortcuts to parts of the site that matter most to them, simplifying their pathway to conversion.
When reviewing your navigation in the context of holiday traffic, you must ensure that it fulfills both of these roles.
Let’s look at two websites that provide relevant links during the holidays while also streamlining the visitors’ journey from entry to holiday-related pages.
Food52 is an online hub for people who enjoy cooking. You can buy kitchen gadgets from the site and peruse a whole bunch of content related to food and cooking.
I want to call out a number of things Food52 does especially well in terms of navigation:
The hamburger menu is prominently displayed in the top-left, which is exactly where visitors’ eyes will go as they follow the Z-shaped pattern for reading.
The shopping cart, search bar shortcut and profile link are also displayed in the top header, making it easy to navigate to elements that support the shopping experience.
If you scroll down on the home page (as I’ve done in the screenshot above), Food52 includes a good mix of Thanksgiving-related content along with its standard fare. In addition, it includes categories that help users filter through content that’s most relevant to them.
One other thing I’d like to point out is the navigation itself:
There are a number of things you’ll notice:
The mobile navigation is quite simplified. Despite how many categories and types of pages the site has, the navigation keeps this from being an overwhelming choice.
There are special tabs for Thanksgiving and Holiday. This will get users directly to content related to the holiday they’re cooking for.
The Hotline — which is its customer service forum — is also featured in the mobile navigation. This element is especially important around the holidays when visitors have questions they need answered quickly.
L.L.Bean is another website that handles mobile navigation well.
As you can see, there are four buttons located within the mobile header:
Hamburger navigation icon: bolded and well-placed;
L.L.Bean logo for easy backtracking to the home page;
A shopping cart icon which will keep stored items top-of-mind with mobile users;
An ever-present search bar to speed up navigation even further.
Once a mobile user expands the hamburger navigation, they encounter this:
As you can see, “Call Us” is the first option available within the mobile navigation. Again, with people in a rush and trying to get purchases done right over the holidays, having a direct line of communication to the company is important. The account link and “Ship To” personalization are also nice touches as these icons keep conversion top-of-mind.
Now, looking down the navigation, you’ll see this is a pretty standard mega menu. However, take note that at the very top of this category (as is the case for all others) appears a page for “Gifts”. This is not something you see the rest of the year, so that’s another holiday-related touch meant to streamline searches and sales.
3. Use Add-ons At Checkout
Here is everything you need to know to optimize conversions at mobile checkout. If I can add an additional two cents to this matter, though, I’d like to briefly talk about add-ons at checkout… but only around the holidays.
Typically, I believe that a fully streamlined checkout process is essential to capturing as many conversions as possible on mobile devices. It’s hard enough typing out all that information (if it doesn’t auto-populate) and trusting that devices and websites will keep payment information secure.
When it comes to designing the checkout for holiday shoppers, I think it’s at least worth experimenting with add-ons. For example:
Free delivery options
Shorter, but more premium delivery or pick up in store options
Nordstrom doesn’t even wait for visitors to get to the checkout to promote this.
The very top of the site has a sticky bar promoting the free shipping and returns offer. This way, visitors are already in the mindset that they can get their Black Friday purchases or holiday gifts for even cheaper than planned.
The top-half of the Fitbit homepage gets visitors into the mindset that there are cost savings galore here. Not only are items on sale, but certain orders come with free and expedited shipping. And the site clearly states when the sale ends, which will keep customers from getting upset if gifts don’t arrive on time. (It will also probably motivate them to get their shopping done sooner if they want to cash in on the sale.)
So all appropriate expectations regarding pricing and shipping are set right from the very get-go, making checkout go more smoothly.
Anything you can add to checkout that says, “Hey, we’re thinking about you and want to make this holiday season go just a little more smoothly” would go over well with your users.
4. Give Images A Seasonal Touch
Images are a tricky thing this time of year. You want to use them to appeal to holiday-minded visitors, but you don’t want to overdo it because images add a lot of pressure to your server. You need your site running fast, so be smart about what you do with them.
Resize them before you ever add them to your site. There’s no need to use oversized images if they’re going to appear smaller online.
Optimize your images with compression tools before and after they’re added to the design. This will free up some space they would otherwise take.
If your users’ journey starts above-the-fold, you might want to consider lazy-loading images.
That said, images can go a long way in communicating to visitors that your site and business are ready to spread some holiday cheer without having to ever explicitly say it. This might be the ideal choice for those of you who design websites for global audiences. Perhaps you’d rather use an image that evokes a festive feeling because you don’t want to unintentionally offend anyone who doesn’t celebrate the holiday your copy calls express attention to.
I wouldn’t necessarily say the images used here are festive, but there are unique elements that evoke a certain association with the holidays. Like the color green used within the photos. Or the partial glances of what appear to be snow globes. They’re seasonal elements, but not necessarily relegated to Christmas, Hanukkah or Kwanzaa.
Then, there’s the United States Postal Service (USPS) website. Granted, this website targets visitors within the United States, but it remains mindful of the differences in religions practiced and holidays celebrated.
The message remains neutral as does the image itself. The USPS is simply trying to help people quickly and festively send holiday cards, gifts and other items to distant relatives and friends.
5. Review The Customer Journey
The factor of speed is a big one when it comes to designing the customer journey. While the navigation cuts down on any unnecessary steps that might be taken when visitors can afford a more leisurely pace, your design should expedite the rest.
In other words:
Start talking about holiday-related content, products, pages and links right on the home page.
Make sure you have at least one mention above-the-fold, whether it’s in the navigation, in a blog link or in a seasonal promo.
Use the data from last year to streamline the ideal pathway from the home page to conversion.
Walk through that pathway as a visitor on both desktop and mobile. Is it as clear, concise and direct as possible?
Check the responsiveness of the pathway. Your site, in general, needs to be responsive, but if you’re optimizing a certain journey for visitors and you want them to convert on mobile, then extra care needs to be taken.
Below is another example from the Food52 website from the holidays. As you can see in this snippet, two kinds of holiday-related content are promoted. What’s cool about them, though, is that it’s not necessarily in-your-face.
The relish recipe could easily be used any time of the year. However, because pomegranates are often considered a winter food, this falls into the category of holiday-related content. The second post is more blatant about attracting holiday readers.
The final element in this screenshot is also worth taking note of. To start, it appears they’ve customized the copy specifically for this time of year. All it takes is one addition of the word “joyfully” to let visitors know that Food52 took time to make its site just a little more festive.
I also want to give them kudos for including a newsletter subscription box here and in other key areas of the site.
If the research from Adobe is right and only about half of mobile visitors convert, then this is a smart design choice. This way, Food52 can collect visitor information on mobile and contact them later. When interested visitors receive the reminder at a more convenient time and place, they can hop onto their desktop or other preferred device and finish the conversion process.
Another site which I think handles the customer journey optimization well is Cracker Barrel.
Cracker Barrel doesn’t overdo it when it comes to designing for the holidays. Instead, it’s developed a series of calls-to-action that set certain types of visitors on the right path.
The first one features an image of what looks like a holiday feast with the CTA “Order Heat N’ Serve”. That’s brilliant. If people are taking the time to visit this site right before Thanksgiving, it’s probably to see if they can get help preparing their major feast… which it appears they can.
The second section sort of looks festive, though I’d still say they play it safe with choice of color, texture and gift card image. With a CTA of “Buy Gift Cards”, they’re now appealing to holiday shoppers. Not only can you get a whole feast conveniently prepared by Cracker Barrel, but you can buy gifts here, too.
Sometimes designing for the holidays isn’t about the blatant use of snowflake imagery or promoting recipes for cooking a turkey. Sometimes it’s about understanding what your users’ particular needs are at that time and helping setting them on that exact journey right away.
I understand that there are ways to add a dancing Santa to a site or to spruce up pop-ups with animated text and images, but I think subtler is better.
It’s kind of like the whole holiday music and decorations thing. How many times have you gone to your local drug store at the end of October for the purposes of getting Halloween candy, only to be met by an entire aisle full of holiday decorations? Or maybe you entered a department store like Macy’s in November, thinking you’ll beat the crazy holiday crowds. And, yet, holiday music is already playing. It’s overkill.
If you want to impress mobile visitors with your website around the holidays, focus on making this a worthwhile experience. Optimize your server for high volumes of traffic, put extra security in place, reorganize the navigation and add some small festive touches to your design that call attention to the most relevant parts of your site at this time of year.
Have you learned how to optimize your website for both SEO and conversions? If not, your website isn’t working as hard as it should. SEO and conversions might exist in separate parts of the marketing sector, but they’re inextricably linked. If you have good SEO, you can attract more traffic and get more opportunities to convert potential customers. A website optimized for conversions typically has better metrics, such as time on page and bounce rate, which means that Google might rank it higher. The following tips and strategies will teach you how to optimize your website for both SEO and…
You have the ability to compile more data than you could ever need about your website visitors using conversion rate optimization (CRO) tools. But why should you care about user behavior? After all, CRO is just about maximizing clicks, conversions, and sales, right? Why should it matter what happens in between those actions? I’m here to tell you that it matters — a lot. User behavior gives you insight into how your website visitors act, think, and make decisions. While they’re contemplating a decision — for instance, about whether or not to sign up for your email newsletter — you…
Designing The Invisible: 3 Things I Learned Designing For Voice
The current iteration of voice-controlled digital assistants are still struggling to integrate as seamlessly as the big three voice players of Amazon, Google and Apple would hope. A 2017 report by Voicelabs states there’s only a 3 percent chance a user will be active in the second week after downloading a voice application and 62 percent of Alexa’s skills are still to get any kind of rating on its store (as of September 2017).
As designers, we have a real opportunity to provide valuable meaning to these assistants but we’re still trying to work out where the technology can add real benefits to the user. For many, embarking on a voice UI (VUI) project can be a bit like entering the Unknown. There are few success stories for designers or engineers to be inspired by, especially within contexts that illustrate how this nascent technology could help people thrive in new ways.
Experimenting With speechSynthesis
As part of BBC2’s Big Life Fix docuseries where teams of inventors create new and life-changing solutions for people in need, I had the opportunity to test and build a voice-controlled assistant for a woman called Susan. Susan has been living with a progressive form of Multiple Sclerosis for over 20 years and is now unable to complete everyday tasks for herself easily. With full-time carers, she relies on others to wash and dress her and has no ability to even change the channel on the TV without help.
While voice technology seemed like it would provide the smoothest pathway to overcoming Susan’s physical difficulties, Susan has never used a smartphone, so propelling her straight into an interaction with a voice assistant was never going to be easy — we had to think cleverly to help her learn to communicate with an incredibly alien technology.
The result for Susan is a highly customized voice-controlled assistant that now empowers her to complete everyday tasks with the freedom that others take for granted — from making a phone call to family, to listening to music. Built as an enhanced version of Amazon Alexa technology on their Echo Dot device, Susan’s voice assistant also involved physical customization as we 3D printed a casing in the shape of her favorite animal, an owl.
As we rapidly experimented and iterated on a solution for Susan, my team and I uncovered dozens of intricacies that come with designing for voice in a more inclusive and accessible way. Although it was a unique project, there were three key takeaways that are applicable to any VUI project.
1. Make It Personal
The tech works. It’s not just a matter of sitting back and waiting for computing power to increase in line with user expectation. We found the voice detection, recognition, and synthesis of each of the devices far more powerful than we anticipated. And it’s not as though there’s a lack of choice. There are over 30,000 Alexa skills on Amazon with an average of 50 new ones being published daily. Skills are specific capabilities that enable designers and developers to create a more personalized voice experience when using devices like the Amazon Echo Dot. They operate much like an app within the App store on your smartphone, allowing you to customize your voice assistant the way you please.
However, there currently is a big barrier to access. Skills must be added via the app rather than the device, often negating the benefits of a VUI and breaking the conversational flow (not to mention excluding those who can’t/won’t use a smartphone). This makes the process feel clumsy and disjointed at best, completely isolating at worst. Even once a skill is installed, no skill visibility and a restricted time frame for interaction result in a lack of confidence and anxiety; can it do what I want? How do I talk to it? Has it heard me? So, how do you build that connection and trust?
For Susan, it meant stripping away the unnecessary and presenting a curated selection of core functionality. By personalizing the content to the unique behaviors and requirements, we presented much-needed clarity and a more meaningful experience. Susan wanted to perform key tasks: answer the phone, make a call, change the TV channel, play music, and so on. By getting to understand her and her needs, we created an assistant that always felt relevant and useful. This was quite a manual process, but there is a huge opportunity for machine learning and AI here. If every voice assistant could offer an element of personalization, it could make the experience feel more relevant for everyone.
As we were designing for one individual, we could easily tailor the physical elements of the product for Susan. This meant designing — then 3D printing — a light diffuser in the shape of an owl (her favorite animal and something with a significant meaning to her). The owl acted as a visual manifestation of the technology and gave her something to talk to and project towards. It was her guide that gave her access to those skills she wanted, such as listening to music. As it was personal to her, it made the potentially alien, intimidating technology feel much more approachable and familiar.
Although a fully custom 3D printed housing isn’t an option for every VUI project, there is an opportunity to create a more relevant device for people to communicate with, especially if their needs or usage of home assistants is quite specific. For example, you might talk to a voice-enabled light about your home lighting and a fridge about your groceries.
2. Think About Audio Affordances
Currently, the user does all the heavy lifting. With an obscured mental model and no hand-holding from the tech, we’re forced to imagine our desired endpoint and work backwards through the necessary commands. The simplest tasks aside (set a timer for 5 minutes, play Abba on Spotify, etc.), that’s incredibly hard to do, especially if you suffer from ‘foggy moments’ something that Susan explained to us — difficulty in finding the right words.
When Apple famously used skeuomorphic visual elements for their early iPhone apps, the user gained valuable, familiar reference points which afforded its use and method of interaction. Only once the mental model became more established did they have the freedom to move away from this literal representation, into their current flat UI.
When designing our VUI, we decided to lean on the well-established menu system seen throughout digital and web navigation. It’s a familiar tool which demands less cognitive processing from the user and allowed us to incorporate methods of way-finding that didn’t result in starting from the beginning if things went wrong.
As an example, Susan found verbalizing what she wanted, in the time frame offered by current digital assistants, a stressful and often unpleasant experience; often compounded by an error message from the device at the end of it. Rather than expecting her to give an explicit command such as “Alexa, play Abba from my Spotify playlist,” we decided to create a guided menu tool that could help her start slowly and get incrementally more specific about what she wanted Alexa to do.
Susan’s owl now prompts her with a curated list of options such as, “Play Music” or “Watch Something.” If she chooses music, it gets more specific as she progresses through each decision gate, to uncover the genre she feels like listening to; in the case of Abba, she would select “60s music.” This enables Susan to navigate to her desired outcome much more easily, and at a pace that suits her. All the while, the owl was glowing and responding to her voice, letting her know she was being heard and understood.
3. There’s More To VUIs Than Voice
The non-lexical components of verbal communication impart a great deal of meaning to a conversation. Some can be replicated by the synthesized voice (intonation, pitch, and speed of speaking, hesitation noises, to name a few), but many can’t (such as gesture and facial expression). The tangible elements of the product need to replace these traditional, visual cues for the interaction for it to feel even slightly natural. But there’s more to it than that.
Firstly, when someone interacts with a product designed to replicate human behaviors, the visual components are interpreted by the user’s preconceived notions of the world (both inherent and learned) and affect their emotional responses. If something looks imposing and cold, you’re much less likely to initiate a conversation than with something that looks cute and cuddly.
In our case, as the technology was so foreign to the user, we needed to make it feel as familiar and inviting as possible — an owl. In doing so, we hoped to remove the feelings of anxiety and frustration we had experienced with other products. We also amplified the visual side of it — there is one color for an idle state — a gentle glow, almost like breathing, but when Susan says the wake words the light changes to awake and listening.
You can go further. Apple, for example, has a full-color display on their Homepod which affords a higher level of nuance to their interaction and visualization. Adding a visual experience might sound counterintuitive, but visualizations can be very helpful for the user.
Although applied to an individual use-case, these top-level learnings can help any project hoping to utilize the inherent benefits voice affords. Personalizing the content (where possible) provides much-needed clarity and a logical, relatable navigation system reduces cognitive load. Finally, don’t underestimate the importance of the visual components; when done well, they not only deliver fundamental conversation cues, they set the tone for the whole interaction.
For those looking to experiment with voice, Amazon now showcases tens of thousands of skills from companies like Starbucks and Uber, as well as those created by other innovative designers and developers. The Alexa Skills Kit (ASK) is a collection of self-service APIs, tools, documentation, and code samples that make it easy for you to add skills to Alexa, and start creating your own solutions. Wondering if voice even makes sense? Here’s some considerations before you get started.